Critique on Menu.

Note: Hamburger menu is still broken and need fixing.

Author: Pigna

.github/copilot-instructions.md

@@ -0,0 +1,25 @@
+# Copilot Instructions
+
+## Design Context
+
+### Users
+Developers building consumer-facing SaaS products and web portals with React. They consume the component library as a foundation and layer their own brand on top. They care deeply about accessibility, predictability, and not fighting the library.
+
+### Brand Personality
+**Professional · Cozy · Warm · Clean**
+
+The library should feel trustworthy and polished without being cold or sterile. Components should radiate quiet competence — approachable enough that adopters feel comfortable, structured enough that their apps feel credible.
+
+### Aesthetic Direction
+**Neutral & Adaptive** — the library stays out of the way.
+
+Components use CSS custom properties throughout so adopters can retheme with minimal effort. The default palette (blue primary, light/dark surface tones) is a safe, professional baseline — not a statement. Every visual choice should be a sensible default, not a brand decision.
+
+Anti-references: avoid anything flashy, opinionated, or hard to override — no gradient text, no neon dark-mode accents, no signature glassmorphism that would clash with adopters' own aesthetics.
+
+### Design Principles
+1. **Accessibility is non-negotiable** — every component ships WCAG 2.2 AA compliant by default. Keyboard navigation, focus indicators, ARIA semantics, and color contrast are baseline requirements, not enhancements.
+2. **Tokens over hardcoded values** — all visual decisions (color, spacing, typography, radius, shadow) flow through CSS custom properties. Nothing is magic-numbered in component styles.
+3. **Predictable over clever** — components behave exactly as developers expect. Consistent prop patterns, standard HTML semantics, and no surprising side effects.
+4. **Progressive disclosure** — components expose simple APIs by default; power-user options (controlled state, callbacks, refs) are available but never required.
+5. **Motion respects the user** — all animations honor `prefers-reduced-motion`. Transitions are functional (communicating state), never decorative.

.impeccable.md

@@ -0,0 +1,25 @@
+# .impeccable.md
+
+## Design Context
+
+### Users
+Developers building consumer-facing SaaS products and web portals with React. They consume the component library as a foundation and layer their own brand on top. They care deeply about accessibility, predictability, and not fighting the library.
+
+### Brand Personality
+**Professional · Cozy · Warm · Clean**
+
+The library should feel trustworthy and polished without being cold or sterile. Components should radiate quiet competence — approachable enough that adopters feel comfortable, structured enough that their apps feel credible.
+
+### Aesthetic Direction
+**Neutral & Adaptive** — the library stays out of the way.
+
+Components use CSS custom properties throughout so adopters can retheme with minimal effort. The default palette (blue primary, light/dark surface tones) is a safe, professional baseline — not a statement. Every visual choice should be a sensible default, not a brand decision.
+
+Anti-references: avoid anything flashy, opinionated, or hard to override — no gradient text, no neon dark-mode accents, no signature glassmorphism that would clash with adopters' own aesthetics.
+
+### Design Principles
+1. **Accessibility is non-negotiable** — every component ships WCAG 2.2 AA compliant by default. Keyboard navigation, focus indicators, ARIA semantics, and color contrast are baseline requirements, not enhancements.
+2. **Tokens over hardcoded values** — all visual decisions (color, spacing, typography, radius, shadow) flow through CSS custom properties. Nothing is magic-numbered in component styles.
+3. **Predictable over clever** — components behave exactly as developers expect. Consistent prop patterns, standard HTML semantics, and no surprising side effects.
+4. **Progressive disclosure** — components expose simple APIs by default; power-user options (controlled state, callbacks, refs) are available but never required.
+5. **Motion respects the user** — all animations honor `prefers-reduced-motion`. Transitions are functional (communicating state), never decorative.

package-lock.json

