From 5bddb971eee0fe598fd10d8ecc2a4eeab6fea2ef Mon Sep 17 00:00:00 2001
From: CK-7vn <keighan.robichaudgriffin@maine.edu>
Date: Wed, 15 Jan 2025 12:22:07 -0500
Subject: [PATCH] fix: fix navbar issues when screen is smaller

---
 frontend/src/Components/Navbar.tsx | 317 +++++++++++++----------------
 frontend/src/css/app.css           |   8 +
 2 files changed, 151 insertions(+), 174 deletions(-)

diff --git a/frontend/src/Components/Navbar.tsx b/frontend/src/Components/Navbar.tsx
index 4cabd200..232a14b5 100644
--- a/frontend/src/Components/Navbar.tsx
+++ b/frontend/src/Components/Navbar.tsx
@@ -48,14 +48,17 @@ export default function Navbar({
     if (!user) {
         return null;
     }
+
     const { toaster } = useToast();
     const confirmSeedModal = useRef<HTMLDialogElement | null>(null);
     const [seedInProgress, setSeedInProgress] = useState<boolean>(false);
+
     const dashboardTitleStudent = new Map([
         ['/trending-content', 'Trending Content'],
         ['/learning-path', 'Learning Path'],
         ['/program-tracker', 'Program Tracker']
     ]);
+
     const handleSeedDemoData = async () => {
         setSeedInProgress(true);
         const resp = await API.post<null, object>(`auth/demo-seed`, {});
@@ -82,9 +85,9 @@ export default function Navbar({
                         data-tip="Close sidebar"
                     >
                         <ChevronDoubleLeftIcon
-                            className="w-4 opacity-0 group-hover:opacity-100 transition-opacity duration=300 cursor-pointer"
+                            className="w-4 cursor-pointer"
                             onClick={onTogglePin}
-                        ></ChevronDoubleLeftIcon>
+                        />
                     </div>
                 ) : (
                     <div
@@ -92,9 +95,9 @@ export default function Navbar({
                         data-tip="Lock sidebar open"
                     >
                         <ChevronDoubleRightIcon
-                            className="w-4 opacity-0 group-hover:opacity-100 transition-opacity duration=300 cursor-pointer"
+                            className="w-4 cursor-pointer"
                             onClick={onTogglePin}
-                        ></ChevronDoubleRightIcon>
+                        />
                     </div>
                 )}
             </div>
@@ -103,202 +106,168 @@ export default function Navbar({
                 <Brand />
             </Link>
 
-            <div className="h-full">
-                <ul className="menu h-full flex flex-col justify-between">
-                    <div className="mt-16">
-                        {/* admin view */}
-                        {user && isAdministrator(user) ? (
-                            <>
-                                {hasFeature(
-                                    user,
-                                    FeatureAccess.OpenContentAccess
-                                ) && (
+            <div className="mt-8 flex-1 overflow-y-auto overflow-x-hidden no-scrollbar">
+                <ul className="menu space-y-2 px-2 ">
+                    {user && isAdministrator(user) ? (
+                        <>
+                            {hasFeature(
+                                user,
+                                FeatureAccess.OpenContentAccess
+                            ) && (
+                                <li>
+                                    <Link to="/knowledge-insights">
+                                        <ULIComponent icon={BookOpenIcon} />
+                                        Knowledge Insights
+                                    </Link>
+                                </li>
+                            )}
+                            {hasFeature(user, FeatureAccess.ProviderAccess) && (
+                                <li>
+                                    <Link to="/learning-insights">
+                                        <ULIComponent icon={LightBulbIcon} />
+                                        Learning Insights
+                                    </Link>
+                                </li>
+                            )}
+                            <li>
+                                <Link to="/operational-insights">
+                                    <ULIComponent icon={CogIcon} />
+                                    Operational Insights
+                                </Link>
+                            </li>
+                            {hasFeature(user, FeatureAccess.ProviderAccess) && (
+                                <>
                                     <li>
-                                        <Link to="/knowledge-insights">
-                                            <ULIComponent icon={BookOpenIcon} />
-                                            Knowledge Insights
+                                        <Link to="/course-catalog-admin">
+                                            <ULIComponent icon={CloudIcon} />
+                                            Course Catalog
                                         </Link>
                                     </li>
-                                )}
-                                {hasFeature(
-                                    user,
-                                    FeatureAccess.ProviderAccess
-                                ) && (
                                     <li>
-                                        <Link to="/learning-insights">
-                                            <ULIComponent
-                                                icon={LightBulbIcon}
-                                            />
-                                            Learning Insights
+                                        <Link to="/learning-platforms">
+                                            <ULIComponent icon={CloudIcon} />
+                                            Learning Platforms
                                         </Link>
                                     </li>
-                                )}
-                                {/* this acts as the dashboard in the case there are no features enabled */}
+                                </>
+                            )}
+                            {hasFeature(user, FeatureAccess.ProgramAccess) && (
                                 <li>
-                                    <Link to="/operational-insights">
-                                        <ULIComponent icon={CogIcon} />
-                                        Operational Insights
+                                    <Link to="/programs">
+                                        <ULIComponent icon={DocumentTextIcon} />
+                                        Programs
                                     </Link>
                                 </li>
-                                {hasFeature(
-                                    user,
-                                    FeatureAccess.ProviderAccess
-                                ) && (
-                                    <>
-                                        <li>
-                                            <Link to="/course-catalog-admin">
-                                                <ULIComponent
-                                                    icon={CloudIcon}
-                                                />
-                                                Course Catalog
-                                            </Link>
-                                        </li>
+                            )}
+                            {hasFeature(
+                                user,
+                                FeatureAccess.OpenContentAccess
+                            ) && (
+                                <li>
+                                    <Link to="/knowledge-center-management/libraries">
+                                        <ULIComponent icon={BookOpenIcon} />
+                                        Knowledge Center
+                                    </Link>
+                                </li>
+                            )}
+                            <li>
+                                <Link to="/students">
+                                    <ULIComponent icon={AcademicCapIcon} />
+                                    Residents
+                                </Link>
+                            </li>
+                            <li>
+                                <Link to="/admins">
+                                    <ULIComponent icon={UsersIcon} />
+                                    Admins
+                                </Link>
+                            </li>
+                            <li>
+                                <Link to="/facilities">
+                                    <ULIComponent
+                                        icon={BuildingStorefrontIcon}
+                                    />
+                                    Facilities
+                                </Link>
+                            </li>
+                        </>
+                    ) : (
+                        <>
+                            <li>
+                                <Link to={getDashboardLink(user)}>
+                                    <ULIComponent icon={HomeIcon} />
+                                    {dashboardTitleStudent.get(
+                                        getDashboardLink(user)
+                                    ) ?? 'Home'}
+                                </Link>
+                            </li>
+                            {hasFeature(user, FeatureAccess.ProviderAccess) && (
+                                <>
+                                    {getDashboardLink(user) !==
+                                        '/learning-path' && (
                                         <li>
-                                            <Link to="/learning-platforms">
-                                                <ULIComponent
-                                                    icon={CloudIcon}
-                                                />
-                                                Learning Platforms
+                                            <Link to="/learning-path">
+                                                <ULIComponent icon={HomeIcon} />
+                                                My Learning
                                             </Link>
                                         </li>
-                                    </>
-                                )}
-                                {hasFeature(
-                                    user,
-                                    FeatureAccess.ProgramAccess
-                                ) && (
-                                    <>
+                                    )}
+                                    <li>
+                                        <Link to="/my-courses">
+                                            <ULIComponent
+                                                icon={RectangleStackIcon}
+                                            />
+                                            My Courses
+                                        </Link>
+                                    </li>
+                                    <li>
+                                        <Link to="/my-progress">
+                                            <ULIComponent
+                                                icon={AcademicCapIcon}
+                                            />
+                                            My Progress
+                                        </Link>
+                                    </li>
+                                </>
+                            )}
+                            {hasFeature(
+                                user,
+                                FeatureAccess.OpenContentAccess
+                            ) && (
+                                <>
+                                    {user.feature_access.length > 1 && (
                                         <li>
-                                            <Link to="/programs">
+                                            <Link to="/trending-content">
                                                 <ULIComponent
-                                                    icon={DocumentTextIcon}
+                                                    icon={BookOpenIcon}
                                                 />
-                                                Programs
+                                                Trending Content
                                             </Link>
                                         </li>
-                                    </>
-                                )}
-                                {hasFeature(
-                                    user,
-                                    FeatureAccess.OpenContentAccess
-                                ) && (
+                                    )}
                                     <li>
-                                        <Link to="/knowledge-center-management/libraries">
+                                        <Link to="/knowledge-center/libraries">
                                             <ULIComponent icon={BookOpenIcon} />
                                             Knowledge Center
                                         </Link>
                                     </li>
-                                )}
-                                <li>
-                                    <Link to="/residents">
-                                        <ULIComponent icon={AcademicCapIcon} />
-                                        Residents
-                                    </Link>
-                                </li>
+                                </>
+                            )}
+                            {hasFeature(user, FeatureAccess.ProgramAccess) && (
                                 <li>
-                                    <Link to="/admins">
-                                        <ULIComponent icon={UsersIcon} />
-                                        Admins
+                                    <Link to="/programs">
+                                        <ULIComponent icon={DocumentTextIcon} />
+                                        Programs
                                     </Link>
                                 </li>
+                            )}
+                        </>
+                    )}
+                </ul>
+            </div>
 
-                                <li>
-                                    <Link to="/facilities">
-                                        <ULIComponent
-                                            icon={BuildingStorefrontIcon}
-                                        />
-                                        Facilities
-                                    </Link>
-                                </li>
-                            </>
-                        ) : (
-                            <>
-                                {/* student view */}
-                                <li className="mt-16">
-                                    <Link to={getDashboardLink(user)}>
-                                        <ULIComponent icon={HomeIcon} />
-                                        {dashboardTitleStudent.get(
-                                            getDashboardLink(user)
-                                        ) ?? 'Home'}
-                                    </Link>
-                                </li>
-                                {hasFeature(
-                                    user,
-                                    FeatureAccess.ProviderAccess
-                                ) && (
-                                    <>
-                                        {getDashboardLink(user) !==
-                                            '/learning-path' && (
-                                            <li>
-                                                <Link to="/learning-path">
-                                                    <ULIComponent
-                                                        icon={HomeIcon}
-                                                    />
-                                                    My Learning
-                                                </Link>
-                                            </li>
-                                        )}
-                                        <li>
-                                            <Link to="/my-courses">
-                                                <ULIComponent
-                                                    icon={RectangleStackIcon}
-                                                />{' '}
-                                                My Courses
-                                            </Link>
-                                        </li>
-                                        <li>
-                                            <Link to="/my-progress">
-                                                <ULIComponent
-                                                    icon={AcademicCapIcon}
-                                                />{' '}
-                                                My Progress
-                                            </Link>
-                                        </li>
-                                    </>
-                                )}
-                                {hasFeature(
-                                    user,
-                                    FeatureAccess.OpenContentAccess
-                                ) && (
-                                    <>
-                                        {user.feature_access.length > 1 && (
-                                            <li>
-                                                <Link to="/trending-content">
-                                                    <ULIComponent
-                                                        icon={BookOpenIcon}
-                                                    />
-                                                    Trending Content
-                                                </Link>
-                                            </li>
-                                        )}
-                                        <li>
-                                            <Link to="/knowledge-center/libraries">
-                                                <ULIComponent
-                                                    icon={BookOpenIcon}
-                                                />
-                                                Knowledge Center
-                                            </Link>
-                                        </li>
-                                    </>
-                                )}
-                                {hasFeature(
-                                    user,
-                                    FeatureAccess.ProgramAccess
-                                ) && (
-                                    <>
-                                        <li>
-                                            <Link to="/programs">
-                                                <ULIComponent
-                                                    icon={DocumentTextIcon}
-                                                />
-                                                Programs
-                                            </Link>
-                                        </li>
-                                    </>
-                                )}
-                            </>
-                        )}
-                    </div>
+            <div className="mt-auto">
+                <ul className="menu p-2">
                     <li className="dropdown dropdown-right dropdown-end w-full">
                         <div tabIndex={0} role="button">
                             <ULIComponent
diff --git a/frontend/src/css/app.css b/frontend/src/css/app.css
index 580833b5..4bcec9ad 100644
--- a/frontend/src/css/app.css
+++ b/frontend/src/css/app.css
@@ -160,3 +160,11 @@
     position: relative;
     z-index: 10;
 }
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+.no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}