From 18d1d826592c7423ec18cd2f9b887dcd1dd7f3fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com> Date: Mon, 6 Feb 2023 21:41:35 +0100 Subject: [PATCH] Fix Sidenav --- app/dashboard/layout.tsx | 14 ++- public/logo.webp | Bin 0 -> 3564 bytes ui/dashboard/Sidenav.tsx | 183 ++++++++++++++++++++------------------- ui/dashboard/Wrapper.tsx | 43 --------- 4 files changed, 107 insertions(+), 133 deletions(-) create mode 100644 public/logo.webp delete mode 100644 ui/dashboard/Wrapper.tsx diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx index 2ca9fb1..cc82104 100644 --- a/app/dashboard/layout.tsx +++ b/app/dashboard/layout.tsx @@ -1,6 +1,16 @@ -import Wrapper from '@/ui/dashboard/Wrapper'; import { type ReactNode } from 'react'; +import Sidenav from '@/ui/dashboard/Sidenav'; + export default function Layout({ children }: { children: ReactNode }) { - return {children}; + return ( +
+
+ +
+ {children} +
+
+
+ ); } diff --git a/public/logo.webp b/public/logo.webp new file mode 100644 index 0000000000000000000000000000000000000000..bb1492266ba335c46993385e79db7f09ee0b081e GIT binary patch literal 3564 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 void; - width: number; - isOpen: boolean; -}) { +export default function Sidenav() { + const [isOpen, setIsOpen] = useState(false); + + function toggleSidenav() { + setIsOpen(!isOpen); + } + return ( - (width >= 640 && ( - - )) || ( - + ); +} + +function NavItem({ item, isOpen }: { item: NavItem; isOpen: boolean }) { + const segment = useSelectedLayoutSegment(); + const isActive = segment?.split('/').pop() === item.slug || (item.slug === '' && !segment); + return ( + +
+ + + {item.name} + +
+ + ); +} + +{ + /* - ) - ); -} - -function NavItem({ item, isOpen }: { item: NavItem; isOpen: boolean }) { - const segment = useSelectedLayoutSegment(); - const isActive = segment?.split('/').pop() === item.slug || (item.slug === '' && !segment); - return ( - -
- - {item.name} -
- - ); + */ } diff --git a/ui/dashboard/Wrapper.tsx b/ui/dashboard/Wrapper.tsx deleted file mode 100644 index 6663716..0000000 --- a/ui/dashboard/Wrapper.tsx +++ /dev/null @@ -1,43 +0,0 @@ -'use client'; - -import { cn } from '@/lib/utils'; -import { useCallback, useEffect, useState, type ReactNode } from 'react'; -import Sidenav from './Sidenav'; - -export default function Wrapper({ children }: { children: ReactNode }) { - const [isOpen, setIsOpen] = useState(false); - const [width, setWidth] = useState(0); - - function toggleSidenav() { - setIsOpen(!isOpen); - } - - function useWidth() { - const handleResize = useCallback(() => setWidth(window.innerWidth), []); - useEffect(() => { - handleResize(); - window.addEventListener('resize', handleResize); - return () => window.removeEventListener('resize', handleResize); - }, [handleResize]); - return width; - } - - return ( -
- -
- {children} -
-
- ); -}