feat: Refactor admin dashboard scrollbar to have collapsible programs

next.config.mjs

@@ -8,6 +8,7 @@ const nextConfig = {
    * To fix this, we disable the router cache for dynamic routes.
    * https://github.com/vercel/next.js/discussions/65487
    * https://nextjs.org/docs/14/app/api-reference/next-config-js/staleTimes
+   * This is the default behavior for Next.js 15.
    */
   experimental: {
     staleTimes: {

src/app/dashboard/admin/programs/diabetes-prevention/page.tsx

@@ -0,0 +1,16 @@
+import { Box, Typography } from "@mui/material";
+
+export default function DiabetesPreventionProgramPage() {
+  return (
+    <Box
+      sx={{
+        height: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Typography>Diabetes Prevention Program</Typography>
+    </Box>
+  );
+}

src/app/dashboard/admin/programs/get-preventative-screenings/page.tsx

@@ -0,0 +1,16 @@
+import { Box, Typography } from "@mui/material";
+
+export default function GetPreventativeScreeningsProgramPage() {
+  return (
+    <Box
+      sx={{
+        height: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Typography>Get Preventative Screenings Program</Typography>
+    </Box>
+  );
+}

src/app/dashboard/admin/programs/healthy-habits/page.tsx

@@ -0,0 +1,16 @@
+import { Box, Typography } from "@mui/material";
+
+export default function HealthyHabitsProgramPage() {
+  return (
+    <Box
+      sx={{
+        height: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Typography>Healthy Habits Program</Typography>
+    </Box>
+  );
+}

src/app/dashboard/admin/programs/page.tsx

@@ -10,7 +10,7 @@ export default function AdminProgramsPage() {
         alignItems: "center",
       }}
     >
-      <Typography>Admin Programs Page</Typography>
+      <Typography>Please select a program on the left sidebar.</Typography>
     </Box>
   );
 }

src/app/dashboard/admin/programs/rigs-without-cigs/page.tsx

@@ -0,0 +1,16 @@
+import { Box, Typography } from "@mui/material";
+
+export default function RigsWithoutCigsProgramPage() {
+  return (
+    <Box
+      sx={{
+        height: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Typography>Rigs Without Cigs Program</Typography>
+    </Box>
+  );
+}

src/app/dashboard/admin/programs/vaccine-voucher/page.tsx

@@ -0,0 +1,16 @@
+import { Box, Typography } from "@mui/material";
+
+export default function VaccineVoucherProgramPage() {
+  return (
+    <Box
+      sx={{
+        height: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Typography>Vaccine Voucher Program</Typography>
+    </Box>
+  );
+}

src/components/AdminDashboard/Sidebar/CollapsibleSidebarButton.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Theme,
+} from "@mui/material";
+import { ReactNode } from "react";
+
+import getButtonStyles from "@/components/AdminDashboard/Sidebar/getButtonStyles";
+
+type CollapsibleSidebarButtonProps = {
+  pathname: string;
+  theme: Theme;
+  href: string;
+  icon: ReactNode;
+  label: string;
+  onClick: () => void;
+  open?: boolean;
+};
+
+export default function CollapsibleSidebarButton({
+  pathname,
+  theme,
+  href,
+  icon,
+  label,
+  onClick,
+  open = false,
+}: CollapsibleSidebarButtonProps) {
+  const { color, backgroundColor, hoverBackgroundColor } = getButtonStyles(
+    theme,
+    pathname,
+    href,
+  );
+
+  return (
+    <ListItem disablePadding onClick={onClick}>
+      <ListItemButton
+        sx={{
+          backgroundColor: backgroundColor,
+          "&:hover": { backgroundColor: hoverBackgroundColor },
+        }}
+      >
+        <ListItemIcon sx={{ color: color }}>{icon}</ListItemIcon>
+        <ListItemText primary={label} sx={{ color: color }} />
+        {open ? (
+          <ExpandLess sx={{ color: color }} />
+        ) : (
+          <ExpandMore sx={{ color: color }} />
+        )}
+      </ListItemButton>
+    </ListItem>
+  );
+}

src/components/AdminDashboard/Sidebar/SidebarButton.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Theme,
+} from "@mui/material";
+import Link from "next/link";
+import { ReactNode } from "react";
+
+import getButtonStyles from "@/components/AdminDashboard/Sidebar/getButtonStyles";
+
+type SidebarButtonProps = {
+  pathname: string;
+  theme: Theme;
+  href: string;
+  icon: ReactNode;
+  label: string;
+  padLeft?: boolean;
+};
+
+export default function SidebarButton({
+  pathname,
+  theme,
+  href,
+  icon,
+  label,
+  padLeft,
+}: SidebarButtonProps) {
+  const { color, backgroundColor, hoverBackgroundColor } = getButtonStyles(
+    theme,
+    pathname,
+    href,
+  );
+
+  return (
+    <Link href={href} style={{ textDecoration: "none" }}>
+      <ListItem disablePadding>
+        <ListItemButton
+          sx={{
+            backgroundColor: backgroundColor,
+            "&:hover": { backgroundColor: hoverBackgroundColor },
+            paddingLeft: padLeft ? 4 : undefined,
+          }}
+        >
+          <ListItemIcon sx={{ color: color }}>{icon}</ListItemIcon>
+          <ListItemText primary={label} sx={{ color: color }} />
+        </ListItemButton>
+      </ListItem>
+    </Link>
+  );
+}

src/components/AdminDashboard/Sidebar/getButtonStyles.ts

@@ -0,0 +1,17 @@
+import { Theme } from "@mui/material";
+
+export default function getButtonStyles(
+  theme: Theme,
+  pathname: string,
+  href: string,
+) {
+  const isCurrentPage = pathname === href;
+
+  return {
+    backgroundColor: isCurrentPage ? theme.palette.primary.main : "inherit",
+    hoverBackgroundColor: isCurrentPage
+      ? theme.palette.primary.light
+      : "lightgray",
+    color: isCurrentPage ? theme.palette.primary.contrastText : "black",
+  };
+}