Render Projects in navbar

client/components/layout/layout-navbar/components/navbar.button.tsx

@@ -0,0 +1,50 @@
+import {
+  DefaultMantineColor,
+  MantineTheme,
+  UnstyledButton,
+  Group,
+  ThemeIcon,
+  Text,
+} from "@mantine/core";
+import { MouseEventHandler } from "react";
+
+interface NavbarButtonProps {
+  icon: React.ReactNode;
+  color: DefaultMantineColor;
+  label: string;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+const NavbarButton: React.FC<NavbarButtonProps> = ({
+  color,
+  icon,
+  label,
+  onClick,
+}) => {
+  const sx = (theme: MantineTheme) => ({
+    display: "block",
+    width: "100%",
+    padding: theme.spacing.xs,
+    borderRadius: theme.radius.sm,
+    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
+
+    "&:hover": {
+      backgroundColor:
+        theme.colorScheme === "dark"
+          ? theme.colors.dark[6]
+          : theme.colors.gray[0],
+    },
+  });
+  return (
+    <UnstyledButton sx={sx} onClick={onClick}>
+      <Group>
+        <ThemeIcon color={color} variant="light">
+          {icon}
+        </ThemeIcon>
+        <Text size="sm">{label}</Text>
+      </Group>
+    </UnstyledButton>
+  );
+};
+
+export default NavbarButton;

client/components/layout/layout-navbar/index.tsx

@@ -4,9 +4,7 @@ import ProjectsSection from "./sections/projects.section";
 const LayoutNavbar: React.FC = () => {
   return (
     <Navbar width={{ base: 300 }} p="xs">
-      <Navbar.Section grow component={ScrollArea} mx="-x" px="xs">
-        <ProjectsSection projects={[]} />
-      </Navbar.Section>
+      <ProjectsSection projects={[]} />
     </Navbar>
   );
 };

client/components/layout/layout-navbar/navbar-actions.tsx

@@ -1,3 +1,4 @@
+export {};
 // import {
 //   UnstyledButton,
 //   Group,

client/components/layout/layout-navbar/sections/projects.section.tsx

@@ -1,12 +1,13 @@
-import { Title, Text } from "@mantine/core";
+import { Title, Loader, Navbar, ScrollArea } from "@mantine/core";
 import { GetServerSideProps } from "next";
+import NavbarButton from "../components/navbar.button";
 import { useQuery } from "react-query";
 import { getAllProjects } from "../../../../api";
 import { Projects } from "../../../../api/dto";
+import { Folder } from "tabler-icons-react";
 
 export const getServerSideProps: GetServerSideProps = async () => {
   const projects = await getAllProjects();
-  console.log(projects);
   return { props: { projects } };
 };
 
@@ -22,16 +23,22 @@ const ProjectsSection: React.FC<ProjectsSectionProps> = ({ projects }) => {
       initialData: projects,
     }
   );
-  console.log(allProjects);
+
+  const projectsComponent = allProjects?.map((project) => (
+    <NavbarButton
+      key={project.ID}
+      icon={<Folder size={16} />}
+      onClick={() => {}}
+      label={project.name}
+      color={"blue"}
+    />
+  ));
+
   return (
-    <>
+    <Navbar.Section grow component={ScrollArea} mx="-x" px="xs">
       <Title order={3}>Projects</Title>
-      {allProjects?.map((project) => (
-        <div key={project.ID}>
-          <Text>{project.name}</Text>
-        </div>
-      ))}
-    </>
+      {allProjects ? projectsComponent : <Loader />}
+    </Navbar.Section>
   );
 };