Merge pull request #81 from design-sparx/feat/multiple-sidebar-variat…

…ions feat: multiple sidebar variations
design-sparx · Dec 8, 2024 · 5f92deb · 5f92deb
2 parents d12c537 + 51f7f09
commit 5f92deb
Show file tree

Hide file tree

Showing 15 changed files with 384 additions and 383 deletions.
diff --git a/.changeset/flat-books-peel.md b/.changeset/flat-books-peel.md
@@ -0,0 +1,5 @@
+---
+"mantine-analytics-dashboard": patch
+---
+
+feat: multiple sidebar variations
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -46,16 +46,6 @@
           "single"
         ]
       }
-    ],
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/ban-ts-comment": "warn",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        "argsIgnorePattern": "^_",
-        "varsIgnorePattern": "^_",
-        "caughtErrorsIgnorePattern": "^_"
-      }
     ]
   }
 }
diff --git a/app/apps/layout.tsx b/app/apps/layout.tsx
@@ -1,64 +1,15 @@
-'use client';
-
-import { AppShell, Container, rem, useMantineTheme } from '@mantine/core';
 import { ReactNode } from 'react';
-import { useDisclosure, useMediaQuery } from '@mantine/hooks';
-import AppMain from '@/components/AppMain';
-import Navigation from '@/components/Navigation';
-import HeaderNav from '@/components/HeaderNav';
-import FooterNav from '@/components/FooterNav';
+
+import { MainLayout } from '@/layout/Main';
+
+export type SidebarState = 'hidden' | 'mini' | 'full';
 
 type Props = {
   children: ReactNode;
 };
 
 function AppsLayout({ children }: Props) {
-  const theme = useMantineTheme();
-  const tablet_match = useMediaQuery('(max-width: 768px)');
-  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
-  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
-
-  return (
-    <AppShell
-      layout="alt"
-      header={{ height: 60 }}
-      footer={{ height: 60 }}
-      navbar={{
-        width: 300,
-        breakpoint: 'md',
-        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
-      }}
-      padding={0}
-    >
-      <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}
-          />
-        </Container>
-      </AppShell.Header>
-      <AppShell.Navbar>
-        <Navigation onClose={toggleMobile} />
-      </AppShell.Navbar>
-      <AppShell.Main>
-        <AppMain>{children}</AppMain>
-      </AppShell.Main>
-      <AppShell.Footer p="md">
-        <Container fluid px="lg">
-          <FooterNav />
-        </Container>
-      </AppShell.Footer>
-    </AppShell>
-  );
+  return <MainLayout>{children}</MainLayout>;
 }
 
 export default AppsLayout;
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
@@ -1,64 +1,13 @@
-'use client';
+import { ReactNode } from 'react';
 
-import { AppShell, Container, rem, useMantineTheme } from '@mantine/core';
-import { ReactNode, useState } from 'react';
-import { useDisclosure, useMediaQuery } from '@mantine/hooks';
-import AppMain from '@/components/AppMain';
-import Navigation from '@/components/Navigation';
-import HeaderNav from '@/components/HeaderNav';
-import FooterNav from '@/components/FooterNav';
+import { MainLayout } from '@/layout/Main';
 
 type Props = {
   children: ReactNode;
 };
 
 function DashboardLayout({ children }: Props) {
-  const theme = useMantineTheme();
-  const tablet_match = useMediaQuery('(max-width: 768px)');
-  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
-  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
-
-  return (
-    <AppShell
-      layout="alt"
-      header={{ height: 60 }}
-      footer={{ height: 60 }}
-      navbar={{
-        width: 300,
-        breakpoint: 'md',
-        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
-      }}
-      padding={0}
-    >
-      <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}
-          />
-        </Container>
-      </AppShell.Header>
-      <AppShell.Navbar>
-        <Navigation onClose={toggleMobile} />
-      </AppShell.Navbar>
-      <AppShell.Main>
-        <AppMain>{children}</AppMain>
-      </AppShell.Main>
-      <AppShell.Footer p="md">
-        <Container fluid px="lg">
-          <FooterNav />
-        </Container>
-      </AppShell.Footer>
-    </AppShell>
-  );
+  return <MainLayout>{children}</MainLayout>;
 }
 
 export default DashboardLayout;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,7 @@ import { ColorSchemeScript, MantineProvider } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
 import { Open_Sans } from 'next/font/google';
+
 import { myTheme } from '@/theme';
 import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';

diff --git a/app/pages/layout.tsx b/app/pages/layout.tsx
@@ -1,64 +1,13 @@
-'use client';
+import { ReactNode } from 'react';
 
