Add navigation to org settings and org users pages. (SecureAI-Tools#22)

yaogdu · Dec 4, 2023 · 4727d2c · 4727d2c
1 parent af2e6e8
commit 4727d2c
Showing 1 changed file with 26 additions and 5 deletions.
diff --git a/lib/fe/components/side-bar.tsx b/lib/fe/components/side-bar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Avatar, Sidebar as FlowbiteSidebar } from "flowbite-react";
+import { Avatar, Dropdown, Sidebar as FlowbiteSidebar } from "flowbite-react";
 import {
   HiArrowRight,
   HiArrowLeft,
@@ -35,14 +35,35 @@ export function Sidebar({
       ? (session.user as TokenUser)
       : undefined;
   return (
-    <FlowbiteSidebar className={tw("h-screen border-r")} collapsed={collapsed}>
+    <FlowbiteSidebar className={tw("h-screen border-r", collapsed ? "" : "w-80")} collapsed={collapsed}>
       <FlowbiteSidebar.Logo
-        href={FrontendRoutes.APP_HOME}
+        href="#"
         img="/logo.png"
         imgAlt="SecureAI Tools logo"
         className={tw("mt-8")}
+        onClick={(e) => { e.preventDefault() }}
       >
-        SecureAI Tools
+        <Dropdown
+          label={
+            <>SecureAI Tools</>
+          }
+          className={tw("z-50")}
+          placement="bottom"
+          inline
+        >
+          <Dropdown.Item
+            as="a"
+            href={FrontendRoutes.getOrgSettingsRoute(orgSlug)}
+          >
+            Organization settings
+          </Dropdown.Item>
+          <Dropdown.Item
+            as="a"
+            href={FrontendRoutes.getOrgUsersRoute(orgSlug)}
+          >
+            Organization users
+          </Dropdown.Item>
+        </Dropdown>
       </FlowbiteSidebar.Logo>
       <FlowbiteSidebar.Items>
         <FlowbiteSidebar.ItemGroup>
@@ -95,7 +116,7 @@ export function Sidebar({
                   </Link>
                 </div>
                 <div className={tw("text-xs text-gray-500 dark:text-gray-400")}>
-                  {clip(user?.email ?? "", 16)}
+                  {clip(user?.email ?? "", 24)}
                 </div>
               </div>
             )}