fix: move nav outside ul and fix dropdown styling

hackerspace-ntnu · Nov 21, 2024 · 21d3599 · 21d3599
1 parent 8c3ef66
commit 21d3599
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 37 deletions.
diff --git a/src/components/layout/header/DesktopNavMenu.tsx b/src/components/layout/header/DesktopNavMenu.tsx
@@ -43,16 +43,14 @@ function DesktopNavMenu({ t }: DesktopNavMenuProps) {
           <EllipsisIcon aria-hidden />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className='hidden min-w-[6rem] md:flex' align='end'>
-        <SecondaryNav
-          asDropDown
-          onClick={() => setOpen(false)}
-          t={{
-            storage: t.storage,
-            shiftSchedule: t.shiftSchedule,
-          }}
-        />
-      </DropdownMenuContent>
+      <SecondaryNav
+        asDropDown
+        onClick={() => setOpen(false)}
+        t={{
+          storage: t.storage,
+          shiftSchedule: t.shiftSchedule,
+        }}
+      />
     </DropdownMenu>
   );
 }

diff --git a/src/components/layout/header/MobileSheet.tsx b/src/components/layout/header/MobileSheet.tsx
@@ -74,17 +74,14 @@ function MobileSheet({ className, t }: MobileSheetProps) {
         />
         <Separator />
         <div className='mt-6 ml-2 flex flex-row gap-2'>
-          <Separator orientation='vertical' className='h-max' />
-          <ul>
-            <SecondaryNav
-              className='flex flex-col space-y-3'
-              onClick={() => setOpen(false)}
-              t={{
-                storage: t.storage,
-                shiftSchedule: t.shiftSchedule,
-              }}
-            />
-          </ul>
+          <Separator orientation='vertical' />
+          <SecondaryNav
+            onClick={() => setOpen(false)}
+            t={{
+              storage: t.storage,
+              shiftSchedule: t.shiftSchedule,
+            }}
+          />
         </div>
       </SheetContent>
     </Sheet>

diff --git a/src/components/layout/header/NavItem.tsx b/src/components/layout/header/NavItem.tsx
@@ -9,7 +9,7 @@ type NavItemProps = ComponentProps<typeof Link> & {
 
 function NavItem({ onClick, t, ...props }: NavItemProps) {
   return (
-    <Button variant='nav' size='none' asChild>
+    <Button className='justify-start' variant='nav' size='none' asChild>
       <Link onClick={onClick} {...props}>
         {t}
       </Link>

diff --git a/src/components/layout/header/SecondaryNav.tsx b/src/components/layout/header/SecondaryNav.tsx
@@ -1,22 +1,19 @@
 import { NavItem } from '@/components/layout/header/NavItem';
-import { DropdownMenuItem } from '@/components/ui/DropdownMenu';
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '@/components/ui/DropdownMenu';
 
 type SecondaryNavProps = {
   asDropDown?: boolean;
-  className?: string;
   onClick?: () => void;
   t: {
     storage: string;
     shiftSchedule: string;
   };
 };
 
-function SecondaryNav({
-  asDropDown = false,
-  className,
-  onClick,
-  t,
-}: SecondaryNavProps) {
+function SecondaryNav({ asDropDown = false, onClick, t }: SecondaryNavProps) {
   const items = [
     <NavItem key={0} onClick={onClick} href='/storage' t={t.storage} />,
     <NavItem
@@ -28,13 +25,29 @@ function SecondaryNav({
   ];
 
   return (
-    <nav className={className}>
-      {items.map((item) =>
-        asDropDown ? (
-          <DropdownMenuItem key={item.key}>{item}</DropdownMenuItem>
-        ) : (
-          <li key={item.key}>{item}</li>
-        ),
+    <nav>
+      {!asDropDown && (
+        <ul className='space-y-3'>
+          {items.map((item) => (
+            <li key={item.key}>{item}</li>
+          ))}
+        </ul>
+      )}
+      {asDropDown && (
+        <DropdownMenuContent
+          className='hidden min-w-[6rem] flex-col items-start md:flex'
+          align='end'
+        >
+          {items.map((item) => (
+            <DropdownMenuItem
+              className='w-full justify-start'
+              key={item.key}
+              asChild
+            >
+              {item}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
       )}
     </nav>
   );