misc_pterodactyl-panel/resources/scripts/components/admin/Sidebar.tsx

85 lines
1.9 KiB
TypeScript
Raw Normal View History

import tw, { css } from 'twin.macro';
import styled from 'styled-components/macro';
import { withSubComponents } from '@/components/helpers';
const Wrapper = styled.div`
${tw`w-full flex flex-col px-4`};
& > a {
${tw`h-10 w-full flex flex-row items-center text-neutral-300 cursor-pointer select-none px-4`};
${tw`hover:text-neutral-50`};
& > svg {
${tw`h-6 w-6 flex flex-shrink-0`};
}
& > span {
${tw`font-header font-medium text-lg whitespace-nowrap leading-none ml-3`};
}
&:active, &.active {
${tw`text-neutral-50 bg-neutral-800 rounded`};
}
}
`;
const Section = styled.div`
${tw`h-[18px] font-header font-medium text-xs text-neutral-300 whitespace-nowrap uppercase ml-4 mb-1 select-none`};
&:not(:first-of-type) {
${tw`mt-4`};
}
`;
const User = styled.div`
${tw`h-16 w-full flex items-center bg-neutral-700 justify-center`};
`;
const Sidebar = styled.div<{ $collapsed?: boolean }>`
${tw`h-screen hidden md:flex flex-col items-center flex-shrink-0 bg-neutral-900 overflow-x-hidden ease-linear`};
${tw`transition-[width] duration-150 ease-in`};
${tw`w-[17.5rem]`};
& > a {
${tw`h-10 w-full flex flex-row items-center text-neutral-300 cursor-pointer select-none px-8`};
${tw`hover:text-neutral-50`};
& > svg {
${tw`transition-none h-6 w-6 flex flex-shrink-0`};
}
& > span {
${tw`font-header font-medium text-lg whitespace-nowrap leading-none ml-3`};
}
}
2021-10-03 23:08:13 +00:00
${props => props.$collapsed && css`
${tw`w-20`};
2021-10-03 23:08:13 +00:00
${Section} {
${tw`invisible`};
}
2021-10-03 23:08:13 +00:00
${Wrapper} {
2021-10-04 00:26:44 +00:00
${tw`px-5`};
2021-10-03 23:08:13 +00:00
2021-10-04 00:26:44 +00:00
& > a {
${tw`justify-center px-0`};
}
}
& > a {
${tw`justify-center px-4`};
}
2021-10-03 23:08:13 +00:00
& > a > span,
${User} > div,
${User} > a,
${Wrapper} > a > span {
${tw`hidden`};
}
`};
`;
export default withSubComponents(Sidebar, { Section, Wrapper, User });