Moved SideMenu to component & refactored layout

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