@qwickapps/react-framework 1.3.0

package/src/components/ResponsiveMenu.css

@@ -0,0 +1,416 @@
+/**
+ * ResponsiveMenu Styles
+ * 
+ * Provides responsive navigation styling that adapts to different screen sizes
+ * with theme-aware colors and smooth transitions.
+ */
+
+/* Base menu styles */
+.responsive-menu {
+  --menu-bg: var(--theme-surface);
+  --menu-text: var(--theme-on-surface);
+  --menu-hover: var(--theme-surface-variant);
+  --menu-active: var(--theme-primary);
+  --menu-active-text: var(--theme-on-primary);
+  --menu-border: var(--theme-outline-variant);
+  --menu-shadow: rgba(0, 0, 0, 0.1);
+  
+  font-family: var(--theme-font-family, 'Segoe UI', sans-serif);
+  font-size: var(--theme-font-size-body, 14px);
+  line-height: 1.5;
+}
+
+/* Menu item common styles */
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: transparent;
+  color: var(--menu-text);
+  text-decoration: none;
+  border: none;
+  border-radius: var(--theme-border-radius, 8px);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: inherit;
+  font-family: inherit;
+  position: relative;
+  min-height: 48px; /* Accessibility: minimum touch target */
+}
+
+.menu-item:hover:not(.disabled) {
+  background: var(--menu-hover);
+  transform: translateY(-1px);
+}
+
+.menu-item:active:not(.disabled) {
+  transform: translateY(0);
+}
+
+.menu-item.active {
+  background: transparent;
+  color: var(--menu-active);
+  font-weight: 600;
+}
+
+.menu-item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.menu-item-icon {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-item-label {
+  flex: 1;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.menu-item-badge {
+  background: var(--theme-error, #dc2626);
+  color: var(--theme-on-error, white);
+  border-radius: 12px;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  min-width: 20px;
+  text-align: center;
+}
+
+/* Hamburger icon */
+.hamburger-icon {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  width: 20px;
+  height: 16px;
+  cursor: pointer;
+  
+  span {
+    display: block;
+    height: 2px;
+    width: 100%;
+    background: currentColor;
+    border-radius: 1px;
+    transition: all 0.3s ease;
+  }
+}
+
+/* Mobile: Bottom Navigation */
+.mobile-bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--menu-bg);
+  border-top: 1px solid var(--menu-border);
+  box-shadow: 0 -2px 10px var(--menu-shadow);
+  z-index: 1000;
+  
+  .mobile-nav-items {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0.5rem 0;
+    max-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  
+  .mobile-nav-items::-webkit-scrollbar {
+    display: none;
+  }
+  
+  .menu-item {
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0.5rem 0.75rem;
+    min-width: 0;
+    flex: 1;
+    max-width: 100px;
+    text-align: center;
+    
+    .menu-item-icon {
+      margin: 0 auto;
+    }
+    
+    .menu-item-label {
+      font-size: 0.75rem;
+      text-align: center;
+    }
+  }
+}
+
+/* Tablet: Nav Rail */
+.tablet-nav-rail {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  background: var(--menu-bg);
+  border-right: 1px solid var(--menu-border);
+  box-shadow: 2px 0 10px var(--menu-shadow);
+  z-index: 1000;
+  transition: width 0.3s ease;
+  overflow: hidden;
+  
+  &.collapsed {
+    width: 72px;
+  }
+  
+  &.expanded {
+    width: 280px;
+  }
+  
+  .nav-rail-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid var(--menu-border);
+    min-height: 72px;
+  }
+  
+  .nav-rail-logo {
+    flex: 1;
+    overflow: hidden;
+    transition: opacity 0.3s ease;
+  }
+  
+  .nav-rail-toggle {
+    background: transparent;
+    border: none;
+    color: var(--menu-text);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: var(--theme-border-radius, 8px);
+  }
+  
+  .nav-rail-toggle:hover {
+    background: var(--menu-hover);
+  }
+  
+  .nav-rail-items {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    overflow-y: auto;
+    height: calc(100vh - 72px);
+  }
+  
+  &.collapsed {
+    .nav-rail-logo {
+      opacity: 0;
+    }
+    
+    .menu-item {
+      justify-content: center;
+      
+      .menu-item-label {
+        display: none;
+      }
+    }
+  }
+}
+
+/* Desktop: Top Navigation */
+.desktop-top-nav {
+  position: sticky;
+  top: 0;
+  background: var(--menu-bg);
+  border-bottom: 1px solid var(--menu-border);
+  box-shadow: 0 2px 10px var(--menu-shadow);
+  z-index: 1000;
+  
+  .top-nav-content {
+    display: flex;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    height: 64px;
+  }
+  
+  .top-nav-logo {
+    &.logo-left {
+      margin-right: 2rem;
+    }
+    
+    &.logo-center {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    
+    &.logo-right {
+      margin-left: 2rem;
+    }
+  }
+  
+  .top-nav-items {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+    justify-content: center;
+    
+    .logo-left ~ & {
+      justify-content: flex-start;
+    }
+    
+    .logo-right ~ & {
+      justify-content: flex-end;
+    }
+  }
+  
+  .menu-toggle {
+    background: transparent;
+    border: none;
+    color: var(--menu-text);
+    cursor: pointer;
+    padding: 0.75rem;
+    border-radius: var(--theme-border-radius, 8px);
+  }
+  
+  .menu-toggle:hover {
+    background: var(--menu-hover);
+  }
+}
+
+/* Menu Drawer */
+.menu-drawer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 2000;
+  animation: fadeIn 0.2s ease;
+}
+
+.menu-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: 320px;
+  max-width: 90vw;
+  background: var(--menu-bg);
+  box-shadow: -5px 0 20px var(--menu-shadow);
+  animation: slideInRight 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem 2rem;
+    border-bottom: 1px solid var(--menu-border);
+    
+    h3 {
+      margin: 0;
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--menu-text);
+    }
+  }
+  
+  .drawer-close {
+    background: transparent;
+    border: none;
+    color: var(--menu-text);
+    cursor: pointer;
+    font-size: 1.5rem;
+    padding: 0.25rem;
+    border-radius: var(--theme-border-radius, 8px);
+  }
+  
+  .drawer-close:hover {
+    background: var(--menu-hover);
+  }
+  
+  .drawer-items {
+    flex: 1;
+    padding: 1rem 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    overflow-y: auto;
+  }
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideInRight {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+/* Responsive adjustments */
+@media (max-width: 767px) {
+  body {
+    padding-bottom: 80px; /* Space for bottom nav */
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1024px) {
+  body {
+    margin-left: 72px; /* Space for collapsed nav rail */
+  }
+}
+
+/* Dark theme adjustments */
+@media (prefers-color-scheme: dark) {
+  .responsive-menu {
+    --menu-shadow: rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* Dark theme improvements using proper CSS variables */
+html[data-theme="dark"] .responsive-menu {
+  --menu-hover: var(--theme-surface-elevated, #353535);
+  --menu-shadow: rgba(0, 0, 0, 0.4);
+}
+
+/* Enhanced dark theme visibility for menu items */
+html[data-theme="dark"] .menu-item {
+  color: var(--theme-on-surface, #ffffff);
+}
+
+html[data-theme="dark"] .menu-item:hover:not(.disabled) {
+  background: var(--theme-surface-elevated, #353535);
+  color: var(--theme-on-surface, #ffffff);
+}
+
+html[data-theme="dark"] .menu-item.active {
+  background: transparent;
+  color: var(--theme-primary-light, #87ceeb);
+}
+
+html[data-theme="dark"] .menu-item-icon {
+  color: inherit;
+  opacity: 0.9;
+}
+
+html[data-theme="dark"] .menu-item-label {
+  color: inherit;
+  font-weight: 500;
+}

package/src/components/ResponsiveMenu.tsx

@@ -0,0 +1,310 @@
+/**
+ * ResponsiveMenu - Adaptive navigation component
+ * 
+ * Automatically renders different navigation styles based on screen size:
+ * - Mobile (< 768px): Bottom navigation bar
+ * - Tablet (768px - 1024px): Expandable nav rail (sidebar)
+ * - Desktop (> 1024px): Top navigation with drawer
+ * 
+ * Features:
+ * - Theme-aware styling
+ * - Customizable menu items with icons
+ * - Automatic logo display using QwickApp context
+ * - Keyboard navigation support
+ * - ARIA accessibility
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { useState, useEffect } from 'react';
+import { WithBaseProps, useBaseProps, QWICKAPP_COMPONENT } from '../hooks/useBaseProps';
+import { useQwickApp } from '../contexts/QwickAppContext';
+import Logo from './Logo';
+import './ResponsiveMenu.css';
+import { useSafeLocation, useSafeNavigate } from '../utils/reactUtils';
+import { loggers } from '../utils/logger';
+import type { MenuItem } from './menu/MenuItem';
+
+const logger = loggers.menu;
+
+export interface ResponsiveMenuProps extends WithBaseProps {
+  /** Array of menu items to display */
+  items: MenuItem[];
+  /** Custom logo component override (uses QwickApp context by default) */
+  logo?: React.ReactNode;
+  /** Whether to show the logo (default: true) */
+  showLogo?: boolean;
+  /** Position of the logo in desktop mode ('left' | 'center' | 'right') */
+  logoPosition?: 'left' | 'center' | 'right';
+  /** Custom brand text (uses QwickApp appName by default) */
+  brandText?: string;
+  /** Callback when menu state changes (open/closed) */
+  onMenuToggle?: (isOpen: boolean) => void;
+}
+
+type ScreenSize = 'mobile' | 'tablet' | 'desktop';
+
+const ResponsiveMenu: React.FC<ResponsiveMenuProps> = (props) => {
+  const { styleProps, htmlProps, restProps } = useBaseProps(props);
+  const {
+    items = [],
+    logo,
+    showLogo = true,
+    logoPosition = 'left',
+    brandText,
+    onMenuToggle,
+  } = restProps;
+  
+  // Mark as QwickApp component
+  (ResponsiveMenu as any)[QWICKAPP_COMPONENT] = true;
+  const [screenSize, setScreenSize] = useState<ScreenSize>('desktop');
+  const [isNavRailExpanded, setIsNavRailExpanded] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const { appName, logo: contextLogo } = useQwickApp();
+
+  // React Router hooks (if available)
+  const navigate = useSafeNavigate();
+  const location = useSafeLocation();
+  const currentPath = location?.pathname;
+  
+  // Debug logging
+  React.useEffect(() => {
+    logger.debug('Navigate function available:', !!navigate);
+    logger.debug('Current path:', currentPath);
+  }, [navigate, currentPath]);
+
+  // Determine current screen size
+  useEffect(() => {
+    const updateScreenSize = () => {
+      const width = window.innerWidth;
+      if (width < 768) {
+        setScreenSize('mobile');
+      } else if (width <= 1024) {
+        setScreenSize('tablet');
+      } else {
+        setScreenSize('desktop');
+      }
+    };
+
+    updateScreenSize();
+    window.addEventListener('resize', updateScreenSize);
+    return () => window.removeEventListener('resize', updateScreenSize);
+  }, []);
+
+  // Handle nav rail expansion
+  const toggleNavRail = () => {
+    const newExpanded = !isNavRailExpanded;
+    setIsNavRailExpanded(newExpanded);
+    onMenuToggle?.(newExpanded);
+  };
+
+  // Handle drawer toggle
+  const toggleDrawer = () => {
+    const newOpen = !isDrawerOpen;
+    setIsDrawerOpen(newOpen);
+    onMenuToggle?.(newOpen);
+  };
+
+  // Get the logo to display
+  const displayLogo = logo || contextLogo || <Logo name={brandText || appName} size="small" />;
+
+  // Render menu item
+  const renderMenuItem = (item: MenuItem, isCompact = false) => {
+    // Determine if this item is active
+    const isActiveItem = item.active || 
+      (item.route && currentPath === item.route) ||
+      (!item.active && !item.route && currentPath && currentPath === `/${item.id}`);
+    
+    // Handle click - automatic navigation if no onClick provided
+    const handleClick = () => {
+      logger.debug('handleClick:', {
+        itemId: item.id,
+        route: item.route,
+        disabled: item.disabled,
+        isActiveItem,
+        currentPath,
+        hasNavigate: !!navigate,
+        hasOnClick: !!item.onClick
+      });
+      
+      if (item.disabled) return;
+      
+      // Don't navigate if already on this route
+      if (isActiveItem && item.route === currentPath) return;
+      
+      if (item.onClick) {
+        item.onClick();
+      } else if (item.route && navigate) {
+        // Automatic navigation using React Router
+        logger.debug('Navigating to:', item.route);
+        navigate(item.route);
+      } else {
+        logger.warn('Cannot navigate: missing navigate function or route');
+      }
+    };
+
+    const content = (
+      <>
+        {item.icon && <span className="menu-item-icon">{item.icon}</span>}
+        {!isCompact && <span className="menu-item-label">{item.label}</span>}
+        {item.badge && <span className="menu-item-badge">{item.badge}</span>}
+      </>
+    );
+
+    const buttonProps = {
+      className: `menu-item ${isActiveItem ? 'active' : ''} ${item.disabled ? 'disabled' : ''}`,
+      'aria-label': item.label,
+      'aria-current': isActiveItem ? 'page' as const : undefined,
+      onClick: item.disabled ? undefined : handleClick,
+    };
+
+    // External links
+    if (item.href && !item.disabled) {
+      return (
+        <a href={item.href} {...buttonProps} target="_blank" rel="noopener noreferrer">
+          {content}
+        </a>
+      );
+    }
+
+    // Internal navigation or custom click handlers
+    logger.debug('Rendering menu button for:', item.id, {
+      disabled: Boolean(item.disabled || (isActiveItem && item.route === currentPath)),
+      hasOnClick: !!buttonProps.onClick,
+      route: item.route
+    });
+    
+    return (
+      <button 
+        type="button" 
+        {...buttonProps} 
+        disabled={Boolean(item.disabled || (isActiveItem && item.route === currentPath))}
+        style={{ pointerEvents: 'auto', cursor: 'pointer' }}
+        onMouseDown={() => logger.debug('Mouse down on:', item.id)}
+      >
+        {content}
+      </button>
+    );
+  };
+
+  // Mobile: Bottom Navigation
+  if (screenSize === 'mobile') {
+    return (
+      <nav 
+        {...htmlProps}
+        {...styleProps}
+        className={`responsive-menu mobile-bottom-nav ${styleProps.className || ''}`} 
+        role="navigation"
+      >
+        <div className="mobile-nav-items">
+          {items.map(item => <React.Fragment key={item.id}>{renderMenuItem(item, true)}</React.Fragment>)}
+        </div>
+      </nav>
+    );
+  }
+
+  // Tablet: Nav Rail (Expandable Sidebar)
+  if (screenSize === 'tablet') {
+    return (
+      <nav 
+        {...htmlProps}
+        {...styleProps}
+        className={`responsive-menu tablet-nav-rail ${isNavRailExpanded ? 'expanded' : 'collapsed'} ${styleProps.className || ''}`} 
+        role="navigation"
+      >
+        <div className="nav-rail-header">
+          {showLogo && (
+            <div className="nav-rail-logo">
+              {displayLogo}
+            </div>
+          )}
+          <button 
+            type="button"
+            className="nav-rail-toggle"
+            onClick={toggleNavRail}
+            aria-label={isNavRailExpanded ? 'Collapse navigation' : 'Expand navigation'}
+            aria-expanded={isNavRailExpanded}
+          >
+            <span className="hamburger-icon">
+              <span></span>
+              <span></span>
+              <span></span>
+            </span>
+          </button>
+        </div>
+        <div className="nav-rail-items">
+          {items.map(item => <React.Fragment key={item.id}>{renderMenuItem(item, !isNavRailExpanded)}</React.Fragment>)}
+        </div>
+      </nav>
+    );
+  }
+
+  // Desktop: Top Navigation with Drawer
+  return (
+    <>
+      <nav 
+        {...htmlProps}
+        {...styleProps}
+        className={`responsive-menu desktop-top-nav ${styleProps.className || ''}`} 
+        role="navigation"
+      >
+        <div className="top-nav-content">
+          {(logoPosition === 'left' || logoPosition === 'center') && showLogo && (
+            <div className={`top-nav-logo logo-${logoPosition}`}>
+              {displayLogo}
+            </div>
+          )}
+          
+          <div className="top-nav-items">
+            {items.slice(0, 5).map(item => <React.Fragment key={item.id}>{renderMenuItem(item)}</React.Fragment>)}
+            {items.length > 5 && (
+              <button 
+                type="button"
+                className="menu-toggle"
+                onClick={toggleDrawer}
+                aria-label="Open menu drawer"
+                aria-expanded={isDrawerOpen}
+              >
+                <span className="hamburger-icon">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </span>
+              </button>
+            )}
+          </div>
+
+          {logoPosition === 'right' && showLogo && (
+            <div className="top-nav-logo logo-right">
+              {displayLogo}
+            </div>
+          )}
+        </div>
+      </nav>
+
+      {/* Drawer for additional items */}
+      {isDrawerOpen && (
+        <div className="menu-drawer-overlay" onClick={toggleDrawer}>
+          <div className="menu-drawer" onClick={(e) => e.stopPropagation()}>
+            <div className="drawer-header">
+              <h3>Menu</h3>
+              <button 
+                type="button"
+                className="drawer-close"
+                onClick={toggleDrawer}
+                aria-label="Close menu drawer"
+              >
+                ×
+              </button>
+            </div>
+            <div className="drawer-items">
+              {items.map(item => <React.Fragment key={item.id}>{renderMenuItem(item)}</React.Fragment>)}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ResponsiveMenu;