off animation

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">
-        <MenuDockVertical />
-        // </div>
+        <Dashboard />
       } />
       <Route path="*" element={<Navigate to="/auth/login" replace />} />
     </Routes>

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

@@ -4,57 +4,58 @@ import { Home, Briefcase, Calendar, Shield, Settings } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 const defaultItems = [
-    { label: 'home', icon: Home },
-    { label: 'work', icon: Briefcase },
-    { label: 'calendar', icon: Calendar },
-    { label: 'security', icon: Shield },
-    { label: 'settings', icon: Settings },
+  { label: 'home', icon: Home },
+  { label: 'work', icon: Briefcase },
+  { label: 'calendar', icon: Calendar },
+  { label: 'security', icon: Shield },
+  { label: 'settings', icon: Settings },
 ];
 
-export const MenuDock = ({ 
-  items, 
+export const MenuDock = ({
+  items,
   className,
   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;
-     if (!isValid) {
-        console.warn(
-          "MenuDock: 'items' prop is invalid or missing. Using default items.",
-          items
-        );
-        return defaultItems;
-     }
-     return items;
+    const isValid = items && Array.isArray(items) && items.length >= 2 && items.length <= 8;
+    if (!isValid) {
+      console.warn(
+        "MenuDock: 'items' prop is invalid or missing. Using default items.",
+        items
+      );
+      return defaultItems;
+    }
+    return items;
   }, [items]);
 
   const [activeIndex, setActiveIndex] = useState(0);
   const [underlineWidth, setUnderlineWidth] = useState(0);
   const [underlineLeft, setUnderlineLeft] = useState(0);
-  
+
   const textRefs = useRef([]);
   const itemRefs = useRef([]);
 
   useEffect(() => {
-      if (activeIndex >= finalItems.length) {
-          setActiveIndex(0);
-      }
+    if (activeIndex >= finalItems.length) {
+      setActiveIndex(0);
+    }
   }, [finalItems, activeIndex]);
 
   useEffect(() => {
     const updateUnderline = () => {
       const activeButton = itemRefs.current[activeIndex];
       const activeText = textRefs.current[activeIndex];
-      
+
       if (activeButton && activeText && showLabels && orientation === 'horizontal') {
         const buttonRect = activeButton.getBoundingClientRect();
         const textRect = activeText.getBoundingClientRect();
         const containerRect = activeButton.parentElement?.getBoundingClientRect();
-        
+
         if (containerRect) {
           setUnderlineWidth(textRect.width);
           setUnderlineLeft(
@@ -78,22 +79,22 @@ export const MenuDock = ({
     switch (variant) {
       case 'compact':
         return {
-          container: 'p-1',
-          item: 'p-2 min-w-12',
+          container: 'p-1 gap-3',
+          item: 'px-5 py-2',
           icon: 'h-4 w-4',
           text: 'text-xs'
         };
       case 'large':
         return {
-          container: 'p-3',
-          item: 'p-3 min-w-16',
+          container: 'p-3 gap-4',
+          item: 'px-6 py-4',
           icon: 'h-6 w-6',
           text: 'text-base'
         };
       default:
         return {
-          container: 'p-2',
-          item: 'p-2 min-w-14',
+          container: 'p-2 gap-3',
+          item: 'px-5 py-3.5',
           icon: 'h-5 w-5',
           text: 'text-sm'
         };
@@ -105,7 +106,7 @@ export const MenuDock = ({
   return (
     <nav
       className={cn(
-        'relative inline-flex items-center rounded-xl bg-card border shadow-sm',
+        'relative inline-flex items-center rounded-3xl bg-transparent',
         orientation === 'horizontal' ? 'flex-row' : 'flex-col',
         styles.container,
         className
@@ -116,44 +117,47 @@ export const MenuDock = ({
         const IconComponent = item.icon;
 
         return (
-          <button
+          <div
             key={`${item.label}-${index}`}
-            ref={(el) => { itemRefs.current[index] = el; }}
-            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',
-              styles.item,
-              isActive && 'text-primary',
-              !isActive && 'text-muted-foreground hover:text-foreground'
-            )}
-            onClick={() => handleItemClick(index, item)}
-            aria-label={item.label}
-            type="button">
-            <div
+            className="flex flex-col items-center gap-1">
+            <button
+              ref={(el) => { itemRefs.current[index] = el; }}
               className={cn(
-                'flex items-center justify-center transition-all duration-200',
-                animated && isActive && 'animate-bounce',
-                orientation === 'horizontal' && showLabels ? 'mb-1' : '',
-                orientation === 'vertical' && showLabels ? 'mb-1' : ''
-              )}>
-              <IconComponent className={cn(styles.icon, 'transition-colors duration-200')} />
-            </div>
+                'relative flex items-center justify-center rounded-full transition-all duration-300',
+                'hover:bg-primary/10 focus-visible:outline-none',
+                'select-none active:scale-95',
+                styles.item,
+                isActive && 'text-primary bg-primary/15',
+                !isActive && 'text-muted-foreground hover:text-foreground'
+              )}
+              onClick={() => handleItemClick(index, item)}
+              aria-label={item.label}
+              type="button">
+              <div
+                className={cn(
+                  'flex items-center justify-center transition-all duration-200',
+                  animated && isActive && 'animate-bounce'
+                )}>
+                <IconComponent className={cn(styles.icon, 'transition-colors duration-200')} />
+              </div>
+            </button>
             {showLabels && (
               <span
                 ref={(el) => { textRefs.current[index] = el; }}
                 className={cn(
                   'font-medium transition-colors duration-200 capitalize',
                   styles.text,
-                  'whitespace-nowrap'
+                  'whitespace-nowrap',
+                  isActive ? 'text-primary' : 'text-muted-foreground'
                 )}>
                 {item.label}
               </span>
             )}
-          </button>
+          </div>
         );
       })}
       {/* 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,17 +169,17 @@ 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',
-            orientation === 'vertical' 
-              ? 'left-1 w-1 h-6' 
+            orientation === 'vertical'
+              ? 'left-1 w-1 h-6'
               : 'bottom-0.5 h-0.5 w-6'
           )}
           style={{
-            [orientation === 'vertical' ? 'top' : 'left']: 
-              orientation === 'vertical' 
+            [orientation === 'vertical' ? 'top' : 'left']:
+              orientation === 'vertical'
                 ? `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`
                 : `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`
           }} />

taskncoffee-app/src/layouts/DashLayout.jsx

@@ -1,26 +0,0 @@
-'use client';
-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 = [
-    { 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() {
-    return (
-        <div className="min-h-[180px] p-4 flex justify-start items-start">
-            <div className="flex flex-col items-center justify-center">
-                <Avatar className="mb-2 size-10 justify-center items-center">
-                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-                    <AvatarFallback>CN</AvatarFallback>
-                </Avatar>
-                <MenuDock
-                    items={sidebarItems}
-                    variant="compact"
-                    orientation="vertical"
-                />
-            </div>
-        </div>
-    );
-}

taskncoffee-app/src/neon.css

@@ -58,6 +58,23 @@
     }
 }
 
+/*-- Inline Sign Styles for Headers --*/
+.sign-inline {
+    font-family: "Carry-You", cursive;
+    font-size: 3rem;
+    line-height: 1;
+    color: #c6e2ff;
+    animation: neon .08s ease-in-out infinite alternate;
+}
+
+.sign-pink-inline {
+    font-family: "Carry-You", cursive;
+    font-size: 3rem;
+    line-height: 1;
+    color: #ffc5ec;
+    animation: neon-pink .08s ease-in-out infinite alternate;
+}
+
 
 @keyframes neon {
     from {

taskncoffee-app/src/pages/Dashboard.jsx

@@ -0,0 +1,83 @@
+'use client';
+import '../neon.css';
+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 menuItems = [
+    { label: 'home', icon: Home, onClick: () => console.log('Home clicked') },
+    { label: 'notify', icon: Bell, onClick: () => console.log('Notifications clicked') },
+    { label: 'settings', icon: Settings, onClick: () => console.log('Settings clicked') },
+];
+
+export default function Dashboard() {
+    return (
+        <div className="flex min-h-screen bg-background">
+            {/* Navigation Rail - Material Design 3 */}
+            <aside className="w-20 bg-card/50 flex flex-col items-center py-4 gap-4">
+                {/* Avatar with large M3 container */}
+                <div className="mb-2">
+                    <Avatar className="size-14 rounded-2xl">
+                        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+                        <AvatarFallback className="rounded-2xl">CN</AvatarFallback>
+                    </Avatar>
+                </div>
+
+                <MenuDock
+                    items={menuItems}
+                    orientation="vertical"
+                    animated={false}
+                    showIndicator={false}
+                    showLabels={true}
+                    variant="compact"
+                />
+            </aside>
+
+            {/* Main Content Area */}
+            <main className="flex-1 p-6 bg-background">
+                <div className="max-w-7xl mx-auto space-y-6">
+                    <h1 className="text-3xl font-bold">
+                        <span className="sign-pink-inline">Task&</span>
+                        <span className="sign-inline">Coffee</span>
+                    </h1>
+
+                    {/* Material Design 3 Cards Grid */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                        {/* Filled Card */}
+                        <div className="bg-card p-6 rounded-3xl shadow-sm">
+                            <h3 className="text-lg font-semibold mb-2">Filled Card</h3>
+                            <p className="text-muted-foreground text-sm">
+                                Material Design 3 filled container with large rounded corners.
+                            </p>
+                        </div>
+
+                        {/* Elevated Card */}
+                        <div className="bg-card p-6 rounded-3xl shadow-lg hover:shadow-xl transition-shadow">
+                            <h3 className="text-lg font-semibold mb-2">Elevated Card</h3>
+                            <p className="text-muted-foreground text-sm">
+                                Elevated surface with prominent shadow for hierarchy.
+                            </p>
+                        </div>
+
+                        {/* Outlined Card */}
+                        <div className="bg-background border-2 border-border p-6 rounded-3xl">
+                            <h3 className="text-lg font-semibold mb-2">Outlined Card</h3>
+                            <p className="text-muted-foreground text-sm">
+                                Outlined container with subtle border emphasis.
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* Example Section with M3 styling */}
+                    <div className="bg-card/30 p-6 rounded-3xl">
+                        <h2 className="text-xl font-semibold mb-4">Surface Container</h2>
+                        <p className="text-muted-foreground">
+                            Material Design 3 emphasizes larger border radius (rounded-3xl) and layered surfaces.
+                        </p>
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+}
+