Skip to content

Commit 7c2cb5d

Browse files
mohdyasin4mohdyasin4
authored
feat: reorganize dropdown menu footer for better UX - Move Toggle The… (#2010)
1 parent 5b7c6b4 commit 7c2cb5d

File tree

1 file changed

+85
-85
lines changed

1 file changed

+85
-85
lines changed

‎apps/mail/components/ui/nav-user.tsx‎

Lines changed: 85 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export function NavUser() {
9191
const { data: session } = useSession();
9292
const { data } = useConnections();
9393
const [isRendered, setIsRendered] = useState(false);
94-
const { theme, setTheme } = useTheme();
94+
const { theme, resolvedTheme, setTheme } = useTheme();
9595
const { state } = useSidebar();
9696
const trpc = useTRPC();
9797
const [, setThreadId] = useQueryState('threadId');
@@ -291,16 +291,6 @@ export function NavUser() {
291291

292292
<DropdownMenuSeparator className="my-1" />
293293

294-
<DropdownMenuItem onClick={handleThemeToggle} className="cursor-pointer">
295-
<div className="flex w-full items-center gap-2">
296-
{theme === 'dark' ? (
297-
<MoonIcon className="size-4 opacity-60" />
298-
) : (
299-
<SunIcon className="size-4 opacity-60" />
300-
)}
301-
<p className="text-[13px] opacity-60">{m['common.navUser.appTheme']()}</p>
302-
</div>
303-
</DropdownMenuItem>
304294
<DropdownMenuItem asChild>
305295
<a href={getSettingsHref()} className="cursor-pointer">
306296
<div className="flex items-center gap-2">
@@ -309,40 +299,9 @@ export function NavUser() {
309299
</div>
310300
</a>
311301
</DropdownMenuItem>
312-
<DropdownMenuItem>
313-
<a
314-
href="https://discord.gg/mail0"
315-
target="_blank"
316-
rel="noreferrer"
317-
className="w-full"
318-
>
319-
<div className="flex items-center gap-2">
320-
<HelpCircle size={16} className="opacity-60" />
321-
<p className="text-[13px] opacity-60">
322-
{m['common.navUser.customerSupport']()}
323-
</p>
324-
</div>
325-
</a>
326-
</DropdownMenuItem>
327-
<DropdownMenuItem className="cursor-pointer" onClick={handleLogout}>
328-
<div className="flex items-center gap-2">
329-
<LogOut size={16} className="opacity-60" />
330-
<p className="text-[13px] opacity-60">{m['common.actions.logout']()}</p>
331-
</div>
332-
</DropdownMenuItem>
333302
</>
334303
</div>
335304
<>
336-
<DropdownMenuSeparator className="mt-1" />
337-
<div className="text-muted-foreground/60 flex items-center justify-center gap-1 px-2 pb-2 pt-1 text-[10px]">
338-
<a href="/privacy" className="hover:underline">
339-
Privacy
340-
</a>
341-
<span>·</span>
342-
<a href="/terms" className="hover:underline">
343-
Terms
344-
</a>
345-
</div>
346305
<DropdownMenuSeparator className="mt-1" />
347306
<p className="text-muted-foreground px-2 py-1 text-[11px] font-medium">Debug</p>
348307
<DropdownMenuItem onClick={handleCopyConnectionId}>
@@ -373,6 +332,48 @@ export function NavUser() {
373332
<p className="text-[13px] opacity-60">Shards: {shards}</p>
374333
</div>
375334
</DropdownMenuItem>
335+
<DropdownMenuSeparator className="mt-1" />
336+
<DropdownMenuItem onSelect={() => handleThemeToggle()} className="cursor-pointer">
337+
<div className="flex w-full items-center gap-2">
338+
{resolvedTheme === 'dark' ? (
339+
<MoonIcon className="size-4 opacity-60" />
340+
) : (
341+
<SunIcon className="size-4 opacity-60" />
342+
)}
343+
<p className="text-[13px] opacity-60">{m['common.navUser.appTheme']()}</p>
344+
</div>
345+
</DropdownMenuItem>
346+
<DropdownMenuItem asChild>
347+
<a
348+
href="https://discord.gg/mail0"
349+
target="_blank"
350+
rel="noopener noreferrer"
351+
className="w-full"
352+
>
353+
<div className="flex items-center gap-2">
354+
<HelpCircle size={16} className="opacity-60" />
355+
<p className="text-[13px] opacity-60">
356+
{m['common.navUser.customerSupport']()}
357+
</p>
358+
</div>
359+
</a>
360+
</DropdownMenuItem>
361+
<DropdownMenuItem className="cursor-pointer" onSelect={() => handleLogout()}>
362+
<div className="flex items-center gap-2">
363+
<LogOut size={16} className="opacity-60" />
364+
<p className="text-[13px] opacity-60">{m['common.actions.logout']()}</p>
365+
</div>
366+
</DropdownMenuItem>
367+
<DropdownMenuSeparator className="mt-1" />
368+
<div className="text-muted-foreground/60 flex items-center justify-center gap-1 px-2 pb-2 pt-1 text-[10px]">
369+
<a href="/privacy" className="hover:underline">
370+
Privacy
371+
</a>
372+
<span>·</span>
373+
<a href="/terms" className="hover:underline">
374+
Terms
375+
</a>
376+
</div>
376377
</>
377378
</DropdownMenuContent>
378379
</DropdownMenu>
@@ -552,50 +553,7 @@ export function NavUser() {
552553
</div>
553554
</DropdownMenuItem>
554555
) : null}
555-
<DropdownMenuItem onClick={handleThemeToggle} className="cursor-pointer">
556-
<div className="flex w-full items-center gap-2">
557-
{theme === 'dark' ? (
558-
<MoonIcon className="size-4 opacity-60" />
559-
) : (
560-
<SunIcon className="size-4 opacity-60" />
561-
)}
562-
<p className="text-[13px] opacity-60">{m['common.navUser.appTheme']()}</p>
563-
</div>
564-
</DropdownMenuItem>
565-
<DropdownMenuItem>
566-
<a
567-
href="https://discord.gg/mail0"
568-
target="_blank"
569-
rel="noreferrer"
570-
className="w-full"
571-
>
572-
<div className="flex items-center gap-2">
573-
<HelpCircle size={16} className="opacity-60" />
574-
<p className="text-[13px] opacity-60">
575-
{m['common.navUser.customerSupport']()}
576-
</p>
577-
</div>
578-
</a>
579-
</DropdownMenuItem>
580-
<DropdownMenuItem className="cursor-pointer" onClick={handleLogout}>
581-
<div className="flex items-center gap-2">
582-
<LogOut size={16} className="opacity-60" />
583-
<p className="text-[13px] opacity-60">{m['common.actions.logout']()}</p>
584-
</div>
585-
</DropdownMenuItem>
586-
</div>
587-
588-
<DropdownMenuSeparator className="mt-1" />
589-
<div className="text-muted-foreground/60 flex items-center justify-center gap-1 px-2 pb-2 pt-1 text-[10px]">
590-
<a href="/privacy" className="hover:underline">
591-
Privacy
592-
</a>
593-
<span>·</span>
594-
<a href="/terms" className="hover:underline">
595-
Terms
596-
</a>
597556
</div>
598-
<DropdownMenuSeparator className="mt-1" />
599557
<p className="text-muted-foreground px-2 py-1 text-[11px] font-medium">Debug</p>
600558
<DropdownMenuItem onClick={handleCopyConnectionId}>
601559
<div className="flex items-center gap-2">
@@ -625,6 +583,48 @@ export function NavUser() {
625583
<p className="text-[13px] opacity-60">Shards: {shards}</p>
626584
</div>
627585
</DropdownMenuItem>
586+
<DropdownMenuSeparator className="mt-1" />
587+
<DropdownMenuItem onClick={handleThemeToggle} className="cursor-pointer">
588+
<div className="flex w-full items-center gap-2">
589+
{theme === 'dark' ? (
590+
<MoonIcon className="size-4 opacity-60" />
591+
) : (
592+
<SunIcon className="size-4 opacity-60" />
593+
)}
594+
<p className="text-[13px] opacity-60">{m['common.navUser.appTheme']()}</p>
595+
</div>
596+
</DropdownMenuItem>
597+
<DropdownMenuItem>
598+
<a
599+
href="https://discord.gg/mail0"
600+
target="_blank"
601+
rel="noreferrer"
602+
className="w-full"
603+
>
604+
<div className="flex items-center gap-2">
605+
<HelpCircle size={16} className="opacity-60" />
606+
<p className="text-[13px] opacity-60">
607+
{m['common.navUser.customerSupport']()}
608+
</p>
609+
</div>
610+
</a>
611+
</DropdownMenuItem>
612+
<DropdownMenuItem className="cursor-pointer" onClick={handleLogout}>
613+
<div className="flex items-center gap-2">
614+
<LogOut size={16} className="opacity-60" />
615+
<p className="text-[13px] opacity-60">{m['common.actions.logout']()}</p>
616+
</div>
617+
</DropdownMenuItem>
618+
<DropdownMenuSeparator className="mt-1" />
619+
<div className="text-muted-foreground/60 flex items-center justify-center gap-1 px-2 pb-2 pt-1 text-[10px]">
620+
<a href="/privacy" className="hover:underline">
621+
Privacy
622+
</a>
623+
<span>·</span>
624+
<a href="/terms" className="hover:underline">
625+
Terms
626+
</a>
627+
</div>
628628
</DropdownMenuContent>
629629
</DropdownMenu>
630630
</div>

0 commit comments

Comments
 (0)