From 74a7345b62109e8321acc684df16dcfc09fa5767 Mon Sep 17 00:00:00 2001
From: Wayne <wayne.lee@2fi-solutions.com.hk>
Date: Tue, 9 Jan 2024 22:24:01 +0900
Subject: [PATCH] Small fix to navigation and add main pages

---
 src/app/(main)/analytics/page.tsx             | 11 +++++++++++
 src/app/(main)/claim/page.tsx                 | 11 +++++++++++
 src/app/(main)/dashboard/page.tsx             | 11 +++++++++++
 src/app/(main)/home/page.tsx                  | 11 +++++++++++
 src/app/(main)/invoice/page.tsx               | 11 +++++++++++
 src/app/{dashboard => (main)}/layout.tsx      | 19 +++++++++++--------
 src/app/(main)/projects/page.tsx              | 11 +++++++++++
 src/app/(main)/settings/page.tsx              | 11 +++++++++++
 src/app/(main)/tasks/page.tsx                 | 11 +++++++++++
 src/app/dashboard/page.tsx                    |  5 -----
 src/app/page.tsx                              |  2 +-
 src/components/AppBar/AppBar.tsx              | 12 ++++++------
 .../NavigationContent/NavigationContent.tsx   | 19 ++++++++++++-------
 src/config/uiConfig.ts                        |  1 +
 src/theme/devias-material-kit/components.ts   |  4 ----
 15 files changed, 119 insertions(+), 31 deletions(-)
 create mode 100644 src/app/(main)/analytics/page.tsx
 create mode 100644 src/app/(main)/claim/page.tsx
 create mode 100644 src/app/(main)/dashboard/page.tsx
 create mode 100644 src/app/(main)/home/page.tsx
 create mode 100644 src/app/(main)/invoice/page.tsx
 rename src/app/{dashboard => (main)}/layout.tsx (61%)
 create mode 100644 src/app/(main)/projects/page.tsx
 create mode 100644 src/app/(main)/settings/page.tsx
 create mode 100644 src/app/(main)/tasks/page.tsx
 delete mode 100644 src/app/dashboard/page.tsx
 create mode 100644 src/config/uiConfig.ts

diff --git a/src/app/(main)/analytics/page.tsx b/src/app/(main)/analytics/page.tsx
new file mode 100644
index 0000000..9ca9a24
--- /dev/null
+++ b/src/app/(main)/analytics/page.tsx
@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Analytics",
+};
+
+const Analytics: React.FC = async () => {
+  return "Analytics";
+};
+
+export default Analytics;
diff --git a/src/app/(main)/claim/page.tsx b/src/app/(main)/claim/page.tsx
new file mode 100644
index 0000000..9388d1a
--- /dev/null
+++ b/src/app/(main)/claim/page.tsx
@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Claim",
+};
+
+const Claim: React.FC = async () => {
+  return "Claim";
+};
+
+export default Claim;
diff --git a/src/app/(main)/dashboard/page.tsx b/src/app/(main)/dashboard/page.tsx
new file mode 100644
index 0000000..d635879
--- /dev/null
+++ b/src/app/(main)/dashboard/page.tsx
@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Dashboard",
+};
+
+const Dashboard: React.FC = async () => {
+  return "Dashboard";
+};
+
+export default Dashboard;
diff --git a/src/app/(main)/home/page.tsx b/src/app/(main)/home/page.tsx
new file mode 100644
index 0000000..1901092
--- /dev/null
+++ b/src/app/(main)/home/page.tsx
@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Home",
+};
+
+const Home: React.FC = async () => {
+  return "Home";
+};
+
+export default Home;
diff --git a/src/app/(main)/invoice/page.tsx b/src/app/(main)/invoice/page.tsx
new file mode 100644
index 0000000..ae9fc37
--- /dev/null
+++ b/src/app/(main)/invoice/page.tsx
@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Invoice",
+};
+
+const Invoice: React.FC = async () => {
+  return "Invoice";
+};
+
+export default Invoice;
diff --git a/src/app/dashboard/layout.tsx b/src/app/(main)/layout.tsx
similarity index 61%
rename from src/app/dashboard/layout.tsx
rename to src/app/(main)/layout.tsx
index fb9a7bd..e2db7b1 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -1,20 +1,16 @@
-import type { Metadata } from "next";
 import AppBar from "@/components/AppBar";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/config/authConfig";
 import { redirect } from "next/navigation";
+import Box from "@mui/material/Box";
+import { NAVIGATION_CONTENT_WIDTH } from "@/config/uiConfig";
 
