ui: Remove collapsable from sidebar

PterodactylX · Jul 27, 2024 · 579593c · 579593c
1 parent c178b78
commit 579593c
Showing 1 changed file with 7 additions and 35 deletions.
diff --git a/resources/scripts/components/admin/Sidebar.tsx b/resources/scripts/components/admin/Sidebar.tsx
@@ -1,13 +1,14 @@
-import tw, { css, styled } from 'twin.macro';
+import tw, { styled } from 'twin.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`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 });