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;

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;

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;

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;

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;

src/app/dashboard/layout.tsx → 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>
     </>
   );
 }

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;

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;

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;

src/app/dashboard/page.tsx

@@ -1,5 +0,0 @@
-const Dashboard: React.FC = async () => {
-  return "Dashboard (protected)";
-};
-
-export default Dashboard;

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;

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>
   );
 };
 

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>

src/config/uiConfig.ts

@@ -0,0 +1 @@
+export const NAVIGATION_CONTENT_WIDTH = "20rem";

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",
-        }
       },
     },
   },