feat: add dashboard layout components with theme toggle and navigation sidebar

Author: athrael-soju

frontend-nextjs/src/components/app-sidebar.tsx

@@ -3,7 +3,6 @@
 import { Home, Package, Settings, Shield, Search } from "lucide-react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import Image from "next/image"
 import {
   Sidebar,
   SidebarContent,
@@ -51,16 +50,11 @@ export function AppSidebar() {
     <Sidebar className="border-r bg-white dark:bg-slate-900">
       <SidebarHeader className="p-6">
         <Link href="/dashboard" className="flex items-center space-x-3">
-          <div className="w-8 h-8 flex items-center justify-center">
-            <Image
-              src="/assets/images/fastapi-logo.svg"
-              alt="FastAPI Logo"
-              width={32}
-              height={32}
-              className="w-8 h-8"
-              priority
-            />
-          </div>
+          <img
+            src="/assets/images/fastapi-logo.svg"
+            alt="FastAPI Logo"
+            style={{ width: "80%", height: "auto" }}
+          />
         </Link>        
       </SidebarHeader>
       <SidebarContent>

frontend-nextjs/src/components/dashboard-header.tsx

@@ -36,11 +36,11 @@ export function DashboardHeader() {
         <SidebarTrigger />
       </div>
 
-      <div className="flex items-center space-x-4">
+      <div className="flex items-center">
         <ThemeToggle />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+            <Button variant="ghost" className="relative rounded-full">
               <div className="h-8 w-8 rounded-full bg-teal-600 flex items-center justify-center">
                 <User className="h-4 w-4 text-white" />
               </div>

frontend-nextjs/src/components/theme-toggle.tsx

@@ -8,7 +8,7 @@ export function ThemeToggle() {
   const { theme, setTheme } = useTheme()
 
   return (
-    <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
+    <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")} className="rounded-full">
       <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
       <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
       <span className="sr-only">Toggle theme</span>