Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(admin): persist sidebar collapsed state

Browse source
This commit is contained in:
Matthew Penner 2021-08-02 12:19:18 -06:00
parent 98cb7370f0
commit 1d9927d7f8
2 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/components/server/Console.tsx
View file

@ -76,7 +76,7 @@ export default () => {
const scrollDownHelperAddon = new ScrollDownHelperAddon(); const scrollDownHelperAddon = new ScrollDownHelperAddon();
const { connected, instance } = ServerContext.useStoreState(state => state.socket); const { connected, instance } = ServerContext.useStoreState(state => state.socket);
const [ canSendCommands ] = usePermissions([ 'control.console' ]); const [ canSendCommands ] = usePermissions([ 'control.console' ]);
const serverId = ServerContext.useStoreState(state => state.server.data!.id); const serverId = ServerContext.useStoreState(state => state.server.data!.uuid);
const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring); const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring);
const [ history, setHistory ] = usePersistedState<string[]>(`${serverId}:command_history`, []); const [ history, setHistory ] = usePersistedState<string[]>(`${serverId}:command_history`, []);
const [ historyIndex, setHistoryIndex ] = useState(-1); const [ historyIndex, setHistoryIndex ] = useState(-1);

6
resources/scripts/routers/AdminRouter.tsx
View file

@ -1,5 +1,5 @@
import { State, useStoreState } from 'easy-peasy'; import { State, useStoreState } from 'easy-peasy';
import React, { useState } from 'react'; import React from 'react';
import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom'; import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
import tw, { styled } from 'twin.macro'; import tw, { styled } from 'twin.macro';
import { ApplicationStore } from '@/state'; import { ApplicationStore } from '@/state';
@ -29,6 +29,7 @@ import MountEditContainer from '@/components/admin/mounts/MountEditContainer';
import EggRouter from '@/components/admin/nests/eggs/EggRouter'; import EggRouter from '@/components/admin/nests/eggs/EggRouter';
import ServerRouter from '@/components/admin/servers/ServerRouter'; import ServerRouter from '@/components/admin/servers/ServerRouter';
import { NotFound } from '@/components/elements/ScreenBlock'; import { NotFound } from '@/components/elements/ScreenBlock';
import { usePersistedState } from '@/plugins/usePersistedState';
const Sidebar = styled.div<{ collapsed?: boolean }>` const Sidebar = styled.div<{ collapsed?: boolean }>`
${tw`fixed h-screen hidden md:flex flex-col items-center flex-shrink-0 bg-neutral-900 overflow-x-hidden transition-all duration-250 ease-linear`}; ${tw`fixed h-screen hidden md:flex flex-col items-center flex-shrink-0 bg-neutral-900 overflow-x-hidden transition-all duration-250 ease-linear`};
@ -99,7 +100,8 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
const user = useStoreState((state: State<ApplicationStore>) => state.user.data); const user = useStoreState((state: State<ApplicationStore>) => state.user.data);
const applicationName = useStoreState((state: ApplicationStore) => state.settings.data!.name); const applicationName = useStoreState((state: ApplicationStore) => state.settings.data!.name);
const [ collapsed, setCollapsed ] = useState<boolean>(); const uuid = useStoreState(state => state.user.data!.uuid);
const [ collapsed, setCollapsed ] = usePersistedState<boolean>(`${uuid}:admin_sidebar_collapsed`, false);
return ( return (
<div css={tw`h-screen w-screen overflow-x-hidden flex flex-col md:flex-row`}> <div css={tw`h-screen w-screen overflow-x-hidden flex flex-col md:flex-row`}>