Merge pull request #469 from Klotske/separate-dashboard-layout

#432 - 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>
+  );
+};

website/src/pages/dashboard.tsx

@@ -1,29 +1,17 @@
-import { Box, useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 
 import { getDashboardLayout } from "src/components/Layout";
-import { LeaderboardTable, SideMenu, TaskOption } from "src/components/Dashboard";
-import { colors } from "styles/Theme/colors";
+import { LeaderboardTable, TaskOption } from "src/components/Dashboard";
 
 const Dashboard = () => {
-  const { colorMode } = useColorMode();
   return (
     <>
       <Head>
         <title>Dashboard - Open Assistant</title>
         <meta name="description" content="Chat with Open Assistant and provide feedback." />
       </Head>
-      <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 />
-          </Box>
-          <Box className="flex flex-col overflow-auto p-6 sm:pl-0 gap-14">
-            <TaskOption />
-            <LeaderboardTable />
-          </Box>
-        </Box>
-      </Box>
+      <TaskOption />
+      <LeaderboardTable />
     </>
   );
 };

website/src/pages/messages/index.tsx

@@ -2,15 +2,11 @@ import { Box, CircularProgress, SimpleGrid, Text, useColorModeValue } from "@cha
 import Head from "next/head";
 import { useState } from "react";
 import useSWRImmutable from "swr/immutable";
-
 import fetcher from "src/lib/fetcher";
-import { SideMenu } from "src/components/Dashboard";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import { getDashboardLayout } from "src/components/Layout";
-import { colors } from "styles/Theme/colors";
 
 const MessagesDashboard = () => {
-  const bgColor = useColorModeValue(colors.light.bg, colors.dark.bg);
   const boxBgColor = useColorModeValue("white", "gray.700");
   const boxAccentColor = useColorModeValue("gray.200", "gray.900");
 
@@ -35,45 +31,36 @@ const MessagesDashboard = () => {
         <title>Messages - Open Assistant</title>
         <meta name="description" content="Chat with Open Assistant and provide feedback." />
       </Head>
-      <Box backgroundColor={bgColor} className="sm:overflow-hidden">
-        <Box className="sm:flex h-full gap-6">
-          <Box className="p-6 sm:pr-0">
-            <SideMenu />
-          </Box>
-          <Box className="flex flex-col overflow-auto p-6 sm:pl-0 gap-14">
-            <SimpleGrid columns={[1, 1, 1, 2]} gap={4}>
-              <Box>
-                <Text className="text-2xl font-bold" pb="4">
-                  Most recent messages
-                </Text>
-                <Box
-                  backgroundColor={boxBgColor}
-                  boxShadow="base"
-                  dropShadow={boxAccentColor}
-                  borderRadius="xl"
-                  className="p-6 shadow-sm"
-                >
-                  {isLoadingAll ? <CircularProgress isIndeterminate /> : <MessageTable messages={messages} />}
-                </Box>
-              </Box>
-              <Box>
-                <Text className="text-2xl font-bold" pb="4">
-                  Your most recent messages
-                </Text>
-                <Box
-                  backgroundColor={boxBgColor}
-                  boxShadow="base"
-                  dropShadow={boxAccentColor}
-                  borderRadius="xl"
-                  className="p-6 shadow-sm"
-                >
-                  {isLoadingUser ? <CircularProgress isIndeterminate /> : <MessageTable messages={userMessages} />}
-                </Box>
-              </Box>
-            </SimpleGrid>
+      <SimpleGrid columns={[1, 1, 1, 2]} gap={4}>
+        <Box>
+          <Text className="text-2xl font-bold" pb="4">
+            Most recent messages
+          </Text>
+          <Box
+            backgroundColor={boxBgColor}
+            boxShadow="base"
+            dropShadow={boxAccentColor}
+            borderRadius="xl"
+            className="p-6 shadow-sm"
+          >
+            {isLoadingAll ? <CircularProgress isIndeterminate /> : <MessageTable messages={messages} />}
           </Box>
         </Box>
-      </Box>
+        <Box>
+          <Text className="text-2xl font-bold" pb="4">
+            Your most recent messages
+          </Text>
+          <Box
+            backgroundColor={boxBgColor}
+            boxShadow="base"
+            dropShadow={boxAccentColor}
+            borderRadius="xl"
+            className="p-6 shadow-sm"
+          >
+            {isLoadingUser ? <CircularProgress isIndeterminate /> : <MessageTable messages={userMessages} />}
+          </Box>
+        </Box>
+      </SimpleGrid>
     </>
   );
 };