diff --git a/website/src/components/Dashboard/index.ts b/website/src/components/Dashboard/index.ts
index 0b4ff49aaf..6e110534c7 100644
--- a/website/src/components/Dashboard/index.ts
+++ b/website/src/components/Dashboard/index.ts
@@ -1,3 +1,2 @@
export { LeaderboardTable } from "./LeaderboardTable";
-export { SideMenu } from "./SideMenu";
export { TaskOption } from "./TaskOption";
diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx
index bf66211322..1faefcc0c6 100644
--- a/website/src/components/Layout.tsx
+++ b/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
= NextPage
& {
getLayout?: (page: React.ReactElement) => React.ReactNode;
@@ -28,7 +30,24 @@ export const getTransparentHeaderLayout = (page: React.ReactElement) => (
export const getDashboardLayout = (page: React.ReactElement) => (
- {page}
+
+ {page}
+
);
diff --git a/website/src/components/Dashboard/SideMenu.tsx b/website/src/components/SideMenu.tsx
similarity index 77%
rename from website/src/components/Dashboard/SideMenu.tsx
rename to website/src/components/SideMenu.tsx
index 499117a289..59489e0e3c 100644
--- a/website/src/components/Dashboard/SideMenu.tsx
+++ b/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 (
@@ -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"
>