update filemanager navigation

client-electron/src/components/navbar.tsx

@@ -0,0 +1,92 @@
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuPortal,
+  DropdownMenuSubContent
+} from '@/components/ui/dropdown-menu'
+import { Link } from 'react-router-dom'
+import userAuthStore from '@/hooks/userAuth'
+import { Button } from './ui/button'
+import Logo from '@/assets/vite.svg'
+
+const DropdownMenuUser: React.FC = () => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <div className="flex rounded-full cursor-pointer focus:ring-4 focus:ring-gray-300 text-sm">
+          <img
+            className="w-10 h-10 rounded-full"
+            src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+            alt="user photo"
+          />
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56 me-4">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuItem>Billing</DropdownMenuItem>
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+          <DropdownMenuItem>Keyboard shortcuts</DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>Team</DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>Email</DropdownMenuItem>
+                <DropdownMenuItem>Message</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>More...</DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem>New Team</DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>GitHub</DropdownMenuItem>
+        <DropdownMenuItem>Support</DropdownMenuItem>
+        <DropdownMenuItem disabled>API</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Log out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+const Navbar: React.FC = () => {
+  const userInfo = userAuthStore(state => state.userInfo)
+
+  return (
+    <nav className="flex justify-center items-center fixed top-0 z-50 w-full py-5 bg-zinc-700">
+      <div className="flex justify-between items-center mx-auto w-full max-w-screen-2xl px-6 xs:px-8 sm:px-16">
+        <Link to="/">
+          <img src={Logo} alt="logo" width={40} height={40} />
+        </Link>
+        <div className="flex items-center space-x-4">
+          <div className="flex items-center ms-3">
+            {userInfo ? (
+              <DropdownMenuUser />
+            ) : (
+              <Button asChild variant={'outline'}>
+                <Link to={'/login?redirect_to=' + window.location.pathname}>Login</Link>
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar