fix(ui): navbar not closing on mobile devices

design-sparx · Apr 6, 2024 · 9daa7a1 · 9daa7a1
1 parent d8dac5c
commit 9daa7a1
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 78 deletions.
diff --git a/.changeset/silent-pants-tickle.md b/.changeset/silent-pants-tickle.md
@@ -0,0 +1,5 @@
+---
+'mantine-analytics-dashboard': minor
+---
+
+fix(ui): navbar not closing on mobile devices
diff --git a/.changeset/tricky-pillows-destroy.md b/.changeset/tricky-pillows-destroy.md
@@ -0,0 +1,5 @@
+---
+'mantine-analytics-dashboard': patch
+---
+
+changed onboarding flow to landing -> signin -> dashboard, removed "auto" theme support now is light & dark only
diff --git a/app/apps/layout.tsx b/app/apps/layout.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { AppShell, Container, rem, useMantineTheme } from '@mantine/core';
-import { ReactNode, useState } from 'react';
+import { ReactNode } from 'react';
 import { useDisclosure, useMediaQuery } from '@mantine/hooks';
 import AppMain from '@/components/AppMain';
 import Navigation from '@/components/Navigation';
@@ -12,11 +12,8 @@ type Props = {
   children: ReactNode;
 };
 
-function CalendarLayout({ children }: Props) {
+function AppsLayout({ children }: Props) {
   const theme = useMantineTheme();
-  const [opened, setOpened] = useState(false);
-  const [themeOpened, { open: themeOpen, close: themeClose }] =
-    useDisclosure(false);
   const tablet_match = useMediaQuery('(max-width: 768px)');
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
@@ -42,8 +39,6 @@ function CalendarLayout({ children }: Props) {
       >
         <Container fluid py="sm" px="lg">
           <HeaderNav
-            opened={opened}
-            handleOpen={() => setOpened((o) => !o)}
             desktopOpened={desktopOpened}
             mobileOpened={mobileOpened}
             toggleDesktop={toggleDesktop}
@@ -52,7 +47,7 @@ function CalendarLayout({ children }: Props) {
         </Container>
       </AppShell.Header>
       <AppShell.Navbar>
-        <Navigation onClose={() => setOpened(false)} />
+        <Navigation onClose={toggleMobile} />
       </AppShell.Navbar>
       <AppShell.Main>
         <AppMain>{children}</AppMain>
@@ -66,4 +61,4 @@ function CalendarLayout({ children }: Props) {
   );
 }
 
-export default CalendarLayout;
+export default AppsLayout;
diff --git a/app/authentication/auth0/layout.tsx b/app/authentication/auth0/layout.tsx
@@ -1,23 +1,20 @@
 'use client';
 
-import { ReactNode, useState } from 'react';
-import { Providers } from '@/providers/session';
 import { AppShell, Container, rem, useMantineTheme } from '@mantine/core';
-import HeaderNav from '@/components/HeaderNav';
-import Navigation from '@/components/Navigation';
+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 { useDisclosure, useMediaQuery } from '@mantine/hooks';
+import { Providers } from '@/providers/session';
 
-type Auth0LayoutProps = {
+type Props = {
   children: ReactNode;
 };
 
-export default function Auth0Layout({ children }: Auth0LayoutProps) {
+function Auth0Layout({ children }: Props) {
   const theme = useMantineTheme();
-  const [opened, setOpened] = useState(false);
-  const [themeOpened, { open: themeOpen, close: themeClose }] =
-    useDisclosure(false);
   const tablet_match = useMediaQuery('(max-width: 768px)');
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
@@ -43,8 +40,6 @@ export default function Auth0Layout({ children }: Auth0LayoutProps) {
       >
         <Container fluid py="sm" px="lg">
           <HeaderNav
-            opened={opened}
-            handleOpen={() => setOpened((o) => !o)}
             desktopOpened={desktopOpened}
             mobileOpened={mobileOpened}
             toggleDesktop={toggleDesktop}
@@ -53,7 +48,7 @@ export default function Auth0Layout({ children }: Auth0LayoutProps) {
         </Container>
       </AppShell.Header>
       <AppShell.Navbar>
-        <Navigation onClose={() => setOpened(false)} />
+        <Navigation onClose={toggleMobile} />
       </AppShell.Navbar>
       <AppShell.Main>
         <AppMain>
@@ -68,3 +63,5 @@ export default function Auth0Layout({ children }: Auth0LayoutProps) {
     </AppShell>
   );
 }
+
+export default Auth0Layout;
diff --git a/app/authentication/clerk/layout.tsx b/app/authentication/clerk/layout.tsx
@@ -7,16 +7,14 @@ import AppMain from '@/components/AppMain';
 import Navigation from '@/components/Navigation';
 import HeaderNav from '@/components/HeaderNav';
 import FooterNav from '@/components/FooterNav';
+import { Providers } from '@/providers/session';
 
 type Props = {
   children: ReactNode;
 };
 
 function ClerkLayout({ children }: Props) {
   const theme = useMantineTheme();
-  const [opened, setOpened] = useState(false);
-  const [themeOpened, { open: themeOpen, close: themeClose }] =
-    useDisclosure(false);
   const tablet_match = useMediaQuery('(max-width: 768px)');
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
@@ -42,8 +40,6 @@ function ClerkLayout({ children }: Props) {
       >
         <Container fluid py="sm" px="lg">
           <HeaderNav
-            opened={opened}
-            handleOpen={() => setOpened((o) => !o)}
             desktopOpened={desktopOpened}
             mobileOpened={mobileOpened}
             toggleDesktop={toggleDesktop}
@@ -52,10 +48,12 @@ function ClerkLayout({ children }: Props) {
         </Container>
       </AppShell.Header>
       <AppShell.Navbar>
-        <Navigation onClose={() => setOpened(false)} />
+        <Navigation onClose={toggleMobile} />
       </AppShell.Navbar>
       <AppShell.Main>
-        <AppMain>{children}</AppMain>
+        <AppMain>
+          <Providers>{children}</Providers>
+        </AppMain>
       </AppShell.Main>
       <AppShell.Footer p="md">
         <Container fluid px="lg">

diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
@@ -12,11 +12,8 @@ type Props = {
   children: ReactNode;
 };
 
-function CalendarLayout({ children }: Props) {
+function DashboardLayout({ children }: Props) {
   const theme = useMantineTheme();
-  const [opened, setOpened] = useState(false);
-  const [themeOpened, { open: themeOpen, close: themeClose }] =
-    useDisclosure(false);
   const tablet_match = useMediaQuery('(max-width: 768px)');
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
@@ -42,8 +39,6 @@ function CalendarLayout({ children }: Props) {
       >
         <Container fluid py="sm" px="lg">
           <HeaderNav
-            opened={opened}
-            handleOpen={() => setOpened((o) => !o)}
             desktopOpened={desktopOpened}
             mobileOpened={mobileOpened}
             toggleDesktop={toggleDesktop}
@@ -52,7 +47,7 @@ function CalendarLayout({ children }: Props) {
         </Container>
       </AppShell.Header>
       <AppShell.Navbar>
-        <Navigation onClose={() => setOpened(false)} />
+        <Navigation onClose={toggleMobile} />
       </AppShell.Navbar>
       <AppShell.Main>
         <AppMain>{children}</AppMain>
@@ -66,4 +61,4 @@ function CalendarLayout({ children }: Props) {
   );
 }
 
-export default CalendarLayout;
+export default DashboardLayout;
diff --git a/app/page.tsx b/app/page.tsx
@@ -28,7 +28,13 @@ import {
   useMantineTheme,
 } from '@mantine/core';
 import Link from 'next/link';
-import { PATH_APPS, PATH_DASHBOARD, PATH_DOCS, PATH_GITHUB } from '@/routes';
+import {
+  PATH_APPS,
+  PATH_AUTH,
+  PATH_DASHBOARD,
+  PATH_DOCS,
+  PATH_GITHUB,
+} from '@/routes';
 import {
   IconAdjustmentsHorizontal,
   IconApps,
@@ -297,7 +303,7 @@ export default function Home() {
                 <Group my="lg">
                   <Button
                     component={Link}
-                    href={PATH_DASHBOARD.default}
+                    href={PATH_AUTH.signin}
                     size="md"
                     leftSection={<IconPlayerPlay size={18} />}
                   >

diff --git a/app/pages/layout.tsx b/app/pages/layout.tsx
@@ -12,11 +12,8 @@ type Props = {
   children: ReactNode;
 };
 
-function CalendarLayout({ children }: Props) {
+function PagesLayout({ children }: Props) {
   const theme = useMantineTheme();
-  const [opened, setOpened] = useState(false);
-  const [themeOpened, { open: themeOpen, close: themeClose }] =
-    useDisclosure(false);
   const tablet_match = useMediaQuery('(max-width: 768px)');
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
@@ -42,8 +39,6 @@ function CalendarLayout({ children }: Props) {
       >
         <Container fluid py="sm" px="lg">
           <HeaderNav
-            opened={opened}
-            handleOpen={() => setOpened((o) => !o)}
             desktopOpened={desktopOpened}
             mobileOpened={mobileOpened}
             toggleDesktop={toggleDesktop}
@@ -52,7 +47,7 @@ function CalendarLayout({ children }: Props) {
         </Container>
       </AppShell.Header>
       <AppShell.Navbar>
-        <Navigation onClose={() => setOpened(false)} />
+        <Navigation onClose={toggleMobile} />
       </AppShell.Navbar>
       <AppShell.Main>
         <AppMain>{children}</AppMain>
@@ -66,4 +61,4 @@ function CalendarLayout({ children }: Props) {
   );
 }
 
-export default CalendarLayout;
+export default PagesLayout;
diff --git a/components/HeaderNav/HeaderNav.tsx b/components/HeaderNav/HeaderNav.tsx
@@ -129,23 +129,14 @@ const NOTIFICATIONS = [
 ];
 
 type HeaderNavProps = {
-  opened?: boolean;
-  handleOpen?: () => void;
   mobileOpened?: boolean;
   toggleMobile?: () => void;
   desktopOpened?: boolean;
   toggleDesktop?: () => void;
 };
 
 const HeaderNav = (props: HeaderNavProps) => {
-  const {
-    handleOpen,
-    opened,
-    desktopOpened,
-    toggleDesktop,
-    toggleMobile,
-    mobileOpened,
-  } = props;
+  const { desktopOpened, toggleDesktop, toggleMobile, mobileOpened } = props;
   const theme = useMantineTheme();
   const { setColorScheme, colorScheme } = useMantineColorScheme();
   const laptop_match = useMediaQuery('(max-width: 992px)');

diff --git a/components/Navigation/Links/Links.tsx b/components/Navigation/Links/Links.tsx
@@ -1,8 +1,7 @@
-import {useEffect, useState} from 'react';
-import {Box, Collapse, Group, Text, UnstyledButton,} from '@mantine/core';
-import {IconChevronRight} from '@tabler/icons-react';
-import Link from 'next/link';
-import {usePathname, useRouter} from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { Box, Collapse, Group, Text, UnstyledButton } from '@mantine/core';
+import { IconChevronRight } from '@tabler/icons-react';
+import { usePathname, useRouter } from 'next/navigation';
 import * as _ from 'lodash';
 import classes from './Links.module.css';
 
@@ -15,6 +14,7 @@ interface LinksGroupProps {
     label: string;
     link: string;
   }[];
+  closeSidebar: () => void;
 }
 
 export function LinksGroup(props: LinksGroupProps) {
@@ -24,6 +24,7 @@ export function LinksGroup(props: LinksGroupProps) {
     initiallyOpened,
     link,
     links,
+    closeSidebar,
   } = props;
   const router = useRouter();
   const pathname = usePathname();
@@ -34,9 +35,12 @@ export function LinksGroup(props: LinksGroupProps) {
 
   const items = (hasLinks ? links : []).map((link) => (
     <Text
-      component={Link}
+      component="button"
       className={classes.link}
-      href={link.link}
+      onClick={() => {
+        router.push(link.link);
+        closeSidebar();
+      }}
       key={link.label}
       data-active={link.link.toLowerCase() === pathname || undefined}
     >
@@ -56,13 +60,14 @@ export function LinksGroup(props: LinksGroupProps) {
         onClick={() => {
           setOpened((o) => !o);
           link && router.push(link || '#');
+          closeSidebar();
         }}
         className={classes.control}
         data-active={opened || undefined}
       >
         <Group justify="space-between" gap={0}>
-          <Box style={{display: 'flex', alignItems: 'center'}}>
-            <Icon size={18}/>
+          <Box style={{ display: 'flex', alignItems: 'center' }}>
+            <Icon size={18} />
             <Box ml="md">{label}</Box>
           </Box>
           {hasLinks && (

diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx
@@ -1,12 +1,4 @@
-import {
-  ActionIcon,
-  Box,
-  Flex,
-  Group,
-  ScrollArea,
-  Text,
-  useMantineTheme,
-} from '@mantine/core';
+import { ActionIcon, Box, Flex, Group, ScrollArea, Text } from '@mantine/core';
 import {
   IconBook2,
   IconBrandAuth0,
@@ -125,8 +117,7 @@ type NavigationProps = {
   onClose: () => void;
 };
 
-const Navigation = ({ onClose, ...others }: NavigationProps) => {
-  const theme = useMantineTheme();
+const Navigation = ({ onClose }: NavigationProps) => {
   const tablet_match = useMediaQuery('(max-width: 768px)');
 
   const links = mockdata.map((m) => (
@@ -142,7 +133,15 @@ const Navigation = ({ onClose, ...others }: NavigationProps) => {
         {m.title}
       </Text>
       {m.links.map((item) => (
-        <LinksGroup {...item} key={item.label} />
+        <LinksGroup
+          key={item.label}
+          {...item}
+          closeSidebar={() => {
+            setTimeout(() => {
+              onClose();
+            }, 250);
+          }}
+        />
       ))}
     </Box>
   ));