Skip to content

Commit

Permalink
fix: fix navbar issues when screen is smaller
Browse files Browse the repository at this point in the history
  • Loading branch information
@CK-7vn
CK-7vn committed Jan 21, 2025
1 parent 684c26a commit 5bddb97
Show file tree
Hide file tree
Showing 2 changed files with 151 additions and 174 deletions.
317 changes: 143 additions & 174 deletions frontend/src/Components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`, {});
Expand All @@ -82,19 +85,19 @@ 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
className="tooltip tooltip-left"
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>
Expand All @@ -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
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,3 +160,11 @@
position: relative;
z-index: 10;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}

.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}

0 comments on commit 5bddb97

Please sign in to comment.