-export const metadata: Metadata = {
-  title: "Dashboard",
-};
-
-export default async function DashboardLayout({
+export default async function MainLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   const session = await getServerSession(authOptions);
-  console.log(session);
 
   if (!session?.user) {
     redirect("/login");
@@ -26,7 +22,14 @@ export default async function DashboardLayout({
         profileName={session.user.name!}
         avatarImageSrc={session.user.image || undefined}
       />
-      <main>{children}</main>
+      <Box
+        component="main"
+        sx={{
+          marginInlineStart: { xs: 0, lg: NAVIGATION_CONTENT_WIDTH },
+        }}
+      >
+        {children}
+      </Box>
     </>
   );
 }
diff --git a/src/app/(main)/projects/page.tsx b/src/app/(main)/projects/page.tsx
new file mode 100644
index 0000000..60918d2
--- /dev/null
+++ b/src/app/(main)/projects/page.tsx
@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Projects",
+};
+
+const Projects: React.FC = async () => {
+  return "Projects";
+};
+
+export default Projects;
diff --git a/src/app/(main)/settings/page.tsx b/src/app/(main)/settings/page.tsx
new file mode 100644
index 0000000..c3b9620
--- /dev/null
+++ b/src/app/(main)/settings/page.tsx
@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Settings",
+};
+
+const Settings: React.FC = async () => {
+  return "Settings";
+};
+
+export default Settings;
diff --git a/src/app/(main)/tasks/page.tsx b/src/app/(main)/tasks/page.tsx
new file mode 100644
index 0000000..7acf681
--- /dev/null
+++ b/src/app/(main)/tasks/page.tsx
@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Tasks",
+};
+
+const Tasks: React.FC = async () => {
+  return "Tasks";
+};
+
+export default Tasks;
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
deleted file mode 100644
index 5f24ae0..0000000
--- a/src/app/dashboard/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Dashboard: React.FC = async () => {
-  return "Dashboard (protected)";
-};
-
-export default Dashboard;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9271349..844c060 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 import { permanentRedirect } from "next/navigation";
 
 const Home: React.FC = async () => {
-  permanentRedirect("/dashboard");
+  permanentRedirect("/home");
 };
 
 export default Home;
diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx
index 66d8f28..4cac1a7 100644
--- a/src/components/AppBar/AppBar.tsx
+++ b/src/components/AppBar/AppBar.tsx
@@ -13,9 +13,9 @@ export interface AppBarProps {
 
 const AppBar: React.FC<AppBarProps> = ({ avatarImageSrc, profileName }) => {
   return (
-    <MUIAppBar position="fixed">
-      <Toolbar>
-        <I18nProvider namespaces={["common"]}>
+    <I18nProvider namespaces={["common"]}>
+      <MUIAppBar position="sticky">
+        <Toolbar>
           <NavigationToggle />
           <Box
             sx={{ flexGrow: 1, display: "flex", justifyContent: "flex-end" }}
@@ -25,9 +25,9 @@ const AppBar: React.FC<AppBarProps> = ({ avatarImageSrc, profileName }) => {
               profileName={profileName}
             />
           </Box>
-        </I18nProvider>
-      </Toolbar>
-    </MUIAppBar>
+        </Toolbar>
+      </MUIAppBar>
+    </I18nProvider>
   );
 };
 
diff --git a/src/components/NavigationContent/NavigationContent.tsx b/src/components/NavigationContent/NavigationContent.tsx
index cb88a18..9586b57 100644
--- a/src/components/NavigationContent/NavigationContent.tsx
+++ b/src/components/NavigationContent/NavigationContent.tsx
@@ -17,6 +17,7 @@ import { useTranslation } from "react-i18next";
 import Typography from "@mui/material/Typography";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
+import { NAVIGATION_CONTENT_WIDTH } from "@/config/uiConfig";
 
 interface NavigationItem {
   icon: React.ReactNode;
@@ -25,7 +26,7 @@ interface NavigationItem {
 }
 
 const navigationItems: NavigationItem[] = [
-  { icon: <WorkHistory />, label: "User Workspace", path: "/workspace" },
+  { icon: <WorkHistory />, label: "User Workspace", path: "/home" },
   { icon: <Dashboard />, label: "Dashboard", path: "/dashboard" },
   { icon: <RequestQuote />, label: "Expense Claim", path: "/claim" },
   { icon: <Assignment />, label: "Project Management", path: "/projects" },
@@ -40,7 +41,7 @@ const NavigationContent: React.FC = () => {
   const pathname = usePathname();
 
   return (
-    <Box>
+    <Box sx={{ width: NAVIGATION_CONTENT_WIDTH }}>
       <Box sx={{ p: "1.5rem" }}>
         {/* Replace this with company logo and/or name */}
         <Typography variant="h4">TSMS</Typography>
@@ -49,13 +50,17 @@ const NavigationContent: React.FC = () => {
       <List component="nav">
         {navigationItems.map(({ icon, label, path }, index) => {
           return (
-            <ListItemButton
+            <Box
               key={`${label}-${index}`}
-              selected={pathname.includes(path)}
+              component={Link}
+              href={path}
+              sx={{ textDecoration: "none", color: "inherit" }}
             >
-              <ListItemIcon>{icon}</ListItemIcon>
-              <ListItemText primary={<Link href={path}>{t(label)}</Link>} />
-            </ListItemButton>
+              <ListItemButton selected={pathname.includes(path)}>
+                <ListItemIcon>{icon}</ListItemIcon>
+                <ListItemText primary={t(label)} />
+              </ListItemButton>
+            </Box>
           );
         })}
       </List>
diff --git a/src/config/uiConfig.ts b/src/config/uiConfig.ts
new file mode 100644
index 0000000..f9d60b3
--- /dev/null
+++ b/src/config/uiConfig.ts
@@ -0,0 +1 @@
+export const NAVIGATION_CONTENT_WIDTH = "20rem";
diff --git a/src/theme/devias-material-kit/components.ts b/src/theme/devias-material-kit/components.ts
index a6c8f6e..fb88084 100644
--- a/src/theme/devias-material-kit/components.ts
+++ b/src/theme/devias-material-kit/components.ts
@@ -304,10 +304,6 @@ const components: ThemeOptions["components"] = {
       root: {
         borderRadius: 8,
         marginBlockEnd: "0.5rem",
-        a: {
-          textDecoration: "none",
-          color: "inherit",
-        }
       },
     },
   },