style: header height, button icon size, nav-user, some cursor-pointer

Author: lorenzocorallo

src/assets/svg/logo.svg

@@ -1,38 +1,39 @@
-import Image from "next/image";
 import { GlobeIcon } from "lucide-react";
 import Link from "next/link";
+import Image from "next/image";
+import logo from "@/assets/svg/logo.svg";
 import { ThemeButton } from "@/components/theme-button";
 import { Button } from "./ui/button";
 
-export const HEADER_HEIGHT = "4.5rem";
+export const HEADER_HEIGHT = "3.3rem";
 
 export async function Header() {
   return (
-    <header className="sticky top-0 isolate z-20 flex h-(--header-height) w-full shrink-0 items-center justify-center border-b bg-card">
+    <header className="bg-card sticky top-0 isolate z-20 flex h-(--header-height) w-full shrink-0 items-center justify-center">
       <div className="container mx-auto flex items-center justify-center space-x-6 px-4">
-        <Link href="/">
+        <Link href="/dashboard">
           <div className="flex items-center space-x-4">
             <Image
-              src="https://raw.githubusercontent.com/PoliNetworkOrg/Logo/refs/heads/master/Logo.svg"
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              src={logo}
               alt="PoliNetwork Logo"
-              width={40}
-              height={40}
+              height={32}
+              width={32}
             />
-            <h1 className="hidden text-2xl font-bold text-accent-foreground md:block">
+            <h1 className="text-accent-foreground hidden text-lg font-bold md:block">
               PoliNetwork Admin
             </h1>
           </div>
         </Link>
         <nav className="flex grow items-center justify-end space-x-8"></nav>
-        <nav className="flex items-center space-x-6">
+        <nav className="flex items-center space-x-3">
           <ThemeButton />
           <Button
             disabled
-            className="hover:text-accent-foreground [&_svg]:size-6"
             variant="ghost"
             size="icon"
           >
-            <GlobeIcon />
+            <GlobeIcon size={20} />
           </Button>
         </nav>
       </div>

src/components/header.tsx

@@ -91,14 +91,13 @@ export function AdminSidebar({
     >
       <SidebarHeader>
         <div className="flex items-center justify-start gap-2">
-          <SidebarTrigger className="h-8 w-8" />
+          <SidebarTrigger />
         </div>
       </SidebarHeader>
       <SidebarContent>
         <NavMain items={data.navMain} />
       </SidebarContent>
       <SidebarFooter>{user && <NavUser user={user} />}</SidebarFooter>{" "}
-      <SidebarRail />
     </Sidebar>
   );
 }

src/components/sidebar/admin-sidebar.tsx

@@ -38,7 +38,7 @@ export function NavUser({
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              className="cursor-pointer data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <Avatar className="h-8 w-8 rounded-lg">
                 <AvatarImage src={user.image ?? ""} alt={user.name} />

src/components/sidebar/nav-user.tsx

@@ -1,16 +1,18 @@
 "use client";
 import { MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
+import { Button } from "./ui/button";
 
 export function ThemeButton() {
   const { resolvedTheme, setTheme } = useTheme();
   return (
-    <button
+    <Button
+      size="icon"
+      variant="ghost"
       onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
-      className="text-foreground hover:text-accent-foreground"
     >
-      <SunIcon className="block h-6 w-6 dark:hidden" />
-      <MoonIcon className="hidden h-6 w-6 dark:block" />
-    </button>
+      <SunIcon className="block dark:hidden" size={20} />
+      <MoonIcon className="hidden dark:block" size={20} />
+    </Button>
   );
 }

src/components/theme-button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {

src/components/ui/button.tsx

@@ -84,7 +84,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
       inset && "pl-8",
       className,
     )}

src/components/ui/dropdown-menu.tsx

@@ -279,14 +279,14 @@ const SidebarTrigger = React.forwardRef<
       data-sidebar="trigger"
       variant="ghost"
       size="icon"
-      className={cn("h-7 w-7", className)}
+      className={className}
       onClick={(event) => {
         onClick?.(event);
         toggleSidebar();
       }}
       {...props}
     >
-      <PanelLeft />
+      <PanelLeft size={20} />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );
@@ -332,7 +332,7 @@ const SidebarInset = React.forwardRef<
       className={cn(
         "relative flex flex-1 flex-col bg-background md-2 overflow-y-auto",
         "scrollbar scrollbar-w-2 scrollbar-track-card scrollbar-thumb-white/20",
-        "md:peer-data-[variant=inset]:mt-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-tl-xl md:peer-data-[variant=inset]:shadow-sm",
+        "md:peer-data-[variant=inset]:rounded-tl-xl md:peer-data-[variant=inset]:shadow-sm",
         className,
       )}
       {...props}