diff --git a/resources/scripts/components/admin/Sidebar.tsx b/resources/scripts/components/admin/Sidebar.tsx index 7ff60cad..6d24704d 100644 --- a/resources/scripts/components/admin/Sidebar.tsx +++ b/resources/scripts/components/admin/Sidebar.tsx @@ -1,4 +1,4 @@ -import tw, { css, styled } from 'twin.macro'; +import tw, { styled } from 'twin.macro'; import { withSubComponents } from '@/components/helpers'; @@ -6,8 +6,9 @@ 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`h-10 w-full flex flex-row items-center text-neutral-300 cursor-pointer select-none px-4 my-1`}; ${tw`hover:text-neutral-50`}; + ${tw`transition-colors duration-150 ease-in rounded-sm`}; & > svg { ${tw`h-6 w-6 flex flex-shrink-0`}; @@ -19,7 +20,7 @@ const Wrapper = styled.div` &:active, &.active { - ${tw`text-neutral-50 bg-neutral-800 rounded`}; + ${tw`text-primary-foreground bg-primary`}; } } `; @@ -33,11 +34,11 @@ const Section = styled.div` `; const User = styled.div` - ${tw`h-16 w-full flex items-center bg-neutral-700 justify-center`}; + ${tw`h-16 w-full flex items-center 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`}; +const Sidebar = styled.div` + ${tw`h-screen hidden md:flex flex-col items-center flex-shrink-0 overflow-x-hidden ease-linear`}; ${tw`transition-[width] duration-150 ease-in`}; ${tw`w-[17.5rem]`}; @@ -53,35 +54,6 @@ const Sidebar = styled.div<{ $collapsed?: boolean }>` ${tw`font-header font-medium text-lg whitespace-nowrap leading-none ml-3`}; } } - - ${props => - props.$collapsed && - css` - ${tw`w-20`}; - - ${Section} { - ${tw`invisible`}; - } - - ${Wrapper} { - ${tw`px-5`}; - - & > a { - ${tw`justify-center px-0`}; - } - } - - & > a { - ${tw`justify-center px-4`}; - } - - & > a > span, - ${User} > div, - ${User} > a, - ${Wrapper} > a > span { - ${tw`hidden`}; - } - `}; `; export default withSubComponents(Sidebar, { Section, Wrapper, User });