Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-09 07:25:19 +02:00
Code Issues Releases Activity Actions

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

Browse source 
Logout Placement
This commit is contained in:
Josh Pigford 2024-01-19 14:31:29 -06:00 • committed by GitHub
commit 10c5195930
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

10
libs/client/features/src/layout/DesktopLayout.tsx
View file

@ -16,7 +16,6 @@ import {
RiFolderOpenLine, RiFolderOpenLine,
RiMenuFoldLine, RiMenuFoldLine,
RiMenuUnfoldLine, RiMenuUnfoldLine,
RiMore2Fill,
RiPieChart2Line, RiPieChart2Line,
RiFlagLine, RiFlagLine,
RiArrowRightSLine, RiArrowRightSLine,
@ -191,9 +190,11 @@ export function DesktopLayout({ children, sidebar }: DesktopLayoutProps) {
</div> </div>
</Tooltip> </Tooltip>
<Link href="/settings"> <MenuPopover
<ProfileCircle /> isHeader={false}
</Link> icon={<ProfileCircle />}
buttonClassName="w-12 h-12 rounded-full"
/>
</div> </div>
</nav> </nav>
@ -344,7 +345,6 @@ function DefaultContent({
<p data-testid="user-name">{name ?? ''}</p> <p data-testid="user-name">{name ?? ''}</p>
<p className="text-gray-100">{email ?? ''}</p> <p className="text-gray-100">{email ?? ''}</p>
</div> </div>
<MenuPopover isHeader={false} icon={<RiMore2Fill />} />
</div> </div>
</> </>
) )

7
libs/client/features/src/layout/MenuPopover.tsx
View file

@ -6,19 +6,24 @@ import {
RiShutDownLine as LogoutIcon, RiShutDownLine as LogoutIcon,
RiDatabase2Line, RiDatabase2Line,
} from 'react-icons/ri' } from 'react-icons/ri'
import classNames from 'classnames'
export function MenuPopover({ export function MenuPopover({
icon, icon,
buttonClassName,
placement = 'top-end', placement = 'top-end',
isHeader, isHeader,
}: { }: {
icon: JSX.Element icon: JSX.Element
buttonClassName?: string
placement?: ComponentProps<typeof Menu.Item>['placement'] placement?: ComponentProps<typeof Menu.Item>['placement']
isHeader: boolean isHeader: boolean
}) { }) {
return ( return (
<Menu> <Menu>
<Menu.Button variant="icon">{icon}</Menu.Button> <Menu.Button variant="icon" className={classNames(buttonClassName)}>
{icon}
</Menu.Button>
<Menu.Items <Menu.Items
placement={placement} placement={placement}
className={isHeader ? 'bg-gray-600' : 'min-w-[200px]'} className={isHeader ? 'bg-gray-600' : 'min-w-[200px]'}