diff --git a/src/layout/sidebar/categories.tsx b/src/layout/sidebar/categories.tsx
new file mode 100644
index 0000000..fcb7d2e
--- /dev/null
+++ b/src/layout/sidebar/categories.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import useSWR from "swr";
+import { getCategorySvgs } from "@/services";
+import CustomLink from "@/common/link";
+import { Text } from "@chakra-ui/react";
+
+const Categories = () => {
+ const { data, error } = useSWR(getCategorySvgs);
+
+ if (error) return
failed to load
;
+ if (!data) return loading...
;
+
+ return (
+
+ {data.map((category: string) => (
+
+ {category}
+
+ ))}
+
+ );
+};
+
+export default Categories;
diff --git a/src/layout/sidebar/content.tsx b/src/layout/sidebar/content.tsx
new file mode 100644
index 0000000..7a8ff39
--- /dev/null
+++ b/src/layout/sidebar/content.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { SidebarContentProps } from "@/interfaces/components";
+import {
+ Box,
+ Divider,
+ Flex,
+ Heading,
+ useColorModeValue,
+} from "@chakra-ui/react";
+import { HandGrabbing } from "phosphor-react";
+import CustomLink from "@/common/link";
+import Categories from "./categories";
+
+const Content = (props: SidebarContentProps) => {
+ const bg = useColorModeValue("bg.light", "bg.dark");
+ return (
+
+
+
+
+
+
+
+
+ Categories
+
+
+
+
+
+ );
+};
+
+export default Content;
diff --git a/src/layout/sidebar/index.tsx b/src/layout/sidebar/index.tsx
new file mode 100644
index 0000000..1c401d3
--- /dev/null
+++ b/src/layout/sidebar/index.tsx
@@ -0,0 +1,59 @@
+import { SidebarContentProps } from "@/interfaces/components";
+import {
+ Box,
+ Drawer,
+ DrawerContent,
+ DrawerOverlay,
+ Flex,
+ IconButton,
+ useColorModeValue,
+ useDisclosure,
+} from "@chakra-ui/react";
+import React from "react";
+import { IoApps } from "react-icons/io5";
+import Content from "./content";
+
+const Index = ({ children }: SidebarContentProps) => {
+ const sidebar = useDisclosure();
+ return (
+
+
+
+
+
+
+
+
+
+
+ }
+ size="sm"
+ />
+
+
+
+ {children}
+
+
+
+ );
+};
+
+export default Index;
diff --git a/src/layout/sidebar/theme.tsx b/src/layout/sidebar/theme.tsx
new file mode 100644
index 0000000..86dce01
--- /dev/null
+++ b/src/layout/sidebar/theme.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useColorMode, useColorModeValue } from "@chakra-ui/react";
+import CustomIconBtn from "@/common/iconBtn";
+import { IoMoonOutline, IoSunnyOutline } from "react-icons/io5";
+
+const Theme = () => {
+ const { toggleColorMode } = useColorMode();
+ const key = useColorModeValue("light", "dark");
+ const icon = useColorModeValue(
+ ,
+
+ );
+ return (
+
+
+
+
+
+ );
+};
+
+export default Theme;