menydock update, dashboard page create

taskncoffee-app/src/App.jsx

@@ -3,7 +3,7 @@ import { LoginPage } from './pages/Login'
 import { SignUp } from './pages/SignUp'
 import { AuthLayout } from './layouts/AuthLayout'
 import { Routes, Route, Navigate } from 'react-router'
-import MenuDockVertical from './layouts/DashLayout'
+import Dashboard from './pages/Dashboard'
 
 
 function App() {
@@ -20,9 +20,7 @@ function App() {
       </Route>
 
       <Route path="/dashboard" element={
-        // <div className="min-h-svh bg-background flex justify-start items-start">
+        <Dashboard />
-        <MenuDockVertical />
-        // </div>
       } />
       <Route path="*" element={<Navigate to="/auth/login" replace />} />
     </Routes>

taskncoffee-app/src/components/ui/shadcn-io/menu-dock/index.jsx

@@ -4,11 +4,11 @@ import { Home, Briefcase, Calendar, Shield, Settings } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 const defaultItems = [
-    { label: 'home', icon: Home },
+  { label: 'home', icon: Home },
-    { label: 'work', icon: Briefcase },
+  { label: 'work', icon: Briefcase },
-    { label: 'calendar', icon: Calendar },
+  { label: 'calendar', icon: Calendar },
-    { label: 'security', icon: Shield },
+  { label: 'security', icon: Shield },
-    { label: 'settings', icon: Settings },
+  { label: 'settings', icon: Settings },
 ];
 
 export const MenuDock = ({
@@ -17,19 +17,20 @@ export const MenuDock = ({
   variant = 'default',
   orientation = 'horizontal',
   showLabels = true,
-  animated = true
+  animated = true,
+  showIndicator = true
 }) => {
 
   const finalItems = useMemo(() => {
-     const isValid = items && Array.isArray(items) && items.length >= 2 && items.length <= 8;
+    const isValid = items && Array.isArray(items) && items.length >= 2 && items.length <= 8;
-     if (!isValid) {
+    if (!isValid) {
-        console.warn(
+      console.warn(
-          "MenuDock: 'items' prop is invalid or missing. Using default items.",
+        "MenuDock: 'items' prop is invalid or missing. Using default items.",
-          items
+        items
-        );
+      );
-        return defaultItems;
+      return defaultItems;
-     }
+    }
-     return items;
+    return items;
   }, [items]);
 
   const [activeIndex, setActiveIndex] = useState(0);
@@ -40,9 +41,9 @@ export const MenuDock = ({
   const itemRefs = useRef([]);
 
   useEffect(() => {
-      if (activeIndex >= finalItems.length) {
+    if (activeIndex >= finalItems.length) {
-          setActiveIndex(0);
+      setActiveIndex(0);
-      }
+    }
   }, [finalItems, activeIndex]);
 
   useEffect(() => {
@@ -122,6 +123,7 @@ export const MenuDock = ({
             className={cn(
               'relative flex flex-col items-center justify-center rounded-lg transition-all duration-200',
               'hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              'select-none',
               styles.item,
               isActive && 'text-primary',
               !isActive && 'text-muted-foreground hover:text-foreground'
@@ -153,7 +155,7 @@ export const MenuDock = ({
         );
       })}
       {/* Animated underline for horizontal orientation with labels */}
-      {showLabels && orientation === 'horizontal' && (
+      {showIndicator && showLabels && orientation === 'horizontal' && (
         <div
           className={cn(
             'absolute bottom-2 h-0.5 bg-primary rounded-full transition-all duration-300 ease-out',
@@ -165,7 +167,7 @@ export const MenuDock = ({
           }} />
       )}
       {/* Active indicator for vertical orientation or no labels */}
-      {(!showLabels || orientation === 'vertical') && (
+      {showIndicator && (!showLabels || orientation === 'vertical') && (
         <div
           className={cn(
             'absolute bg-primary rounded-full transition-all duration-300',

taskncoffee-app/src/pages/Dashboard.jsx

@@ -2,12 +2,12 @@
 import { MenuDock } from '@/components/ui/shadcn-io/menu-dock';
 import { Home, Settings, Bell } from 'lucide-react';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
-const sidebarItems = [
+const menuItems = [
     { label: 'home', icon: Home, onClick: () => console.log('Home clicked') },
     { label: 'notifications', icon: Bell, onClick: () => console.log('Notifications clicked') },
     { label: 'settings', icon: Settings, onClick: () => console.log('Settings clicked') },
 ];
-export default function MenuDockVertical() {
+export default function Dashboard() {
     return (
         <div className="min-h-[180px] p-4 flex justify-start items-start">
             <div className="flex flex-col items-center justify-center">
@@ -16,11 +16,14 @@ export default function MenuDockVertical() {
                     <AvatarFallback>CN</AvatarFallback>
                 </Avatar>
                 <MenuDock
-                    items={sidebarItems}
+                    items={menuItems}
-                    variant="compact"
                     orientation="vertical"
+                    showIndicator={false}
+                    variant="default"
+
                 />
             </div>
         </div>
     );
 }
+