-import { AppShell, Container, rem, useMantineTheme } from '@mantine/core';
-import { ReactNode, useState } from 'react';
-import { useDisclosure, useMediaQuery } from '@mantine/hooks';
-import AppMain from '@/components/AppMain';
-import Navigation from '@/components/Navigation';
-import HeaderNav from '@/components/HeaderNav';
-import FooterNav from '@/components/FooterNav';
+import { MainLayout } from '@/layout/Main';
 
 type Props = {
   children: ReactNode;
 };
 
 function PagesLayout({ children }: Props) {
-  const theme = useMantineTheme();
-  const tablet_match = useMediaQuery('(max-width: 768px)');
-  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
-  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
-
-  return (
-    <AppShell
-      layout="alt"
-      header={{ height: 60 }}
-      footer={{ height: 60 }}
-      navbar={{
-        width: 300,
-        breakpoint: 'md',
-        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
-      }}
-      padding={0}
-    >
-      <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}
-          />
-        </Container>
-      </AppShell.Header>
-      <AppShell.Navbar>
-        <Navigation onClose={toggleMobile} />
-      </AppShell.Navbar>
-      <AppShell.Main>
-        <AppMain>{children}</AppMain>
-      </AppShell.Main>
-      <AppShell.Footer p="md">
-        <Container fluid px="lg">
-          <FooterNav />
-        </Container>
-      </AppShell.Footer>
-    </AppShell>
-  );
+  return <MainLayout>{children}</MainLayout>;
 }
 
 export default PagesLayout;
diff --git a/components/HeaderNav/HeaderNav.tsx b/components/HeaderNav/HeaderNav.tsx
@@ -7,30 +7,28 @@ import {
   Flex,
   Group,
   Indicator,
-  MantineTheme,
   Menu,
-  rem,
   Stack,
   Text,
   TextInput,
   Tooltip,
+  rem,
   useMantineColorScheme,
   useMantineTheme,
 } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import {
   IconBell,
   IconCircleHalf2,
-  IconLayoutSidebarLeftCollapse,
-  IconLayoutSidebarLeftExpand,
   IconMessageCircle,
   IconMoonStars,
   IconPower,
   IconSearch,
   IconSunHigh,
 } from '@tabler/icons-react';
+
+import { SidebarState } from '@/app/apps/layout';
 import { LanguagePicker } from '@/components';
-import { upperFirst, useMediaQuery } from '@mantine/hooks';
-import { showNotification } from '@mantine/notifications';
 
 const ICON_SIZE = 20;
 
@@ -131,15 +129,14 @@ 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 } = props;
+  const { toggleMobile, mobileOpened, onSidebarStateChange } = props;
   const theme = useMantineTheme();
   const { setColorScheme, colorScheme } = useMantineColorScheme();
-  const laptop_match = useMediaQuery('(max-width: 992px)');
   const tablet_match = useMediaQuery('(max-width: 768px)');
   const mobile_match = useMediaQuery('(max-width: 425px)');
 
@@ -198,69 +195,11 @@ const HeaderNav = (props: HeaderNavProps) => {
     </Menu.Item>
   ));
 
-  const handleColorSwitch = (mode: 'light' | 'dark' | 'auto') => {
-    setColorScheme(mode);
-    showNotification({
-      title: `${upperFirst(mode)} is on`,
-      message: `You just switched to ${
-        colorScheme === 'dark' ? 'light' : 'dark'
-      } mode. Hope you like it`,
-      styles: (theme: MantineTheme) => ({
-        root: {
-          backgroundColor:
-            colorScheme === 'dark'
-              ? theme.colors.gray[7]
-              : theme.colors.gray[2],
-          borderColor:
-            colorScheme === 'dark'
-              ? theme.colors.gray[7]
-              : theme.colors.gray[2],
-
-          '&::before': {
-            backgroundColor:
-              colorScheme === 'dark'
-                ? theme.colors.gray[2]
-                : theme.colors.gray[7],
-          },
-        },
-
-        title: {
-          color:
-            colorScheme === 'dark'
-              ? theme.colors.gray[2]
-              : theme.colors.gray[7],
-        },
-        description: {
-          color:
-            colorScheme === 'dark'
-              ? theme.colors.gray[2]
-              : theme.colors.gray[7],
-        },
-        closeButton: {
-          color:
-            colorScheme === 'dark'
-              ? theme.colors.gray[2]
-              : theme.colors.gray[7],
-          '&:hover': {
-            backgroundColor: theme.colors.red[5],
-            color: theme.white,
-          },
-        },
-      }),
-    });
-  };
-
   return (
     <Group justify="space-between">
       <Group gap={0}>
         <Tooltip label="Toggle side navigation">
-          <ActionIcon visibleFrom="md" onClick={toggleDesktop}>
-            {desktopOpened ? (
-              <IconLayoutSidebarLeftCollapse />
-            ) : (
-              <IconLayoutSidebarLeftExpand />
-            )}
-          </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 {