From a63713032ff6b15b80348f724246e7abea40c8a4 Mon Sep 17 00:00:00 2001
From: Md Saban <45597394+mdsaban@users.noreply.github.com>
Date: Sun, 23 Jun 2024 17:39:40 +0530
Subject: ui: Changes for user settings page (#251)

* fix: ui refactoring for user settings page

* fix: type error

* fix: pr comments
---
 apps/web/components/dashboard/sidebar/Sidebar.tsx | 74 ++++++++++++++++-------
 1 file changed, 51 insertions(+), 23 deletions(-)

(limited to 'apps/web/components/dashboard/sidebar/Sidebar.tsx')

diff --git a/apps/web/components/dashboard/sidebar/Sidebar.tsx b/apps/web/components/dashboard/sidebar/Sidebar.tsx
index 08ad2936..84a10d2d 100644
--- a/apps/web/components/dashboard/sidebar/Sidebar.tsx
+++ b/apps/web/components/dashboard/sidebar/Sidebar.tsx
@@ -20,6 +20,51 @@ export default async function Sidebar() {
 
   const lists = await api.lists.list();
 
+  const searchItem = serverConfig.meilisearch
+    ? [
+        {
+          name: "Search",
+          icon: <Search size={18} />,
+          path: "/dashboard/search",
+        },
+      ]
+    : [];
+
+  const adminItem =
+    session.user.role == "admin"
+      ? [
+          {
+            name: "Admin",
+            icon: <Shield size={18} />,
+            path: "/dashboard/admin",
+          },
+        ]
+      : [];
+
+  const menu: {
+    name: string;
+    icon: JSX.Element;
+    path: string;
+  }[] = [
+    {
+      name: "Home",
+      icon: <Home size={18} />,
+      path: "/dashboard/bookmarks",
+    },
+    ...searchItem,
+    {
+      name: "Tags",
+      icon: <Tag size={18} />,
+      path: "/dashboard/tags",
+    },
+    {
+      name: "Settings",
+      icon: <Settings size={18} />,
+      path: "/dashboard/settings",
+    },
+    ...adminItem,
+  ];
+
   return (
     <aside className="flex h-screen w-60 flex-col gap-5 border-r p-4">
       <Link href={"/dashboard/bookmarks"}>
@@ -28,31 +73,14 @@ export default async function Sidebar() {
       <Separator />
       <div>
         <ul className="space-y-2 text-sm font-medium">
-          <SidebarItem
-            logo={<Home />}
-            name="Home"
-            path="/dashboard/bookmarks"
-          />
-          {serverConfig.meilisearch && (
-            <SidebarItem
-              logo={<Search />}
-              name="Search"
-              path="/dashboard/search"
-            />
-          )}
-          <SidebarItem logo={<Tag />} name="Tags" path="/dashboard/tags" />
-          <SidebarItem
-            logo={<Settings />}
-            name="Settings"
-            path="/dashboard/settings"
-          />
-          {session.user.role == "admin" && (
+          {menu.map((item) => (
             <SidebarItem
-              logo={<Shield />}
-              name="Admin"
-              path="/dashboard/admin"
+              key={item.name}
+              logo={item.icon}
+              name={item.name}
+              path={item.path}
             />
-          )}
+          ))}
         </ul>
       </div>
       <Separator />
-- 
cgit v1.2.3-70-g09d2