Merge pull request UnlockedLabs#422 from corypride/412-pagenav-dropdo…

…wn-updates PageNav dropdown updates UnlockedLabs#412
chrissantillan · Oct 10, 2024 · e9ee79c · e9ee79c
2 parents 154e38d + a7bcf05
commit e9ee79c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 77 deletions.
diff --git a/frontend/src/Components/PageNav.tsx b/frontend/src/Components/PageNav.tsx
@@ -1,16 +1,15 @@
-import { UserRole } from '../common';
 import { useEffect, useRef } from 'react';
 import { handleLogout, useAuth } from '@/useAuth';
 import {
-    AcademicCapIcon,
-    ArchiveBoxIcon,
     ArrowRightEndOnRectangleIcon,
     Bars3Icon,
-    HomeIcon,
-    RectangleStackIcon,
-    UsersIcon
+    HomeIcon
 } from '@heroicons/react/24/solid';
+
+import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
+
 import ThemeToggle from './ThemeToggle';
+import ULIComponent from '@/Components/ULIComponent.tsx';
 
 export default function PageNav({
     path,
@@ -46,18 +45,27 @@ export default function PageNav({
                 <ul>
                     {showOpenMenu ? (
                         <li>
-                            <Bars3Icon
-                                onClick={onShowNav}
-                                className="w-4 cursor-pointer"
+                            <ULIComponent
+                                onClick={() => {
+                                    onShowNav;
+                                }}
+                                icon={Bars3Icon}
+                                iconClassName={'cursor-pointer'}
                             />
                         </li>
                     ) : (
                         <li>
-                            <Bars3Icon
-                                onClick={onShowNav}
-                                className="w-4 lg:hidden cursor-pointer"
+                            <ULIComponent
+                                onClick={() => {
+                                    onShowNav;
+                                }}
+                                icon={Bars3Icon}
+                                iconClassName={'lg:hidden cursor-pointer'}
+                            />
+                            <ULIComponent
+                                icon={HomeIcon}
+                                iconClassName={'hidden lg:block'}
                             />
-                            <HomeIcon className="w-4 hidden lg:block" />
                         </li>
                     )}
 
@@ -67,79 +75,29 @@ export default function PageNav({
             <div className="navbar-end">
                 <ul className="menu menu-horizontal px-1">
                     <li>
-                        <details ref={detailsRef}>
+                        <details
+                            className="dropdown dropdown-end"
+                            ref={detailsRef}
+                        >
                             <summary>
                                 <span className="font-semibold">
                                     {user.name_first} {user.name_last}
                                 </span>
                             </summary>
-                            <ul className="bg-base-300 z-[1]">
+                            <ul className="dropdown-content bg-grey-2 z-[1]">
                                 <li>
                                     <label className="flex cursor-pointer gap-2">
-                                        <svg
-                                            xmlns="http://www.w3.org/2000/svg"
-                                            width="20"
-                                            height="20"
-                                            viewBox="0 0 24 24"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            strokeWidth="2"
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                        >
-                                            <circle cx="12" cy="12" r="5" />
-                                            <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
-                                        </svg>
+                                        <ULIComponent
+                                            icon={SunIcon}
+                                            iconClassName={'w-6 h-6'}
+                                        />
                                         <ThemeToggle />
-                                        <svg
-                                            xmlns="http://www.w3.org/2000/svg"
-                                            width="20"
-                                            height="20"
-                                            viewBox="0 0 24 24"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            strokeWidth="2"
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                        >
-                                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-                                        </svg>
+                                        <ULIComponent
+                                            icon={MoonIcon}
+                                            iconClassName={'w-6 h-6'}
+                                        />
                                     </label>
                                 </li>
-
-                                {user.role == UserRole.Student ? (
-                                    <li>
-                                        {/* Student specific options go here */}
-                                    </li>
-                                ) : (
-                                    <>
-                                        <li>
-                                            <a href="/student-management">
-                                                <AcademicCapIcon className="h-4" />
-                                                Students
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a href="/admin-management">
-                                                <UsersIcon className="h-4" />
-                                                Admins
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a href="/resources-management">
-                                                <ArchiveBoxIcon className="h-4" />
-                                                Resources
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a href="/provider-platform-management">
-                                                <RectangleStackIcon className="h-4" />
-                                                Platforms
-                                            </a>
-                                        </li>
-                                    </>
-                                )}
-
                                 <div className="divider mt-0 mb-0"></div>
 
                                 <li>

diff --git a/frontend/src/Components/ULIComponent.tsx b/frontend/src/Components/ULIComponent.tsx
@@ -15,7 +15,7 @@ type ULIComponentProps = {
 };
 
 export default function ULIComponent(props: ULIComponentProps) {
-    // Case 1: a icon with tooltipClassName 'w-4 h-4 self-start cursor-pointer'
+    // Case 1: an icon with tooltipClassName 'w-4 h-4 self-start cursor-pointer'
     // Case 2: an icon that needs the default width overridden with a prop value: this will be applied to the className as well
     // Case 3: an icon without 'self-start cursor-pointer'