Dynamic page title

Zynthasius39 · Jan 10, 2025 · 71dbcad · 71dbcad
1 parent 1dbf721
commit 71dbcad
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 43 deletions.
diff --git a/src/Components.tsx b/src/Components.tsx
@@ -1,4 +1,16 @@
-import { Button, styled, Switch, SwitchProps } from "@mui/material";
+import { Button, styled, Switch } from "@mui/material";
+import {
+  AnnouncementTwoTone,
+  ArticleTwoTone,
+  CalendarMonthTwoTone,
+  DashboardTwoTone,
+  DoorSlidingTwoTone,
+  FolderTwoTone,
+  GradeTwoTone,
+  GradingTwoTone,
+  SettingsTwoTone,
+  SummarizeTwoTone,
+} from "@mui/icons-material";
 
 export const MaterialUISwitch = styled(Switch)(({ theme }) => ({
   width: 62,
@@ -125,4 +137,21 @@ export const PrimaryButton = styled(Button, {
   ":disabled": {
     backgroundColor: theme.palette.primaryButton.dark,
   }
-}));
+}));
+
+export const spMenu = [
+  { name: "Dashboard", icon: <DashboardTwoTone color="primary" />, href: "/" },
+  {
+    name: "Announces",
+    icon: <AnnouncementTwoTone color="primary" />,
+    href: "/announces",
+  },
+  { name: "Departments", icon: <FolderTwoTone color="primary" />, href: "" },
+  { name: "Course", icon: <CalendarMonthTwoTone color="primary" />, href: "" },
+  { name: "Grades", icon: <GradeTwoTone color="primary" />, href: "/grades" },
+  { name: "Transcript", icon: <SummarizeTwoTone color="primary" />, href: "" },
+  { name: "Attendance", icon: <GradingTwoTone color="primary" />, href: "" },
+  { name: "Gate", icon: <DoorSlidingTwoTone color="primary" />, href: "" },
+  { name: "Documents", icon: <ArticleTwoTone color="primary" />, href: "" },
+  { name: "Settings", icon: <SettingsTwoTone color="primary" />, href: "" },
+];
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,17 +1,19 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Box, Stack } from "@mui/material";
 import Navbar from "./Navbar";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import DrawerList from "./DrawerList";
 import { useTheme } from "../utils/Theme";
 import { useAuth } from "../utils/Auth";
 import { verify } from "../utils/Api";
+import { spMenu } from "../Components";
 
 export default function App() {
   const { authed, imageURL, name, logout, verifiedAuth } = useAuth();
   const { theme } = useTheme();
   const navigate = useNavigate();
-  const [page] = useState("Dashboard");
+  const [page, setPage] = useState("Dashboard");
+  const path = useLocation();
 
   const getComponent = async () => {
     if (!await verify()) {
@@ -22,11 +24,16 @@ export default function App() {
     }
   }
 
+  const updatePage = () => {
+    setPage(spMenu.find(m => m.href === path.pathname)?.name || "");
+  }
+
   useEffect(() => {
+      updatePage();
     if (!authed) {
       getComponent();
     }
-  }, [name, imageURL]);
+  }, [name, imageURL, path]);
 
   return (
     <Stack
@@ -45,7 +52,7 @@ export default function App() {
           <DrawerList />
         </Box>
         <Stack flex={4} bgcolor="background.default" color="text.primary">
-          <Navbar name={name} page={page} />
+          <Navbar name={name} page={page}/>
           <Box p={1} flex={8} overflow="auto">
             <Outlet />
           </Box>

diff --git a/src/components/DrawerList.tsx b/src/components/DrawerList.tsx
@@ -1,16 +1,3 @@
-import {
-  AnnouncementTwoTone,
-  ArticleTwoTone,
-  CalendarMonthTwoTone,
-  DashboardTwoTone,
-  DoorSlidingTwoTone,
-  FolderTwoTone,
-  GradeTwoTone,
-  GradingTwoTone,
-  LogoutTwoTone,
-  SettingsTwoTone,
-  SummarizeTwoTone,
-} from "@mui/icons-material";
 import {
   Stack,
   List,
@@ -20,30 +7,14 @@ import {
   Divider,
   ListItemIcon,
   Box,
-  Avatar,
 } from "@mui/material";
 import logo_dark from "../assets/beu_dark.svg";
 import { NavLink, useLocation, useNavigate } from "react-router-dom";
 import { useTheme } from "../utils/Theme";
 import { useCallback } from "react";
 import { useAuth } from "../utils/Auth";
-
-const spMenu = [
-  { name: "Dashboard", icon: <DashboardTwoTone color="primary" />, href: "/" },
-  {
-    name: "Announces",
-    icon: <AnnouncementTwoTone color="primary" />,
-    href: "/announces",
-  },
-  { name: "Departments", icon: <FolderTwoTone color="primary" />, href: "" },
-  { name: "Course", icon: <CalendarMonthTwoTone color="primary" />, href: "" },
-  { name: "Grades", icon: <GradeTwoTone color="primary" />, href: "/grades" },
-  { name: "Transcript", icon: <SummarizeTwoTone color="primary" />, href: "" },
-  { name: "Attendance", icon: <GradingTwoTone color="primary" />, href: "" },
-  { name: "Gate", icon: <DoorSlidingTwoTone color="primary" />, href: "" },
-  { name: "Documents", icon: <ArticleTwoTone color="primary" />, href: "" },
-  { name: "Settings", icon: <SettingsTwoTone color="primary" />, href: "" },
-];
+import { spMenu } from "../Components";
+import { LogoutTwoTone } from "@mui/icons-material";
 
 const DrawerList = () => {
   const { logout, setImage } = useAuth();
@@ -120,9 +91,7 @@ const DrawerList = () => {
                 }}
               >
                 <ListItemIcon>
-                  {/* <Avatar sx={{ backgroundColor: theme.palette.primary.dark }}> */}
                   {icon}
-                  {/* </Avatar> */}
                 </ListItemIcon>
                 <Typography>{name}</Typography>
               </ListItemButton>
@@ -132,9 +101,7 @@ const DrawerList = () => {
         <Link href="" color="inherit" underline="none" width={"100%"}>
           <ListItemButton key="logout" sx={{ p: "5%", pl: "10%" }} onClick={handleLogout}>
             <ListItemIcon>
-              {/* <Avatar sx={{ backgroundColor: theme.palette.primary.dark }}> */}
               <LogoutTwoTone color="primary" />
-              {/* </Avatar> */}
             </ListItemIcon>
             <Typography fontSize={14}>LogOut</Typography>
           </ListItemButton>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -87,7 +87,7 @@ const Navbar = (props: { name: string; page: string }) => {
           {props.page}
         </Typography>
         <MaterialUISwitch
-          sx={{ m: "2dvw", display: {
+          sx={{ m: 1, display: {
             xs: "none",
             sm: "inherit",
           } }}