CellTech/lms-frontend
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Preparations for TopBar modifications

Browse Source
This commit is contained in:
Jose Daniel G. Percy 2025-04-08 11:48:56 +08:00
parent ae285ad84e
commit 4923ccf30c
1 changed files with 18 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/TopBar.ts
View File

@ -4,11 +4,13 @@ import { globalAPI, ApiResponse, ProfileResponseData } from '../api/api'; // Imp
export class TopBar { export class TopBar {
private container: HTMLElement; private container: HTMLElement;
private menuItems: Array<HTMLElement>;
private profileDropdownVisible: boolean = false; private profileDropdownVisible: boolean = false;
private profileData: ProfileResponseData | null = null; private profileData: ProfileResponseData | null = null;
constructor() { constructor() {
this.container = createElement('nav'); this.container = createElement('nav');
this.menuItems = [];
this.container.classList.add('top-bar', 'navbar', 'navbar-expand-lg', 'navbar-light', 'bg-darker', 'mb-3', 'px-4'); this.container.classList.add('top-bar', 'navbar', 'navbar-expand-lg', 'navbar-light', 'bg-darker', 'mb-3', 'px-4');
this.fetchProfileData(); this.fetchProfileData();
} }
@ -29,6 +31,19 @@ export class TopBar {
} }
} }
addMenuItem(text: string, href: string) {
const menuItem = createElement('li');
menuItem.classList.add('nav-item');
const itemLink = createElement('a');
itemLink.classList.add('nav-link');
itemLink.href = href;
itemLink.textContent = text;
menuItem.appendChild(itemLink);
this.menuItems.push(menuItem)
}
render(): HTMLElement { render(): HTMLElement {
this.container.innerHTML = ''; this.container.innerHTML = '';
@ -54,33 +69,9 @@ export class TopBar {
const menuPages = createElement('ul'); const menuPages = createElement('ul');
menuPages.classList.add('navbar-nav', 'me-auto', 'mb-2', 'mb-lg-0'); menuPages.classList.add('navbar-nav', 'me-auto', 'mb-2', 'mb-lg-0');
const dashboardMenuItem = createElement('li'); for (const item of this.menuItems) {
dashboardMenuItem.classList.add('nav-item'); menuPages.appendChild(item);
const dashboardLink = createElement('a'); }
dashboardLink.classList.add('nav-link');
dashboardLink.href = '#/dashboard';
dashboardLink.textContent = 'Dashboard';
dashboardMenuItem.appendChild(dashboardLink);
menuPages.appendChild(dashboardMenuItem);
const classroomsMenuItem = createElement('li');
classroomsMenuItem.classList.add('nav-item');
const classroomsLink = createElement('a');
classroomsLink.classList.add('nav-link');
classroomsLink.href = '#/classrooms';
classroomsLink.textContent = 'Classrooms';
classroomsMenuItem.appendChild(classroomsLink);
menuPages.appendChild(classroomsMenuItem);
const adminMenuItem = createElement('li');
adminMenuItem.classList.add('nav-item');
const adminLink = createElement('a');
adminLink.classList.add('nav-link');
adminLink.href = '#/admin';
adminLink.textContent = 'Admin';
adminMenuItem.appendChild(adminLink);
menuPages.appendChild(adminMenuItem);
const profileSection = createElement('div'); const profileSection = createElement('div');
profileSection.classList.add('d-flex', 'align-items-center', 'ms-auto'); profileSection.classList.add('d-flex', 'align-items-center', 'ms-auto');