feat(ui): improved dark mode styling and sidebar behavior

Updated CSS for consistent dark mode visuals with changes to color variables and mixins. Enhanced navigation behavior with local storage for sidebar state, removed unused desktop toggles, and refined responsive design adjustments.
design-sparx · Dec 8, 2024 · 63dc8db · 63dc8db
1 parent 58c6023
commit 63dc8db
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 71 deletions.
diff --git a/components/HeaderNav/HeaderNav.tsx b/components/HeaderNav/HeaderNav.tsx
@@ -20,7 +20,6 @@ import { useMediaQuery } from '@mantine/hooks';
 import {
   IconBell,
   IconCircleHalf2,
-  IconMenu2,
   IconMessageCircle,
   IconMoonStars,
   IconPower,
@@ -130,21 +129,12 @@ const NOTIFICATIONS = [
 type HeaderNavProps = {
   mobileOpened?: boolean;
   toggleMobile?: () => void;
-  desktopOpened?: boolean;
-  toggleDesktop?: () => void;
   sidebarState: SidebarState;
   onSidebarStateChange: () => void;
 };
 
 const HeaderNav = (props: HeaderNavProps) => {
-  const {
-    desktopOpened,
-    toggleDesktop,
-    toggleMobile,
-    mobileOpened,
-    sidebarState,
-    onSidebarStateChange,
-  } = props;
+  const { toggleMobile, mobileOpened, onSidebarStateChange } = props;
   const theme = useMantineTheme();
   const { setColorScheme, colorScheme } = useMantineColorScheme();
   const tablet_match = useMediaQuery('(max-width: 768px)');
@@ -209,13 +199,7 @@ const HeaderNav = (props: HeaderNavProps) => {
     <Group justify="space-between">
       <Group gap={0}>
         <Tooltip label="Toggle side navigation">
-          <ActionIcon
-            variant="default"
-            visibleFrom="md"
-            onClick={onSidebarStateChange}
-          >
-            <IconMenu2 size={16} />
-          </ActionIcon>
+          <Burger visibleFrom="md" size="sm" onClick={onSidebarStateChange} />
         </Tooltip>
         <Burger
           opened={mobileOpened}

diff --git a/components/Logo/Logo.module.css b/components/Logo/Logo.module.css
@@ -2,7 +2,6 @@
   padding: rem(4px) rem(8px);
   font-size: var(--mantine-font-size-md);
   border-radius: var(--mantine-radius-sm);
-  color: light-dark(var(--mantine-color-dark-7), var(--mantine-color-white));
   font-weight: 600;
 
   @mixin hover {

diff --git a/components/Logo/Logo.tsx b/components/Logo/Logo.tsx
@@ -25,8 +25,8 @@ const Logo = ({ href, showText = true, ...others }: LogoProps) => {
       <Group gap="xs">
         <Image
           src="/logo-no-background.png"
-          height={24}
-          width={24}
+          height={showText ? 32 : 24}
+          width={showText ? 32 : 24}
           alt="design sparx logo"
         />
         {showText && <Text fw={700}>Mantine admin</Text>}

diff --git a/components/Navigation/Links/Links.module.css b/components/Navigation/Links/Links.module.css
@@ -10,7 +10,7 @@
   }
 
   @mixin dark {
-    color: var(--mantine-color-black);
+    color: var(--mantine-color-white);
   }
 
   @mixin hover {
@@ -65,7 +65,7 @@
   }
 
   @mixin dark {
-    color: var(--mantine-color-black);
+    color: var(--mantine-color-white);
   }
 
   @mixin hover {

diff --git a/components/Navigation/Navigation.module.css b/components/Navigation/Navigation.module.css
@@ -1,7 +1,6 @@
 .navbar {
   background-color: var(--mantine-primary-color-filled);
   min-height: rem(100vh);
-  width: rem(300px);
   padding: var(--mantine-spacing-md);
   padding-bottom: 0;
   display: flex;
@@ -16,11 +15,19 @@
   }
 
   @mixin dark {
-    background-color: var(--mantine-primary-color-light-color);
+    background-color: var(--mantine-color-dark-7);
   }
 
   &[data-sidebar-state="full"] {
     width: rem(300px);
+
+    @media (max-width: $mantine-breakpoint-md) {
+      width: 100%;
+    }
+
+    @media (max-width: $mantine-breakpoint-sm) {
+      width: 100%;
+    }
   }
 
   &[data-sidebar-state="mini"] {
@@ -48,36 +55,27 @@
     overflow: hidden;
   }
 
-
   @media (max-width: $mantine-breakpoint-md) {
     width: 100%;
   }
 }
 
 .header {
-  padding: var(--mantine-spacing-md);
-  padding-top: 0;
+  padding: 0 var(--mantine-spacing-md) var(--mantine-spacing-sm) var(--mantine-spacing-md);
   margin-left: calc(var(--mantine-spacing-md) * -1);
   margin-right: calc(var(--mantine-spacing-md) * -1);
-  border-bottom: rem(1px) solid var(--mantine-primary-color-filled-hover);
-
-  @mixin light {
-    color: var(--mantine-color-white);
-  }
-
-  @mixin dark {
-    color: var(--mantine-color-black);
-  }
+  border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+  color: var(--mantine-color-white);
 }
 
 .logo {
-  @mixin light {
-    color: var(--mantine-color-white);
-  }
+  /*@mixin light {*/
+  /*  color: var(--mantine-color-white);*/
+  /*}*/
 
-  @mixin dark {
-    color: var(--mantine-color-black);
-  }
+  /*@mixin dark {*/
+  /*  color: var(--mantine-color-black);*/
+  /*}*/
 }
 
 .links {
@@ -89,30 +87,20 @@
 .linksInner {
   padding-top: var(--mantine-spacing-xl);
   padding-bottom: var(--mantine-spacing-xl);
+
+  &[data-sidebar-state="mini"] {
+    padding-top: 0;
+  }
 }
 
 .linkHeader {
   font-weight: 500;
-
-  @mixin light {
-    color: var(--mantine-color-gray-3);
-  }
-
-  @mixin dark {
-    color: var(--mantine-color-dark-8);
-  }
+  color: light-dark(var(--mantine-color-white), var(--mantine-color-gray-3));
 }
 
 .footer {
   margin-left: calc(var(--mantine-spacing-md) * -1);
   margin-right: calc(var(--mantine-spacing-md) * -1);
-  border-top: rem(1px) solid var(--mantine-primary-color-filled-hover);
-
-  @mixin light {
-    color: var(--mantine-color-white);
-  }
-
-  @mixin dark {
-    color: var(--mantine-color-black);
-  }
+  border-top: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+  color: var(--mantine-color-white);
 }
diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { ActionIcon, Box, Flex, Group, ScrollArea, Text } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
@@ -167,12 +167,18 @@ const Navigation = ({
     </Box>
   ));
 
+  useEffect(() => {
+    if (tablet_match) {
+      onSidebarStateChange('full');
+    }
+  }, [onSidebarStateChange, tablet_match]);
+
   return (
-    <nav className={classes.navbar} data-sidebar-state={sidebarState}>
+    <div className={classes.navbar} data-sidebar-state={sidebarState}>
       <div className={classes.header}>
         <Flex justify="space-between" align="center" gap="sm">
           <Group
-            justify="space-between"
+            justify={sidebarState === 'mini' ? 'center' : 'space-between'}
             style={{ flex: tablet_match ? 'auto' : 1 }}
           >
             <Logo className={classes.logo} showText={sidebarState !== 'mini'} />
@@ -186,7 +192,9 @@ const Navigation = ({
       </div>
 
       <ScrollArea className={classes.links}>
-        <div className={classes.linksInner}>{links}</div>
+        <div className={classes.linksInner} data-sidebar-state={sidebarState}>
+          {links}
+        </div>
       </ScrollArea>
 
       <div className={classes.footer}>
@@ -197,7 +205,7 @@ const Navigation = ({
           showText={sidebarState !== 'mini'}
         />
       </div>
-    </nav>
+    </div>
   );
 };
 

diff --git a/layout/Main/index.tsx b/layout/Main/index.tsx
@@ -3,7 +3,7 @@
 import { ReactNode, useState } from 'react';
 
 import { AppShell, Container, rem, useMantineTheme } from '@mantine/core';
-import { useDisclosure, useMediaQuery } from '@mantine/hooks';
+import { useDisclosure, useLocalStorage, useMediaQuery } from '@mantine/hooks';
 
 import AppMain from '@/components/AppMain';
 import FooterNav from '@/components/FooterNav';
@@ -20,8 +20,11 @@ export function MainLayout({ children }: Props) {
   const theme = useMantineTheme();
   const tablet_match = useMediaQuery('(max-width: 768px)');
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
-  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
-  const [sidebarState, setSidebarState] = useState<SidebarState>('full');
+  const [desktopOpened] = useDisclosure(true);
+  const [sidebarState, setSidebarState] = useLocalStorage<SidebarState>({
+    key: 'mantine-nav-state',
+    defaultValue: 'full',
+  });
 
   const toggleSidebarState = () => {
     setSidebarState((current) => {
@@ -46,15 +49,12 @@ export function MainLayout({ children }: Props) {
       <AppShell.Header
         style={{
           height: rem(60),
-          border: 'none',
           boxShadow: tablet_match ? theme.shadows.md : theme.shadows.sm,
         }}
       >
         <Container fluid py="sm" px="lg">
           <HeaderNav
-            desktopOpened={desktopOpened}
             mobileOpened={mobileOpened}
-            toggleDesktop={toggleDesktop}
             toggleMobile={toggleMobile}
             sidebarState={sidebarState}
             onSidebarStateChange={toggleSidebarState}