feat: Implement responsive design for dashboard layout and user dropdown, and remove unused imports.

This commit is contained in:
Anish Sarkar 2025-12-29 00:06:38 +05:30
parent 1d5ee45bd9
commit dee18233c5
2 changed files with 31 additions and 33 deletions

View file

@ -1,6 +1,6 @@
"use client";
import { BadgeCheck, LogOut, Settings } from "lucide-react";
import { BadgeCheck, LogOut } from "lucide-react";
import { useRouter } from "next/navigation";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
@ -51,23 +51,23 @@ export function UserDropdown({
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end" forceMount>
<DropdownMenuLabel className="font-normal">
<DropdownMenuContent className="w-44 md:w-56" align="end" forceMount>
<DropdownMenuLabel className="font-normal p-2 md:p-3">
<div className="flex flex-col space-y-1">
<p className="text-sm font-medium leading-none">{user.name}</p>
<p className="text-xs leading-none text-muted-foreground">{user.email}</p>
<p className="text-xs md:text-sm font-medium leading-none">{user.name}</p>
<p className="text-[10px] md:text-xs leading-none text-muted-foreground">{user.email}</p>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem onClick={() => router.push(`/dashboard/api-key`)}>
<BadgeCheck className="mr-2 h-4 w-4" />
<DropdownMenuItem onClick={() => router.push(`/dashboard/api-key`)} className="text-xs md:text-sm">
<BadgeCheck className="mr-2 h-3.5 w-3.5 md:h-4 md:w-4" />
API Key
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleLogout}>
<LogOut className="mr-2 h-4 w-4" />
<DropdownMenuItem onClick={handleLogout} className="text-xs md:text-sm">
<LogOut className="mr-2 h-3.5 w-3.5 md:h-4 md:w-4" />
Log out
</DropdownMenuItem>
</DropdownMenuContent>