From 6f10d173c08f80f79b4cf511de407d039ea4dbcb Mon Sep 17 00:00:00 2001
From: Tania Gutierrez <riobuenodevelops@gmail.com>
Date: Wed, 13 Mar 2024 21:49:04 -0400
Subject: [PATCH] feat: Added user dropdown and active navbar item state

---
 app/components/general-layout.tsx | 42 ++++++++++++++++++++++++-------
 package.json                      |  5 ++--
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/app/components/general-layout.tsx b/app/components/general-layout.tsx
index be41b25..337dd39 100644
--- a/app/components/general-layout.tsx
+++ b/app/components/general-layout.tsx
@@ -2,7 +2,7 @@ import { Button } from "~/components/ui/button"
 import logoPng from "~/images/lume-logo.png?url"
 import lumeColorLogoPng from "~/images/lume-color-logo.png?url"
 import discordLogoPng from "~/images/discord-logo.png?url"
-import { Link } from "@remix-run/react"
+import { Link, useLocation } from "@remix-run/react"
 import {
   Dialog,
   DialogContent,
@@ -14,7 +14,7 @@ import { useUppy } from "./lib/uppy"
 import type { UppyFile } from "@uppy/core"
 import { Progress } from "~/components/ui/progress"
 import { DialogClose } from "@radix-ui/react-dialog"
-import {  TrashIcon } from "@radix-ui/react-icons"
+import {  ChevronDownIcon, TrashIcon } from "@radix-ui/react-icons"
 import {
   ClockIcon,
   DriveIcon,
@@ -22,10 +22,15 @@ import {
   CloudUploadIcon,
   CloudCheckIcon,
   BoxCheckedIcon,
-  PageIcon
+  PageIcon,
+  ThemeIcon
 } from "./icons"
+import { DropdownMenu, DropdownMenuTrigger } from "./ui/dropdown-menu"
+import { Avatar } from "@radix-ui/react-avatar"
+import { cn } from "~/utils"
 
 export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
+  const location = useLocation();
   return (
     <div className="h-full flex flex-row">
       <header className="p-10 pr-0 flex flex-col w-[240px] h-full scroll-m-0 overflow-hidden">
@@ -35,7 +40,7 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
           <ul>
             <li>
               <Link to="/dashboard">
-                <NavigationButton>
+                <NavigationButton active={location.pathname.includes("dashboard")}>
                   <ClockIcon className="w-5 h-5 mr-2" />
                   Dashboard
                 </NavigationButton>
@@ -43,7 +48,7 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
             </li>
             <li>
               <Link to="/file-manager">
-                <NavigationButton>
+                <NavigationButton active={location.pathname.includes("file-manager")}>
                   <DriveIcon className="w-5 h-5 mr-2" />
                   File Manager
                 </NavigationButton>
@@ -51,7 +56,7 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
             </li>
             <li>
               <Link to="/account">
-                <NavigationButton>
+                <NavigationButton active={location.pathname.includes("account")}>
                   <CircleLockIcon className="w-5 h-5 mr-2" />
                   Account
                 </NavigationButton>
@@ -71,13 +76,29 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
               Upload Files
             </Button>
           </DialogTrigger>
-          <DialogContent>
+          <DialogContent className="border rounded-lg p-8">
             <UploadFileForm />
           </DialogContent>
         </Dialog>
       </header>
 
       <div className="flex-1 overflow-y-auto p-10">
+        <div className="flex items-center gap-x-4 justify-end">
+          <Button variant="ghost" className="rounded-full w-fit">
+            <ThemeIcon className="text-ring" />
+          </Button>
+          
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button className="border rounded-full h-auto p-2 gap-x-2 text-ring font-semibold">
+                <Avatar className="bg-ring h-7 w-7 rounded-full" />
+                whirly10
+                <ChevronDownIcon />
+              </Button>
+            </DropdownMenuTrigger>
+          </DropdownMenu>
+        </div>
+
         {children}
 
         <footer className="mt-5">
@@ -250,9 +271,12 @@ const UploadFileItem = ({
   )
 }
 
-const NavigationButton = ({ children }: React.PropsWithChildren) => {
+const NavigationButton = ({ children, active }: React.PropsWithChildren<{ active?: boolean }>) => {
   return (
-    <Button variant="ghost" className="justify-start h-14 w-full font-semibold">
+    <Button variant="ghost" className={cn(
+      "justify-start h-14 w-full font-semibold",
+      active && "bg-secondary-1 text-secondary-1-foreground"
+    )}>
       {children}
     </Button>
   )
diff --git a/package.json b/package.json
index 93ae956..5e6653e 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,11 @@
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@refinedev/cli": "^2.16.1",
     "@refinedev/core": "https://gitpkg.now.sh/LumeWeb/refine/packages/core?remix",
@@ -31,10 +32,10 @@
     "@remix-run/node": "^2.8.0",
     "@remix-run/react": "^2.8.0",
     "@tanstack/react-table": "^8.13.2",
-    "@visx/visx": "^3.10.2",
     "@uppy/core": "^3.9.3",
     "@uppy/tus": "^3.5.3",
     "@uppy/utils": "^5.7.4",
+    "@visx/visx": "^3.10.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "react": "^18.2.0",