Merge pull request #167 from ikraamdaanis/ikraamdaanis/signout-button

Logout Placement

libs/client/features/src/layout/DesktopLayout.tsx

@@ -16,7 +16,6 @@ import {
     RiFolderOpenLine,
     RiMenuFoldLine,
     RiMenuUnfoldLine,
-    RiMore2Fill,
     RiPieChart2Line,
     RiFlagLine,
     RiArrowRightSLine,
@@ -191,9 +190,11 @@ export function DesktopLayout({ children, sidebar }: DesktopLayoutProps) {
                         </div>
                     </Tooltip>
 
-                    <Link href="/settings">
-                        <ProfileCircle />
-                    </Link>
+                    <MenuPopover
+                        isHeader={false}
+                        icon={<ProfileCircle />}
+                        buttonClassName="w-12 h-12 rounded-full"
+                    />
                 </div>
             </nav>
 
@@ -344,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>
         </>
     )

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]'}