diff --git a/.changeset/silent-pants-tickle.md b/.changeset/silent-pants-tickle.md
new file mode 100644
index 0000000..39370f9
--- /dev/null
+++ 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/sour-nails-kneel.md b/.changeset/sour-nails-kneel.md
new file mode 100644
index 0000000..efda7bc
--- /dev/null
+++ b/.changeset/sour-nails-kneel.md
@@ -0,0 +1,5 @@
+---
+"mantine-analytics-dashboard": patch
+---
+
+fix(ui): navbar not closing on mobile devices
diff --git a/.changeset/tricky-pillows-destroy.md b/.changeset/tricky-pillows-destroy.md
new file mode 100644
index 0000000..4a4e9af
--- /dev/null
+++ 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
index 22dc793..dd888ba 100644
--- 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) {
>
setOpened((o) => !o)}
desktopOpened={desktopOpened}
mobileOpened={mobileOpened}
toggleDesktop={toggleDesktop}
@@ -52,7 +47,7 @@ function CalendarLayout({ children }: Props) {
- setOpened(false)} />
+
{children}
@@ -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
index c7a8391..1597f9e 100644
--- 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) {
>
setOpened((o) => !o)}
desktopOpened={desktopOpened}
mobileOpened={mobileOpened}
toggleDesktop={toggleDesktop}
@@ -53,7 +48,7 @@ export default function Auth0Layout({ children }: Auth0LayoutProps) {
- setOpened(false)} />
+
@@ -68,3 +63,5 @@ export default function Auth0Layout({ children }: Auth0LayoutProps) {
);
}
+
+export default Auth0Layout;
diff --git a/app/authentication/clerk/layout.tsx b/app/authentication/clerk/layout.tsx
index 2a62fbb..2314ad2 100644
--- a/app/authentication/clerk/layout.tsx
+++ b/app/authentication/clerk/layout.tsx
@@ -7,6 +7,7 @@ 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;
@@ -14,9 +15,6 @@ type Props = {
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) {
>
setOpened((o) => !o)}
desktopOpened={desktopOpened}
mobileOpened={mobileOpened}
toggleDesktop={toggleDesktop}
@@ -52,10 +48,12 @@ function ClerkLayout({ children }: Props) {
- setOpened(false)} />
+
- {children}
+
+ {children}
+
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
index 22dc793..1a120ef 100644
--- 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) {
>
setOpened((o) => !o)}
desktopOpened={desktopOpened}
mobileOpened={mobileOpened}
toggleDesktop={toggleDesktop}
@@ -52,7 +47,7 @@ function CalendarLayout({ children }: Props) {
- setOpened(false)} />
+
{children}
@@ -66,4 +61,4 @@ function CalendarLayout({ children }: Props) {
);
}
-export default CalendarLayout;
+export default DashboardLayout;
diff --git a/app/page.tsx b/app/page.tsx
index c00ff41..ae2f134 100644
--- 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() {
}
>
diff --git a/app/pages/layout.tsx b/app/pages/layout.tsx
index 22dc793..12e80ad 100644
--- 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) {
>
setOpened((o) => !o)}
desktopOpened={desktopOpened}
mobileOpened={mobileOpened}
toggleDesktop={toggleDesktop}
@@ -52,7 +47,7 @@ function CalendarLayout({ children }: Props) {
- setOpened(false)} />
+
{children}
@@ -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
index b82c3fc..d299b88 100644
--- a/components/HeaderNav/HeaderNav.tsx
+++ b/components/HeaderNav/HeaderNav.tsx
@@ -129,8 +129,6 @@ const NOTIFICATIONS = [
];
type HeaderNavProps = {
- opened?: boolean;
- handleOpen?: () => void;
mobileOpened?: boolean;
toggleMobile?: () => void;
desktopOpened?: boolean;
@@ -138,14 +136,7 @@ type HeaderNavProps = {
};
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
index 57ee7dc..d4e2600 100644
--- 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) => (
{
+ 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}
>
-
-
+
+
{label}
{hasLinks && (
diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx
index d13b617..086d094 100644
--- 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}
{m.links.map((item) => (
-
+ {
+ setTimeout(() => {
+ onClose();
+ }, 250);
+ }}
+ />
))}
));