Moved SideMenu to component & refactored layout

website/src/components/Dashboard/index.ts

@@ -1,3 +1,2 @@
 export { LeaderboardTable } from "./LeaderboardTable";
-export { SideMenu } from "./SideMenu";
 export { TaskOption } from "./TaskOption";

website/src/components/Layout.tsx

@@ -1,9 +1,11 @@
 // https://nextjs.org/docs/basic-features/layouts
 
 import type { NextPage } from "next";
+import { FiLayout, FiMessageSquare } from "react-icons/fi";
 import { Header } from "src/components/Header";
 
 import { Footer } from "./Footer";
+import { SideMenuLayout } from "./SideMenuLayout";
 
 export type NextPageWithLayout<P = unknown, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: React.ReactElement) => React.ReactNode;
@@ -28,7 +30,24 @@ export const getTransparentHeaderLayout = (page: React.ReactElement) => (
 export const getDashboardLayout = (page: React.ReactElement) => (
   <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
     <Header transparent={true} />
-    {page}
+    <SideMenuLayout
+      menuButtonOptions={[
+        {
+          label: "Dashboard",
+          pathname: "/dashboard",
+          desc: "Dashboard Home",
+          icon: FiLayout,
+        },
+        {
+          label: "Messages",
+          pathname: "/messages",
+          desc: "Messages Dashboard",
+          icon: FiMessageSquare,
+        },
+      ]}
+    >
+      {page}
+    </SideMenuLayout>
   </div>
 );
 

website/src/components/SideMenu.tsx

@@ -1,37 +1,23 @@
 import { Box, Button, Link, Text, Tooltip, useColorMode } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { FiLayout, FiSun, FiMessageSquare } from "react-icons/fi";
+import { FiSun } from "react-icons/fi";
+import { IconType } from "react-icons/lib";
 import { colors } from "styles/Theme/colors";
 
-export function SideMenu() {
+export interface MenuButtonOption {
+  label: string;
+  pathname: string;
+  desc: string;
+  icon: IconType;
+}
+
+export interface SideMenuProps {
+  buttonOptions: MenuButtonOption[];
+}
+
+export function SideMenu(props: SideMenuProps) {
   const router = useRouter();
   const { colorMode, toggleColorMode } = useColorMode();
-  const buttonOptions = [
-    {
-      label: "Dashboard",
-      pathname: "/dashboard",
-      desc: "Dashboard Home",
-      icon: FiLayout,
-    },
-    {
-      label: "Messages",
-      pathname: "/messages",
-      desc: "Messages Dashboard",
-      icon: FiMessageSquare,
-    },
-    // {
-    //   label: "Leaderboard",
-    //   pathname: "#",
-    //   desc: "Public Leaderboard",
-    //   icon: FiAward,
-    // },
-    // {
-    //   label: "Stats",
-    //   pathname: "#",
-    //   desc: "User Statistics",
-    //   icon: FiBarChart2,
-    // },
-  ];
 
   return (
     <main className="sticky top-0 sm:h-full">
@@ -43,7 +29,7 @@ export function SideMenu() {
         className="grid grid-cols-4 gap-2 sm:flex sm:flex-col sm:justify-between p-4 h-full"
       >
         <nav className="grid grid-cols-3 col-span-3 sm:flex sm:flex-col gap-2">
-          {buttonOptions.map((item, itemIndex) => (
+          {props.buttonOptions.map((item, itemIndex) => (
             <Tooltip
               key={itemIndex}
               fontFamily="inter"

website/src/components/SideMenuLayout.tsx

@@ -0,0 +1,23 @@
+import { Box, useColorMode } from "@chakra-ui/react";
+import { colors } from "styles/Theme/colors";
+import { SideMenu, MenuButtonOption } from "src/components/SideMenu";
+
+interface SideMenuLayoutProps {
+  menuButtonOptions: MenuButtonOption[];
+  children: React.ReactNode;
+}
+
+export const SideMenuLayout = (props: SideMenuLayoutProps) => {
+  const { colorMode } = useColorMode();
+
+  return (
+    <Box backgroundColor={colorMode === "light" ? colors.light.bg : colors.dark.bg} className="sm:overflow-hidden">
+      <Box className="sm:flex h-full gap-6">
+        <Box className="p-6 sm:pr-0">
+          <SideMenu buttonOptions={props.menuButtonOptions} />
+        </Box>
+        <Box className="flex flex-col overflow-auto p-6 sm:pl-0 gap-14">{props.children}</Box>
+      </Box>
+    </Box>
+  );
+};