design: move sidebar button to header in dashboard

components/custom/ThemeToggle.tsx

@@ -3,7 +3,6 @@
 import * as React from "react"
 import { Moon, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
-
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -21,6 +20,7 @@ export function ThemeToggle() {
         <Button
           size="icon"
           variant="outline"
+          className="cursor-pointer"
         >
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
@@ -28,13 +28,13 @@ export function ThemeToggle() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
+        <DropdownMenuItem className="cursor-pointer" onClick={() => setTheme("light")}>
           Light
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
+        <DropdownMenuItem className="cursor-pointer" onClick={() => setTheme("dark")}>
           Dark
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
+        <DropdownMenuItem className="cursor-pointer" onClick={() => setTheme("system")}>
           System
         </DropdownMenuItem>
       </DropdownMenuContent>

components/pages/dashboard/Footer.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import { SidebarTrigger } from "@/components/ui/sidebar"
 import { useEffect, useState } from "react"
 import { TbNoCopyright } from "react-icons/tb"
 
@@ -22,25 +21,20 @@ export function Footer() {
     <footer className="py-2 px-4 text-sm text-muted-foreground bg-muted">
       <div className="flex items-center justify-between">
         <div className="flex items-center">
-          <SidebarTrigger variant="secondary" />
-        </div>
-        <div className="flex flex-col gap-1 md:flex-row md:items-center md:justify-end md:gap-4">
-          <div className="flex items-center">
-            <TbNoCopyright className="mr-2" />
-            <p className="text-end text-xs md:text-sm">
-              Created by a community, not a company.
-            </p>
-          </div>
-          {renderTime !== null ? (
-            <p className="hidden text-end md:block md:text-sm">
-              Page rendered in {renderTime.toFixed(2)} ms
-            </p>
-          ) : (
-            <p className="hidden text-end md:block md:text-sm">
-              Calculating render time...
-            </p>
-          )}
+          <TbNoCopyright className="mr-2" />
+          <p className="text-xs md:text-sm">
+            Created by a community, not a company.
+          </p>
         </div>
+        {renderTime !== null ? (
+          <p className="text-sm">
+            Page rendered in {renderTime.toFixed(2)} ms
+          </p>
+        ) : (
+          <p className="text-sm">
+            Calculating render time...
+          </p>
+        )}
       </div>
     </footer>
   )

components/pages/dashboard/Header.tsx

@@ -1,5 +1,4 @@
-import { User, Bell } from "lucide-react"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Bell } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
   Popover,
@@ -9,6 +8,7 @@ import {
 import { Separator } from "@/components/ui/separator"
 import { auth } from "@/auth"
 import { ThemeToggle } from "@/components/custom/ThemeToggle"
+import { SidebarTrigger } from "@/components/ui/sidebar"
 
 export const Header = async () => {
   const session = await auth()
@@ -26,24 +26,7 @@ export const Header = async () => {
   return (
     <header className="sticky top-0 h-16 z-30 bg-background border-b p-4 flex items-center justify-between">
       <div className="flex items-center space-x-4">
-        <Avatar>
-          {session.user.image || isNaN(Number(session.user.image)) ? (
-            <AvatarFallback>
-              <User/>
-            </AvatarFallback>
-          ) : (
-            <div>
-              <AvatarImage src={session.user.image || "https://i.pravatar.cc/"}/>
-              <AvatarFallback>
-                <User/>
-              </AvatarFallback>
-            </div>
-          )}
-        </Avatar>
-        <div className="hidden sm:block">
-          <h2 className="font-semibold">{session.user.name}</h2>
-          <p className="text-sm text-muted-foreground">LibreCloud User</p>
-        </div>
+        <SidebarTrigger variant="outline" className="p-4 cursor-pointer" />
       </div>
       <div className="flex items-center space-x-2">
         <ThemeToggle />
@@ -52,6 +35,7 @@ export const Header = async () => {
             <Button
               size="icon"
               variant="outline"
+              className="cursor-pointer"
             >
               <Bell className="h-5 w-5"/>
             </Button>
@@ -60,7 +44,7 @@ export const Header = async () => {
             <div className="p-4">
               <div className="flex items-center justify-between">
                 <h4 className="font-semibold">Notifications</h4>
-                <Button variant="ghost" size="sm" className="text-xs">
+                <Button variant="ghost" size="sm" className="text-xs cursor-pointer">
                   Mark all as read
                 </Button>
               </div>
@@ -92,7 +76,7 @@ export const Header = async () => {
             </div>
             <Separator/>
             <div className="p-2">
-              <Button variant="ghost" className="w-full text-sm">
+              <Button variant="ghost" className="w-full text-sm cursor-pointer">
                 View all notifications
               </Button>
             </div>