close mobile navigation menu on navigate

ConvoyPanel · Nov 12, 2023 · bac71c7 · bac71c7
1 parent 44805fd
commit bac71c7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/resources/scripts/components/elements/navigation/NavigationBar.tsx b/resources/scripts/components/elements/navigation/NavigationBar.tsx
@@ -141,11 +141,17 @@ const NavigationBar = () => {
                     <Burger
                         className='block sm:hidden'
                         opened={menuVisible}
-                        onClick={() => setMenuVisible(!menuVisible)}
+                        onClick={() =>
+                            setMenuVisible(visibility => !visibility)
+                        }
                     />
                 </div>
             </ContentContainer>
-            <NavigationDropdown logout={logout} visible={menuVisible} />
+            <NavigationDropdown
+                onClose={() => setMenuVisible(false)}
+                logout={logout}
+                visible={menuVisible}
+            />
             <div
                 ref={bottomBar}
                 className='bg-white shadow-none transition-shadow dark:bg-black w-full border-b border-accent-200 z-[2000]'

diff --git a/resources/scripts/components/elements/navigation/NavigationDropdown.tsx b/resources/scripts/components/elements/navigation/NavigationDropdown.tsx
@@ -1,17 +1,20 @@
+import { useStoreState } from '@/state'
 import { ReactNode, useEffect } from 'react'
 import { Link, useMatch, useNavigate } from 'react-router-dom'
 
 import ContentContainer from '@/components/elements/ContentContainer'
 
 interface LinkProps {
     children: ReactNode
+    onClick: () => void
     to: string
 }
-const NavLink = ({ children, to }: LinkProps) => {
+const NavLink = ({ children, onClick, to }: LinkProps) => {
     return (
         <Link
             className='flex items-center h-12 border-b border-accent-200 bg-transparent active:bg-accent-100 transition-colors'
             to={to}
+            onClick={onClick}
         >
             <span>{children}</span>
         </Link>
@@ -20,11 +23,12 @@ const NavLink = ({ children, to }: LinkProps) => {
 
 interface Props {
     logout: () => void
+    onClose: () => void
     visible?: boolean
 }
 
-const NavigationDropdown = ({ logout, visible }: Props) => {
-    const navigate = useNavigate()
+const NavigationDropdown = ({ logout, onClose, visible }: Props) => {
+    const user = useStoreState(state => state.user.data)
     const isAdminArea = useMatch('/admin/*')
 
     useEffect(() => {
@@ -45,7 +49,11 @@ const NavigationDropdown = ({ logout, visible }: Props) => {
                 >
                     <ContentContainer>
                         <div className='flex flex-col w-full'>
-                            <NavLink to='/admin'>Admin Center</NavLink>
+                            {user?.rootAdmin ? (
+                                <NavLink to='/admin' onClick={onClose}>
+                                    Admin Center
+                                </NavLink>
+                            ) : null}
                             <button
                                 className='flex items-center h-12 border-b border-accent-200 bg-transparent active:bg-accent-100 transition-colors'
                                 onClick={logout}