diff --git a/resources/scripts/routers/AdminRouter.tsx b/resources/scripts/routers/AdminRouter.tsx index 02800c7f4..e9c7814c1 100644 --- a/resources/scripts/routers/AdminRouter.tsx +++ b/resources/scripts/routers/AdminRouter.tsx @@ -25,12 +25,12 @@ import RoleEditContainer from '@/components/admin/roles/RoleEditContainer'; import NestsContainer from '@/components/admin/nests/NestsContainer'; import NestEditContainer from '@/components/admin/nests/NestEditContainer'; import MountsContainer from '@/components/admin/mounts/MountsContainer'; +import NewMountContainer from '@/components/admin/mounts/NewMountContainer'; import MountEditContainer from '@/components/admin/mounts/MountEditContainer'; import EggRouter from '@/components/admin/nests/eggs/EggRouter'; import ServerRouter from '@/components/admin/servers/ServerRouter'; import { NotFound } from '@/components/elements/ScreenBlock'; import { usePersistedState } from '@/plugins/usePersistedState'; -import NewMountContainer from '@/components/admin/mounts/NewMountContainer'; 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`}; @@ -76,12 +76,24 @@ const Sidebar = styled.div<{ collapsed?: boolean }>` } & > a { - ${props => !props.collapsed && tw`hidden`}; + ${tw`h-10 w-full flex flex-row items-center text-neutral-300 cursor-pointer select-none`}; + ${props => props.collapsed ? tw`justify-center px-4` : tw`px-8`}; + + & > svg { + ${tw`h-6 w-6 flex flex-shrink-0`}; + } + + & > span { + ${props => props.collapsed ? tw`hidden` : tw`font-header font-medium text-lg whitespace-nowrap leading-none ml-3`}; + } + + &:hover { + ${tw`text-neutral-50`}; + } } & > div.user { - ${tw`h-16 w-full flex items-center bg-neutral-700`}; - ${props => props.collapsed ? tw`justify-center` : tw`mt-auto px-5`}; + ${tw`h-16 w-full flex items-center bg-neutral-700 justify-center`}; & > div, a { ${props => props.collapsed && tw`hidden`}; @@ -119,57 +131,58 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => { Administration - + Overview - + Settings Management - + Databases - + Locations - + Nodes - + Servers - + Users - + Roles Service Management - + Nests - + Mounts - - + + + Return @@ -182,18 +195,6 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => { - - {applicationName} - - - - - - - - - - {/* */}