menydesk material-desgn 3

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

@@ -79,22 +79,22 @@ export const MenuDock = ({
     switch (variant) {
       case 'compact':
         return {
-          container: 'p-1',
-          item: 'p-2 min-w-12',
+          container: 'p-1 gap-1',
+          item: 'px-5 py-3',
           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'
         };
@@ -106,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
@@ -117,41 +117,43 @@ 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',
-              'select-none',
-              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 */}