@@ -3,7 +3,7 @@
 .wrapper {
   display: block;
 
-  @include breakpoint-lg {
+  @include breakpoint-md {
     display: none;
   }
 }
@@ -39,6 +39,11 @@
   inset: 0;
   background: var(--color-overlay);
   z-index: var(--z-index-dialog);
+  animation: fadeIn var(--transition-fast) ease forwards;
+
+  @include reduced-motion {
+    animation: none;
+  }
 }
 
 .panel {
@@ -53,13 +58,33 @@
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  transform: translateX(0);
+  animation: slideIn var(--transition-normal) ease forwards;
 
   @include reduced-motion {
     animation: none;
   }
 }
 
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 .panelHeader {
   display: flex;
   justify-content: flex-end;
@@ -71,10 +96,11 @@
   flex: 1;
   overflow-y: auto;
 
-  /* Override SideMenu display:none so it shows inside hamburger panel */
+  /* Override SideMenu breakpoint styles inside the hamburger slide-in panel */
   :global {
     nav {
-      display: block !important;
+      display: flex !important;
+      flex-direction: column !important;
       width: 100% !important;
       border-right: none !important;
     }

src/components/HamburgerMenu/HamburgerMenu.module.scss

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { HamburgerMenu } from './HamburgerMenu';
+import { SideMenu } from '../SideMenu';
 import { MenuItem } from '../MenuItem';
 import { MenuItemGroup } from '../MenuItemGroup';
 
@@ -17,16 +18,14 @@ export const Default: Story = {
   render: () => (
     /* style override ensures the hamburger is visible at any viewport in Storybook */
     <HamburgerMenu style={{ display: 'block' }}>
-      <nav>
-        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
-          <MenuItem href="/dashboard" active>Dashboard</MenuItem>
-          <MenuItem href="/analytics">Analytics</MenuItem>
-          <MenuItemGroup label="Settings">
-            <MenuItem href="/profile">Profile</MenuItem>
-            <MenuItem href="/security">Security</MenuItem>
-          </MenuItemGroup>
-        </ul>
-      </nav>
+      <SideMenu style={{ display: 'flex' }}>
+        <MenuItem href="/dashboard" active>Dashboard</MenuItem>
+        <MenuItem href="/analytics">Analytics</MenuItem>
+        <MenuItemGroup label="Settings">
+          <MenuItem href="/profile">Profile</MenuItem>
+          <MenuItem href="/security">Security</MenuItem>
+        </MenuItemGroup>
+      </SideMenu>
     </HamburgerMenu>
   ),
 };

src/components/HamburgerMenu/HamburgerMenu.stories.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react';
 import { CloseButton } from '../CloseButton';
 import styles from './HamburgerMenu.module.scss';
+import { HamburgerMenuContext } from './HamburgerMenuContext';
 
 export interface HamburgerMenuProps extends HTMLAttributes<HTMLDivElement> {
   /** Ref forwarded to the container. */
@@ -46,6 +47,7 @@ export function HamburgerMenu({
   const isControlled = controlledOpen !== undefined;
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
   const panelRef = useRef<HTMLDivElement | null>(null);
+  const toggleRef = useRef<HTMLButtonElement | null>(null);
 
   const setOpen = useCallback(
     (next: boolean) => {
@@ -55,7 +57,10 @@ export function HamburgerMenu({
     [isControlled, onOpenChange],
   );
 
-  const close = useCallback(() => setOpen(false), [setOpen]);
+  const close = useCallback(() => {
+    setOpen(false);
+    toggleRef.current?.focus();
+  }, [setOpen]);
   const toggle = useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);
 
   /* Escape key */
@@ -100,6 +105,7 @@ export function HamburgerMenu({
   return (
     <div ref={ref} className={wrapperClasses} {...rest}>
       <button
+        ref={toggleRef}
         type="button"
         className={styles.toggle}
         aria-expanded={isOpen}
@@ -135,7 +141,9 @@ export function HamburgerMenu({
               <CloseButton aria-label="Close menu" onClick={close} />
             </div>
             <div className={styles.panelContent}>
-              {children}
+              <HamburgerMenuContext.Provider value={true}>
+                {children}
+              </HamburgerMenuContext.Provider>
             </div>
           </div>
         </>

src/components/HamburgerMenu/HamburgerMenu.tsx

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+
+/** Set to true inside a HamburgerMenu panel to prevent SideMenu auto-collapse. */
+export const HamburgerMenuContext = createContext(false);
+
+export function useInsideHamburgerMenu(): boolean {
+  return useContext(HamburgerMenuContext);
+}

src/components/HamburgerMenu/HamburgerMenuContext.ts

@@ -1,3 +1,4 @@
 export { HamburgerMenu } from './HamburgerMenu';
 export type { HamburgerMenuProps } from './HamburgerMenu';
+export { HamburgerMenuContext } from './HamburgerMenuContext';
 

src/components/HamburgerMenu/index.ts

@@ -27,23 +27,25 @@
   @include focus-ring;
 
   &:hover {
-    background-color: var(--color-surface);
+    background-color: var(--color-surface-raised);
   }
 
   &:active {
-    background-color: var(--color-surface-raised);
+    background-color: var(--color-surface-sunken, var(--color-surface-raised));
   }
 }
 
 .active .link {
   color: var(--color-primary);
   background-color: var(--color-surface);
   font-weight: var(--font-weight-medium);
+  box-shadow: inset 3px 0 0 var(--color-primary);
 }
 
 .disabled .link {
   color: var(--color-text-disabled);
   cursor: not-allowed;
+  pointer-events: none;
 
   &:hover {
     background-color: transparent;
@@ -63,3 +65,13 @@
   @include truncate;
 }
 
+.collapsed .link {
+  justify-content: center;
+  padding-left: var(--space-2);
+  padding-right: var(--space-2);
+}
+
+.collapsed .label {
+  display: none;
+}
+

src/components/MenuItem/MenuItem.module.scss

@@ -4,40 +4,45 @@ import { MenuItem } from './MenuItem';
 
 describe('MenuItem', () => {
   it('renders as a link when href is provided', () => {
-    render(<ul role="menu"><MenuItem href="/home">Home</MenuItem></ul>);
-    expect(screen.getByRole('menuitem', { name: 'Home' })).toBeInTheDocument();
-    expect(screen.getByRole('menuitem').tagName).toBe('A');
+    render(<ul><MenuItem href="/home">Home</MenuItem></ul>);
+    expect(screen.getByRole('link', { name: 'Home' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Home' }).tagName).toBe('A');
   });
 
   it('renders as a button when href is omitted', () => {
-    render(<ul role="menu"><MenuItem>Settings</MenuItem></ul>);
-    expect(screen.getByRole('menuitem').tagName).toBe('BUTTON');
+    render(<ul><MenuItem>Settings</MenuItem></ul>);
+    expect(screen.getByRole('button', { name: 'Settings' }).tagName).toBe('BUTTON');
   });
 
   it('sets aria-current="page" when active', () => {
-    render(<ul role="menu"><MenuItem href="/home" active>Home</MenuItem></ul>);
-    expect(screen.getByRole('menuitem')).toHaveAttribute('aria-current', 'page');
+    render(<ul><MenuItem href="/home" active>Home</MenuItem></ul>);
+    expect(screen.getByRole('link', { name: 'Home' })).toHaveAttribute('aria-current', 'page');
   });
 
   it('does not set aria-current when not active', () => {
-    render(<ul role="menu"><MenuItem href="/home">Home</MenuItem></ul>);
-    expect(screen.getByRole('menuitem')).not.toHaveAttribute('aria-current');
+    render(<ul><MenuItem href="/home">Home</MenuItem></ul>);
+    expect(screen.getByRole('link', { name: 'Home' })).not.toHaveAttribute('aria-current');
   });
 
-  it('sets aria-disabled when disabled', () => {
-    render(<ul role="menu"><MenuItem disabled>Locked</MenuItem></ul>);
-    expect(screen.getByRole('menuitem')).toHaveAttribute('aria-disabled', 'true');
+  it('sets aria-disabled when disabled (link)', () => {
+    render(<ul><MenuItem href="/locked" disabled>Locked</MenuItem></ul>);
+    expect(screen.getByRole('link', { name: 'Locked' })).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('disables the button natively when disabled', () => {
+    render(<ul><MenuItem disabled>Locked</MenuItem></ul>);
+    expect(screen.getByRole('button', { name: 'Locked' })).toBeDisabled();
   });
 
   it('renders icon with aria-hidden', () => {
     const { container } = render(
-      <ul role="menu"><MenuItem icon={<span>★</span>}>Starred</MenuItem></ul>,
+      <ul><MenuItem icon={<span>★</span>}>Starred</MenuItem></ul>,
     );
     expect(container.querySelector('[aria-hidden="true"]')).toBeInTheDocument();
   });
 
   it('renders children as label text', () => {
-    render(<ul role="menu"><MenuItem href="/x">My Page</MenuItem></ul>);
+    render(<ul><MenuItem href="/x">My Page</MenuItem></ul>);
     expect(screen.getByText('My Page')).toBeInTheDocument();
   });
 });