fix: added transition props to fix ThemeDrawer.tsx issue on production

feat: updated docs link on Navigation.tsx

Author: kelvink96

layout/App/Navigation/Navigation.tsx

@@ -17,7 +17,7 @@ import {Logo, UserProfileButton} from "@/components";
 import {
     PATH_AUTH,
     PATH_CALENDAR,
-    PATH_DASHBOARD,
+    PATH_DASHBOARD, PATH_DOCS,
     PATH_ERROR,
     PATH_INVOICES,
     PATH_ORDERS,
@@ -91,12 +91,12 @@ const mockdata = [
             {
                 label: 'Getting started',
                 icon: IconLifebuoy,
-                link: 'https://analytics-dashboard-docs.netlify.app/getting-started'
+                link: PATH_DOCS.root
             },
             {
                 label: 'Documentation',
                 icon: IconBook2,
-                link: 'https://analytics-dashboard-docs.netlify.app/'
+                link: PATH_DOCS.root
             },
             {label: 'Changelog', icon: IconList,},
         ]

layout/Guest/HeaderNav/HeaderNav.tsx

@@ -12,7 +12,7 @@ import {
     ScrollArea,
     Text
 } from '@mantine/core';
-import {useDisclosure} from '@mantine/hooks';
+import {useDisclosure, useMediaQuery} from '@mantine/hooks';
 import {IconChevronDown} from '@tabler/icons-react';
 import useStyles from "./HeaderNav.styles";
 import {PATH_DASHBOARD, PATH_DOCS} from "@/routes";
@@ -38,6 +38,7 @@ const HEADER_HEIGHT = rem(60);
 const HeaderNav = () => {
     const {classes, theme} = useStyles();
     const [drawerOpened, {toggle: toggleDrawer, close: closeDrawer}] = useDisclosure(false);
+    const tablet_match = useMediaQuery('(max-width: 768px)');
 
     const items = MOCK_DATA.map((link) => {
         return (
@@ -79,6 +80,9 @@ const HeaderNav = () => {
                 title="Menu"
                 className={classes.hiddenDesktop}
                 zIndex={1000000}
+                transitionProps={{
+                    transition: tablet_match ? 'slide-up' : 'slide-left',
+                }}
             >
                 <ScrollArea h={`calc(100vh - ${rem(60)})`} mx="-md">
                     {items}