From 427717c7b7ab9ac3fef1c095c03ced6ae59589b2 Mon Sep 17 00:00:00 2001
From: Ikraam <ibndaanis@gmail.com>
Date: Fri, 19 Jan 2024 19:43:36 +0000
Subject: [PATCH] added MenuPopover to ProfileCircle

---
 libs/client/features/src/layout/DesktopLayout.tsx | 8 +++++---
 libs/client/features/src/layout/MenuPopover.tsx   | 7 ++++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/libs/client/features/src/layout/DesktopLayout.tsx b/libs/client/features/src/layout/DesktopLayout.tsx
index efa556c3..581dcb81 100644
--- a/libs/client/features/src/layout/DesktopLayout.tsx
+++ b/libs/client/features/src/layout/DesktopLayout.tsx
@@ -16,7 +16,6 @@ import {
     RiFolderOpenLine,
     RiMenuFoldLine,
     RiMenuUnfoldLine,
-    RiMore2Fill,
     RiPieChart2Line,
     RiFlagLine,
     RiArrowRightSLine,
@@ -191,7 +190,11 @@ export function DesktopLayout({ children, sidebar }: DesktopLayoutProps) {
                         </div>
                     </Tooltip>
 
-                    <ProfileCircle />
+                    <MenuPopover
+                        isHeader={false}
+                        icon={<ProfileCircle />}
+                        buttonClassName="w-12 h-12 rounded-full"
+                    />
                 </div>
             </nav>
 
@@ -342,7 +345,6 @@ function DefaultContent({
                     <p data-testid="user-name">{name ?? ''}</p>
                     <p className="text-gray-100">{email ?? ''}</p>
                 </div>
-                <MenuPopover isHeader={false} icon={<RiMore2Fill />} />
             </div>
         </>
     )
diff --git a/libs/client/features/src/layout/MenuPopover.tsx b/libs/client/features/src/layout/MenuPopover.tsx
index 6413d08f..36c838bd 100644
--- a/libs/client/features/src/layout/MenuPopover.tsx
+++ b/libs/client/features/src/layout/MenuPopover.tsx
@@ -6,19 +6,24 @@ import {
     RiShutDownLine as LogoutIcon,
     RiDatabase2Line,
 } from 'react-icons/ri'
+import classNames from 'classnames'
 
 export function MenuPopover({
     icon,
+    buttonClassName,
     placement = 'top-end',
     isHeader,
 }: {
     icon: JSX.Element
+    buttonClassName?: string
     placement?: ComponentProps<typeof Menu.Item>['placement']
     isHeader: boolean
 }) {
     return (
         <Menu>
-            <Menu.Button variant="icon">{icon}</Menu.Button>
+            <Menu.Button variant="icon" className={classNames(buttonClassName)}>
+                {icon}
+            </Menu.Button>
             <Menu.Items
                 placement={placement}
                 className={isHeader ? 'bg-gray-600' : 'min-w-[200px]'}