ui: Changes for user settings page (#251)

* fix: ui refactoring for user settings page

* fix: type error

* fix: pr comments

1 files changed, 51 insertions, 23 deletions

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 />