fix(sidenav): show hamburger meny on screen smaller than 768px (#1716)

* fix(sidenav): show hamburger meny on screen smaller than 768px * style(navbar): text primary on demo link
entur · Oct 31, 2024 · 457f178 · 457f178
1 parent 5c00cd1
commit 457f178
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/tavla/app/(admin)/components/HorizontalNavBar.tsx b/tavla/app/(admin)/components/HorizontalNavBar.tsx
@@ -12,7 +12,7 @@ function HorizontalNavBar({ loggedIn }: { loggedIn: boolean }) {
     if (!loggedIn) return null
     return (
         <div className="flex-row hidden md:flex gap-4">
-            <IconButton as={Link} href="?board" className="gap-4 p-4">
+            <IconButton as={Link} href="?board" className="gap-4">
                 <AddIcon /> Opprett tavle <CreateBoard />
             </IconButton>
             <TopNavigationItem

diff --git a/tavla/app/(admin)/components/Login/index.tsx b/tavla/app/(admin)/components/Login/index.tsx
@@ -27,7 +27,7 @@ function Login({ loggedIn }: { loggedIn: boolean }) {
                 onClick={async () => {
                     await logout()
                 }}
-                className="gap-4 p-4 hidden md:flex"
+                className="gap-4 !hidden md:!flex"
             >
                 <LogOutIcon />
                 Logg ut

diff --git a/tavla/app/(admin)/components/SideNavBar.tsx b/tavla/app/(admin)/components/SideNavBar.tsx
@@ -23,17 +23,17 @@ function SideNavBar({ loggedIn }: { loggedIn: boolean }) {
         <div className="block md:hidden">
             <IconButton
                 onClick={() => setIsOpen(!isOpen)}
-                className="bg-contrast rounded-full p-3"
+                className="!bg-contrast !rounded-full !p-3"
             >
                 <MenuIcon content="Meny" color="background" />
             </IconButton>
             <Modal
                 open={isOpen}
                 onDismiss={() => setIsOpen(false)}
-                size="medium"
-                className="!h-full !w-9/12 !fixed !top-0 !left-0 py-10 !max-h-full !rounded-none !p-0 overflow-visible"
+                size="small"
+                className="!h-full !w-9/12 !fixed !top-0 !left-0 !max-h-full !rounded-none !p-0 overflow-visible"
             >
-                <SideNavigation className="h-full !pt-10">
+                <SideNavigation className="!pt-10 !bg-primary">
                     <div className="pl-10">
                         <Link href="/" aria-label="Tilbake til landingssiden">
                             <Image src={TavlaLogoBlue} height={22} alt="" />
@@ -60,7 +60,7 @@ function SideNavBar({ loggedIn }: { loggedIn: boolean }) {
                         </SideNavigationItem>
                         <SideNavigationItem
                             as={Button}
-                            className="[&>button]:justify-start [&>button]:px-10"
+                            className="[&>button]:justify-start [&>button]:px-10 [&>button]:bg-secondary [&>button]:text-primary"
                             onClick={async () => {
                                 setIsOpen(false)
                                 await logout()
@@ -72,7 +72,7 @@ function SideNavBar({ loggedIn }: { loggedIn: boolean }) {
                 </SideNavigation>
                 <IconButton
                     onClick={() => setIsOpen(false)}
-                    className="bg-contrast rounded-full p-3 absolute bottom-[10%] -right-5"
+                    className="!bg-contrast !rounded-full !p-3 !absolute !bottom-[10%] !right-5"
                 >
                     <LeftArrowIcon color="background" />
                 </IconButton>

diff --git a/tavla/app/(admin)/components/TopNavigation.tsx b/tavla/app/(admin)/components/TopNavigation.tsx
@@ -29,6 +29,7 @@ function TopNavigation({ loggedIn }: { loggedIn: boolean }) {
                             onClick={() => {
                                 posthog.capture('DEMO_FROM_NAV_BAR_BTN')
                             }}
+                            className="!text-primary"
                         >
                             Prøv Tavla
                         </TopNavigationItem>