Fix: Menu item & document titles

Author: nyagami

src/components/AppBar/index.tsx

@@ -68,37 +68,34 @@ export default function AppBar() {
           </Typography>
         </Link>
       </MenuItem>
-      <MenuItem>
-        <IconButton
-          sx={{ gap: 1 }}
-          onClick={() => {
-            dispatch(switchTheme());
-          }}
-          color="inherit"
-        >
-          {theme.isDark ? <Brightness7Icon /> : <Brightness4Icon />}
-          <Typography>{theme.isDark ? "Dark" : "Light"}</Typography>
-        </IconButton>
+      <MenuItem
+        onClick={() => {
+          dispatch(switchTheme());
+        }}
+        sx={{ gap: 0.5 }}
+      >
+        {theme.isDark ? <Brightness7Icon /> : <Brightness4Icon />}
+        <Typography>{theme.isDark ? "Dark" : "Light"}</Typography>
       </MenuItem>
       <MenuItem>
-        <IconButton
-          sx={{ gap: 1 }}
-          href="https://github.com/LNReader/lnreader"
+        <Link
+          to="https://github.com/LNReader/lnreader"
           target="_blank"
+          style={{ gap: 4, display: "flex" }}
         >
           <GitHubIcon />
           <Typography>Github</Typography>
-        </IconButton>
+        </Link>
       </MenuItem>
       <MenuItem>
-        <IconButton
-          sx={{ gap: 1 }}
-          href="https://discord.com/invite/QdcWN4MD63"
+        <Link
+          to="https://discord.com/invite/QdcWN4MD63"
           target="_blank"
+          style={{ gap: 4, display: "flex" }}
         >
           <DiscordIcon />
           <Typography>Discord</Typography>
-        </IconButton>
+        </Link>
       </MenuItem>
     </Menu>
   );

src/components/Layout/index.tsx

@@ -2,12 +2,23 @@ import AppBar from "@components/AppBar";
 import SideBar from "@components/SideBar";
 import { useTheme } from "@hooks/useTheme";
 import { Box } from "@mui/material";
-import { ReactNode } from "react";
+import { ReactNode, useEffect } from "react";
 import { useLocation } from "react-router-dom";
+import routes from "../../../routes.json";
 
 export default function Layout({ children }: { children: ReactNode }) {
   const location = useLocation();
   const theme = useTheme();
+  useEffect(() => {
+    const route = routes.find(
+      (r) => r.path === location.pathname.replace(/^\//, "")
+    );
+    if (route) {
+      document.title = route.title;
+    } else {
+      document.title = "Home | LNReader";
+    }
+  }, [location.pathname]);
   return (
     <Box>
       <AppBar />