Merge pull request #47 from PathOnAI/treefrontend-ui

#23  1.2.3.5 done

Author: H-Freax

visual-tree-search-app/components/Footer.tsx

@@ -1,28 +1,7 @@
 const Footer = () => {
   return (
-    <footer className="relative px-4 py-6 bg-white dark:bg-gray-500 overflow-hidden">
-      {/* Background Text */}
-      <div
-        className="absolute inset-0 flex items-center justify-center text-6xl font-bold text-gray-200 dark:text-gray-700"
-        style={{
-          zIndex: -1,
-          opacity: 0.1, // Subtle background text
-          whiteSpace: "nowrap", // Prevent text wrapping
-        }}
-      >
-        © {new Date().getFullYear()} - Built with NextJS
-      </div>
-
-      {/* Foreground Content */}
-      <div
-        className="text-center text-sm text-gray-800 dark:text-gray-400"
-        style={{
-          marginTop: `1.3rem`,
-          marginRight: `2.2rem`,
-          paddingBottom: "0.3rem",
-          float: "right",
-        }}
-      >
+    <footer className="px-4 py-2 bg-white dark:bg-gray-500 border-t flex justify-end items-center">
+      <div className="text-sm text-gray-800 dark:text-gray-400">
         © {new Date().getFullYear()}, Built with
         {` `}
         <a

visual-tree-search-app/components/Header.tsx

@@ -12,17 +12,17 @@ const Header = () => {
 
   return (
     <header>
-      <div className="px-4 py-6 flex justify-end items-center bg-white dark:bg-gray-500 overflow-hidden">
+      <div className="px-4 py-2 flex justify-end items-center bg-white dark:bg-gray-500 shadow-sm">
         {mounted && (
           theme === "dark" ? (
             <HiSun 
-              className="w-10 h-10 text-yellow-500" 
+              className="w-6 h-6 text-yellow-500" 
               role="button" 
               onClick={() => setTheme('light')} 
             />
           ) : (
             <HiMoon 
-              className="w-10 h-10 text-gray-900" 
+              className="w-6 h-6 text-gray-900" 
               role="button" 
               onClick={() => setTheme('dark')} 
             />

visual-tree-search-app/components/Sidebar.tsx

@@ -1,11 +1,13 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { Home, LayoutDashboard, Network, Search } from 'lucide-react';
+import { Home, LayoutDashboard, Network, Search, ChevronLeft, ChevronRight } from 'lucide-react';
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { useState } from 'react';
 
 const Sidebar = () => {
   const router = useRouter();
+  const [collapsed, setCollapsed] = useState(false);
 
   const menuItems = [
     {
@@ -36,12 +38,24 @@ const Sidebar = () => {
     }
     return router.pathname.startsWith(path);
   };
+
+  const toggleSidebar = () => {
+    setCollapsed(!collapsed);
+  };
 
   return (
-    <div className="h-full min-h-screen w-64 border-r">
+    <div className={`h-full min-h-screen ${collapsed ? 'w-16' : 'w-64'} border-r transition-all duration-300 relative`}>
       <div className="space-y-4 py-4">
-        <div className="px-4 py-2">
-          <h2 className="text-xl font-semibold tracking-tight">VisualTreeSearch</h2>
+        <div className={`px-4 py-2 flex ${collapsed ? 'justify-center' : 'justify-between'} items-center`}>
+          {!collapsed && <h2 className="text-xl font-semibold tracking-tight">VisualTreeSearch</h2>}
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="absolute -right-3 top-5 bg-white dark:bg-gray-800 border shadow-sm z-10"
+            onClick={toggleSidebar}
+          >
+            {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+          </Button>
         </div>
         <ScrollArea className="h-[calc(100vh-8rem)]">
           <nav className="grid gap-1 px-2">
@@ -50,11 +64,12 @@ const Sidebar = () => {
                 key={item.name}
                 asChild
                 variant={isActive(item.href) ? "secondary" : "ghost"}
-                className="w-full justify-start"
+                className={`w-full ${collapsed ? 'justify-center' : 'justify-start'}`}
+                title={collapsed ? item.name : ''}
               >
                 <Link href={item.href}>
-                  <item.icon className="mr-2 h-4 w-4" />
-                  {item.name}
+                  <item.icon className={`${collapsed ? '' : 'mr-2'} h-4 w-4`} />
+                  {!collapsed && item.name}
                 </Link>
               </Button>
             ))}