From 31e1dcaf0ca4775d7bf8c686a77fd4ebabb6c1ce Mon Sep 17 00:00:00 2001
From: Ismail Pelaseyed <homanp@gmail.com>
Date: Thu, 23 Mar 2023 21:26:12 +0100
Subject: [PATCH] Add a sidebar and app skeleton (#13)

---
 app/app/container.js    |  5 ++-
 app/app/sidebar.js      | 81 +++++++++++++++++++++++++++++++++++++++--
 components/user-menu.js | 24 ++++++++++++
 lib/sidebar.js          | 77 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 182 insertions(+), 5 deletions(-)
 create mode 100644 components/user-menu.js
 create mode 100644 lib/sidebar.js

diff --git a/app/app/container.js b/app/app/container.js
index 41de0f9..e2f68c3 100644
--- a/app/app/container.js
+++ b/app/app/container.js
@@ -1,11 +1,12 @@
 "use client";
 import React from "react";
-import { Flex } from "@chakra-ui/react";
+import { Flex, useColorModeValue } from "@chakra-ui/react";
 import Sidebar from "./sidebar";
 
 export default function AppContainer({ children }) {
+  const backgroundColor = useColorModeValue("white", "#111");
   return (
-    <Flex height="100vh">
+    <Flex height="100vh" backgroundColor={backgroundColor}>
       <Sidebar />
       {children}
     </Flex>
diff --git a/app/app/sidebar.js b/app/app/sidebar.js
index d313cf8..c7fe379 100644
--- a/app/app/sidebar.js
+++ b/app/app/sidebar.js
@@ -1,11 +1,86 @@
 "use client";
 import React from "react";
-import { Stack, Text } from "@chakra-ui/react";
+import PropTypes from "prop-types";
+import { useRouter } from "next/navigation";
+import {
+  Box,
+  Button,
+  Icon,
+  Stack,
+  useColorMode,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import { SIDEBAR_MENU } from "@/lib/sidebar";
+import UserMenu from "@/components/user-menu";
+
+function SidebarItem({ id, href, label, icon, ...properties }) {
+  const router = useRouter();
+
+  return (
+    <Button
+      key={id}
+      width="full"
+      size="sm"
+      variant="ghost"
+      justifyContent="flex-start"
+      leftIcon={<Icon as={icon} fontSize="lg" />}
+      onClick={() => router.push(href)}
+      {...properties}
+    >
+      {label}
+    </Button>
+  );
+}
+
+SidebarItem.propTypes = {
+  id: PropTypes.string,
+  href: PropTypes.string,
+  label: PropTypes.string,
+  icon: PropTypes.func,
+};
 
 export default function Sidebar() {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const isLight = colorMode === "light";
+
   return (
-    <Stack width="60px" height="100vh" borderRightWidth="1px">
-      <Text>Test</Text>
+    <Stack
+      width="200px"
+      height="100vh"
+      borderRightWidth={0.5}
+      justifyContent="space-between"
+      paddingBottom={4}
+    >
+      <Stack spacing={4}>
+        <UserMenu padding={2} />
+        <Box paddingX={1}>
+          {SIDEBAR_MENU.filter(({ placement }) => placement === "top").map(
+            ({ id, label, href, icon, iconDark }) => (
+              <SidebarItem
+                key={id}
+                id={id}
+                label={label}
+                icon={isLight ? icon : iconDark || icon}
+                href={href}
+              />
+            )
+          )}
+        </Box>
+      </Stack>
+      <Stack paddingX={1} spacing={0}>
+        {SIDEBAR_MENU.filter(({ placement }) => placement === "bottom").map(
+          ({ id, label, labelDark, href, icon, iconDark }) => (
+            <SidebarItem
+              key={id}
+              id={id}
+              label={isLight ? label : labelDark || label}
+              icon={isLight ? icon : iconDark || icon}
+              href={href}
+              onClick={id === "dark_mode" && toggleColorMode}
+            />
+          )
+        )}
+      </Stack>
     </Stack>
   );
 }
diff --git a/components/user-menu.js b/components/user-menu.js
new file mode 100644
index 0000000..2097d51
--- /dev/null
+++ b/components/user-menu.js
@@ -0,0 +1,24 @@
+import React from "react";
+import { Avatar, Divider, HStack, Stack, Text } from "@chakra-ui/react";
+import { useSession } from "next-auth/react";
+
+export default function UserMenu({ ...properties }) {
+  const { data: session, status } = useSession();
+
+  return (
+    <Stack spacing={0}>
+      <HStack alignItems="center" {...properties}>
+        <Avatar src={session?.user.image} size="sm" />
+        <Stack spacing={0} justifyContent="center">
+          <Text fontSize="sm" noOfLines={1}>
+            {session?.user.name}
+          </Text>
+          <Text fontSize="xs" color="gray.500" noOfLines={1}>
+            {session?.user.email}
+          </Text>
+        </Stack>
+      </HStack>
+      <Divider />
+    </Stack>
+  );
+}
diff --git a/lib/sidebar.js b/lib/sidebar.js
new file mode 100644
index 0000000..b144f7a
--- /dev/null
+++ b/lib/sidebar.js
@@ -0,0 +1,77 @@
+import {
+  TbDatabase,
+  TbHeadset,
+  TbFileText,
+  TbLanguage,
+  TbMessage,
+  TbPrompt,
+  TbSettings,
+  TbMoon,
+  TbSun,
+} from "react-icons/tb";
+
+const PLACEMENT = {
+  top: "top",
+  bottom: "bottom",
+};
+
+export const SIDEBAR_MENU = [
+  {
+    id: "documents",
+    label: "Documents",
+    href: "/app/documents",
+    icon: TbFileText,
+    placement: PLACEMENT.top,
+  },
+  {
+    id: "prompt_templates",
+    label: "Prompt templates",
+    href: "/app/prompt-templates",
+    icon: TbPrompt,
+    placement: PLACEMENT.top,
+  },
+  {
+    id: "indexes",
+    label: "Indexes",
+    href: "/app/indexes",
+    icon: TbDatabase,
+    placement: PLACEMENT.top,
+  },
+  {
+    id: "llm",
+    label: "LLMs",
+    href: "/app/llm",
+    icon: TbLanguage,
+    placement: PLACEMENT.top,
+  },
+  {
+    id: "agents",
+    label: "Agents",
+    href: "/app/agents",
+    icon: TbHeadset,
+    placement: PLACEMENT.top,
+  },
+  {
+    id: "chatbots",
+    label: "Chatbots",
+    href: "/app/chatbots",
+    icon: TbMessage,
+    placement: PLACEMENT.top,
+  },
+  {
+    id: "dark_mode",
+    label: "Dark",
+    labelDark: "Light",
+    href: "/app/settings",
+    icon: TbMoon,
+    iconDark: TbSun,
+    placement: PLACEMENT.bottom,
+  },
+  {
+    id: "settings",
+    label: "Settings",
+    href: "/app/settings",
+    icon: TbSettings,
+    placement: PLACEMENT.bottom,
+  },
+];