feat: add unpinned items to the sidebar

Author: debater-coder

src/components/BottomNavSheet/BottomNavSheet.tsx

@@ -1,4 +1,9 @@
-import { Flex as ChakraFlex, useColorModeValue, Box } from "@chakra-ui/react";
+import {
+  Flex as ChakraFlex,
+  useColorModeValue,
+  Box,
+  SimpleGrid,
+} from "@chakra-ui/react";
 import SidebarButton from "../Sidebar/SidebarButton";
 import { motion, PanInfo } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
@@ -62,6 +67,7 @@ export const BottomNavSheet = () => {
       <Box
         bg="gray.500"
         h="5px"
+        minH={"5px"}
         w="30px"
         my="5px"
         rounded="full"
@@ -74,7 +80,7 @@ export const BottomNavSheet = () => {
         borderTop="none"
         borderColor={useColorModeValue("gray.200", "gray.700")}
       >
-        {routes.map((routes) => (
+        {routes.pinned.map((routes) => (
           <SidebarButton
             key={routes.path}
             name={routes.name}
@@ -85,6 +91,18 @@ export const BottomNavSheet = () => {
           />
         ))}
       </Flex>
+      <SimpleGrid columns={4} w="full">
+        {routes.unpinned.map((routes) => (
+          <SidebarButton
+            key={routes.path}
+            name={routes.name}
+            icon={routes.icon}
+            mirrored={routes.mirrored}
+            to={`/app/${routes.path}`}
+            onClick={close}
+          />
+        ))}
+      </SimpleGrid>
     </Flex>
   );
 };

src/components/Routes/Routes.tsx

@@ -55,7 +55,7 @@ export default () => (
         }
       >
         <Route index element={<Navigate to="home" replace={true} />} />
-        {routes.map((route) => (
+        {[...routes.pinned, ...routes.unpinned].map((route) => (
           <Route key={route.path} path={route.path} element={route.element} />
         ))}
         <Route path={"settings/*"} element={<Settings />}>

src/components/Sidebar/Sidebar.tsx

@@ -5,7 +5,8 @@ import { routes } from "../../routes";
 export default () => (
   <Flex
     w={"100px"}
-    h={"100%"}
+    h={"full"}
+    maxH="calc(100% - 80px)"
     direction={"column"}
     position={"fixed"}
     top={"80px"}
@@ -17,7 +18,7 @@ export default () => (
     borderTop={"none"}
     borderColor={useColorModeValue("gray.200", "gray.700")}
   >
-    {routes.map((routes) => (
+    {routes.pinned.map((routes) => (
       <SidebarButton
         key={routes.path}
         name={routes.name}
@@ -26,5 +27,21 @@ export default () => (
         to={`/app/${routes.path}`}
       />
     ))}
+    <Flex
+      direction="column"
+      borderTop={"1px"}
+      borderColor={useColorModeValue("gray.200", "gray.700")}
+      overflowY="auto"
+    >
+      {routes.unpinned.map((routes) => (
+        <SidebarButton
+          key={routes.path}
+          name={routes.name}
+          icon={routes.icon}
+          mirrored={routes.mirrored}
+          to={`/app/${routes.path}`}
+        />
+      ))}
+    </Flex>
   </Flex>
 );

src/routes.tsx

@@ -1,15 +1,22 @@
 import {
   Barcode,
+  BookBookmark,
   CalendarBlank,
+  ChatsTeardrop,
   House,
   IconWeight,
+  MapTrifold,
+  Medal,
   Megaphone,
+  Palette,
 } from "phosphor-react";
 import Announcements from "./routes/Main/Announcements";
 import Barcodes from "./routes/Main/Barcodes";
 import { Calendar } from "./routes/Main/Calendar";
 import Home from "./routes/Main/Home";
 
+const ComingSoon = () => <>Coming soon...</>;
+
 export type TimetablRoute = {
   path: string;
   name: string;
@@ -24,33 +31,73 @@ export type TimetablRoute = {
   element: JSX.Element;
 };
 
-export const routes: TimetablRoute[] = [
-  {
-    path: "home",
-    name: "Home",
-    icon: House,
-    mirrored: false,
-    element: <Home />,
-  },
-  {
-    path: "barcodes",
-    name: "Barcodes",
-    icon: Barcode,
-    mirrored: false,
-    element: <Barcodes />,
-  },
-  {
-    path: "announcements",
-    name: "Notices",
-    icon: Megaphone,
-    mirrored: true,
-    element: <Announcements />,
-  },
-  {
-    path: "calendar",
-    name: "Calendar",
-    icon: CalendarBlank,
-    mirrored: false,
-    element: <Calendar />,
-  },
-];
+export const routes: { pinned: TimetablRoute[]; unpinned: TimetablRoute[] } = {
+  pinned: [
+    {
+      path: "home",
+      name: "Home",
+      icon: House,
+      mirrored: false,
+      element: <Home />,
+    },
+    {
+      path: "barcodes",
+      name: "Barcodes",
+      icon: Barcode,
+      mirrored: false,
+      element: <Barcodes />,
+    },
+    {
+      path: "announcements",
+      name: "Notices",
+      icon: Megaphone,
+      mirrored: true,
+      element: <Announcements />,
+    },
+    {
+      path: "calendar",
+      name: "Calendar",
+      icon: CalendarBlank,
+      mirrored: false,
+      element: <Calendar />,
+    },
+  ],
+  unpinned: [
+    {
+      path: "maps",
+      name: "Maps",
+      icon: MapTrifold,
+      mirrored: false,
+      element: <ComingSoon />,
+    },
+    {
+      path: "points",
+      name: "Points",
+      icon: Medal,
+      mirrored: false,
+      element: <ComingSoon />,
+    },
+    {
+      path: "publications",
+      name: "Publications",
+      icon: BookBookmark,
+      mirrored: false,
+      element: <ComingSoon />,
+    },
+    {
+      path: "feedback",
+      name: "Feedback",
+      icon: ChatsTeardrop,
+      mirrored: false,
+      element: <ComingSoon />,
+    },
+
+    {
+      path: "themes",
+      name: "Themes",
+      icon: Palette,
+      mirrored: false,
+      element: <ComingSoon />,
+    },
+  ],
+};