From bac71c7f02738a360543652382228f18d1d3ce79 Mon Sep 17 00:00:00 2001
From: Eric Wang <37554696+ericwang401@users.noreply.github.com>
Date: Sun, 12 Nov 2023 01:42:08 +0000
Subject: [PATCH] close mobile navigation menu on navigate

---
 .../elements/navigation/NavigationBar.tsx        | 10 ++++++++--
 .../elements/navigation/NavigationDropdown.tsx   | 16 ++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/resources/scripts/components/elements/navigation/NavigationBar.tsx b/resources/scripts/components/elements/navigation/NavigationBar.tsx
index cdfe734a9e6..0552bb0c132 100644
--- 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
index 66b2b262b77..ad489e1b49c 100644
--- a/resources/scripts/components/elements/navigation/NavigationDropdown.tsx
+++ b/resources/scripts/components/elements/navigation/NavigationDropdown.tsx
@@ -1,3 +1,4 @@
+import { useStoreState } from '@/state'
 import { ReactNode, useEffect } from 'react'
 import { Link, useMatch, useNavigate } from 'react-router-dom'
 
@@ -5,13 +6,15 @@ 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}