Implementing Navigation

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Navigation Configuration Schema",
  "description": "Schema for defining navigation structure with accessibility and responsive support",
  "type": "object",
  "required": ["items"],
  "properties": {
    "skipLink": {
      "type": "boolean",
      "description": "Include skip navigation link for accessibility",
      "default": true
    },
    "keyboardNavigation": {
      "type": "boolean",
      "description": "Enable keyboard navigation support",
      "default": true
    },
    "landmarkRole": {
      "type": "string",
      "description": "ARIA landmark role for navigation",
      "enum": ["navigation", "menu"],
      "default": "navigation"
    },
    "mobile": {
      "type": "object",
      "description": "Mobile navigation configuration",
      "properties": {
        "breakpoint": {
          "type": "number",
          "description": "Responsive breakpoint in pixels",
          "default": 768
        },
        "type": {
          "type": "string",
          "description": "Mobile navigation pattern",
          "enum": ["hamburger", "bottom-nav", "tab-bar"],
          "default": "hamburger"
        },
        "animation": {
          "type": "string",
          "description": "Animation type for mobile menu",
          "enum": ["slide", "fade", "none"],
          "default": "slide"
        }
      }
    },
    "focusIndicators": {
      "type": "object",
      "description": "Focus indicator styling",
      "properties": {
        "style": {
          "type": "string",
          "enum": ["outline", "box-shadow", "underline"],
          "default": "outline"
        },
        "color": {
          "type": "string",
          "description": "CSS color value",
          "default": "#0066cc"
        },
        "width": {
          "type": "number",
          "description": "Width in pixels",
          "default": 2
        },
        "offset": {
          "type": "number",
          "description": "Offset in pixels",
          "default": 2
        }
      }
    },
    "items": {
      "type": "array",
      "description": "Navigation items",
      "items": {
        "$ref": "#/definitions/navigationItem"
      }
    },
    "footer": {
      "type": "array",
      "description": "Footer navigation items",
      "items": {
        "$ref": "#/definitions/navigationItem"
      }
    },
    "breadcrumbs": {
      "type": "object",
      "description": "Breadcrumb configuration",
      "properties": {
        "enabled": {
          "type": "boolean",
          "default": true
        },
        "separator": {
          "type": "string",
          "description": "Separator character or icon",
          "default": "/"
        },
        "maxItems": {
          "type": "number",
          "description": "Maximum visible items before collapsing",
          "default": 5
        },
        "homeLabel": {
          "type": "string",
          "description": "Label for home breadcrumb",
          "default": "Home"
        }
      }
    },
    "search": {
      "type": "object",
      "description": "Search configuration in navigation",
      "properties": {
        "enabled": {
          "type": "boolean",
          "default": false
        },
        "placeholder": {
          "type": "string",
          "default": "Search..."
        },
        "position": {
          "type": "string",
          "enum": ["left", "right", "center"],
          "default": "right"
        },
        "hotkey": {
          "type": "string",
          "description": "Keyboard shortcut (e.g., 'cmd+k')",
          "default": "cmd+k"
        }
      }
    },
    "theme": {
      "type": "object",
      "description": "Navigation theming",
      "properties": {
        "variant": {
          "type": "string",
          "enum": ["light", "dark", "transparent", "custom"],
          "default": "light"
        },
        "sticky": {
          "type": "boolean",
          "description": "Sticky navigation on scroll",
          "default": true
        },
        "shadow": {
          "type": "boolean",
          "description": "Show shadow/border",
          "default": true
        },
        "height": {
          "type": "number",
          "description": "Navigation height in pixels",
          "default": 64
        }
      }
    },
    "analytics": {
      "type": "object",
      "description": "Analytics tracking configuration",
      "properties": {
        "enabled": {
          "type": "boolean",
          "default": false
        },
        "trackClicks": {
          "type": "boolean",
          "default": true
        },
        "trackHover": {
          "type": "boolean",
          "default": false
        },
        "trackSearch": {
          "type": "boolean",
          "default": true
        }
      }
    }
  },
  "definitions": {
    "navigationItem": {
      "type": "object",
      "required": ["label"],
      "properties": {
        "id": {
          "type": "string",
          "description": "Unique identifier for the navigation item"
        },
        "label": {
          "type": "string",
          "description": "Display text for the navigation item"
        },
        "href": {
          "type": "string",
          "description": "URL or route path"
        },
        "target": {
          "type": "string",
          "description": "Link target attribute",
          "enum": ["_self", "_blank", "_parent", "_top"]
        },
        "external": {
          "type": "boolean",
          "description": "Mark as external link",
          "default": false
        },
        "icon": {
          "type": "string",
          "description": "Icon identifier or URL"
        },
        "iconPosition": {
          "type": "string",
          "enum": ["left", "right"],
          "default": "left"
        },
        "badge": {
          "type": ["string", "number"],
          "description": "Badge content (e.g., notification count)"
        },
        "badgeColor": {
          "type": "string",
          "description": "Badge color variant",
          "enum": ["primary", "secondary", "success", "danger", "warning", "info"]
        },
        "children": {
          "type": "array",
          "description": "Nested navigation items",
          "items": {
            "$ref": "#/definitions/navigationItem"
          }
        },
        "active": {
          "type": "boolean",
          "description": "Mark as currently active",
          "default": false
        },
        "disabled": {
          "type": "boolean",
          "description": "Disable this navigation item",
          "default": false
        },
        "hidden": {
          "type": "boolean",
          "description": "Hide this item",
          "default": false
        },
        "roles": {
          "type": "array",
          "description": "Required user roles to see this item",
          "items": {
            "type": "string"
          }
        },
        "permissions": {
          "type": "array",
          "description": "Required permissions to see this item",
          "items": {
            "type": "string"
          }
        },
        "divider": {
          "type": "boolean",
          "description": "Show divider after this item",
          "default": false
        },
        "className": {
          "type": "string",
          "description": "Additional CSS class names"
        },
        "ariaLabel": {
          "type": "string",
          "description": "Accessible label if different from label"
        },
        "ariaHaspopup": {
          "type": "boolean",
          "description": "Indicates item has a submenu"
        },
        "ariaExpanded": {
          "type": "boolean",
          "description": "Indicates if submenu is expanded"
        },
        "ariaCurrent": {
          "type": "string",
          "description": "Indicates current item",
          "enum": ["page", "step", "location", "date", "time", "true", "false"]
        },
        "dataAttributes": {
          "type": "object",
          "description": "Custom data attributes",
          "additionalProperties": {
            "type": "string"
          }
        },
        "onClick": {
          "type": "string",
          "description": "Click handler function name"
        },
        "onHover": {
          "type": "string",
          "description": "Hover handler function name"
        },
        "tooltip": {
          "type": "string",
          "description": "Tooltip text on hover"
        },
        "metadata": {
          "type": "object",
          "description": "Additional metadata",
          "additionalProperties": true
        }
      }
    }
  },
  "examples": [
    {
      "skipLink": true,
      "keyboardNavigation": true,
      "mobile": {
        "breakpoint": 768,
        "type": "hamburger"
      },
      "items": [
        {
          "id": "home",
          "label": "Home",
          "href": "/",
          "icon": "home",
          "active": true,
          "ariaCurrent": "page"
        },
        {
          "id": "products",
          "label": "Products",
          "href": "/products",
          "icon": "shopping-bag",
          "ariaHaspopup": true,
          "children": [
            {
              "label": "Electronics",
              "href": "/products/electronics"
            },
            {
              "label": "Clothing",
              "href": "/products/clothing"
            }
          ]
        },
        {
          "id": "about",
          "label": "About",
          "href": "/about",
          "icon": "info"
        },
        {
          "id": "contact",
          "label": "Contact",
          "href": "/contact",
          "icon": "mail",
          "badge": "New",
          "badgeColor": "success"
        }
      ]
    }
  ]
}

{
  "templates": {
    "react-router": {
      "name": "React Router v6 Templates",
      "description": "Common route patterns for React Router",
      "patterns": [
        {
          "name": "Basic Routes",
          "template": {
            "path": "/",
            "element": "Layout",
            "children": [
              {
                "index": true,
                "element": "Home"
              },
              {
                "path": "about",
                "element": "About"
              },
              {
                "path": "contact",
                "element": "Contact"
              }
            ]
          }
        },
        {
          "name": "Nested Routes",
          "template": {
            "path": "products",
            "element": "ProductsLayout",
            "children": [
              {
                "index": true,
                "element": "ProductList"
              },
              {
                "path": ":productId",
                "element": "ProductDetail",
                "loader": "productLoader"
              },
              {
                "path": ":productId/edit",
                "element": "ProductEdit",
                "action": "editProductAction"
              }
            ]
          }
        },
        {
          "name": "Protected Routes",
          "template": {
            "path": "dashboard",
            "element": "ProtectedRoute",
            "children": [
              {
                "index": true,
                "element": "Dashboard"
              },
              {
                "path": "profile",
                "element": "Profile"
              },
              {
                "path": "settings",
                "element": "Settings"
              }
            ]
          }
        },
        {
          "name": "Error Routes",
          "template": {
            "path": "*",
            "element": "NotFound"
          }
        }
      ]
    },
    "nextjs": {
      "name": "Next.js App Router Templates",
      "description": "Common patterns for Next.js App Router",
      "patterns": [
        {
          "name": "Basic Structure",
          "files": [
            "app/layout.tsx",
            "app/page.tsx",
            "app/about/page.tsx",
            "app/contact/page.tsx"
          ]
        },
        {
          "name": "Dynamic Routes",
          "files": [
            "app/products/page.tsx",
            "app/products/[productId]/page.tsx",
            "app/products/[productId]/edit/page.tsx"
          ]
        },
        {
          "name": "Route Groups",
          "files": [
            "app/(marketing)/layout.tsx",
            "app/(marketing)/page.tsx",
            "app/(marketing)/about/page.tsx",
            "app/(dashboard)/layout.tsx",
            "app/(dashboard)/dashboard/page.tsx"
          ]
        },
        {
          "name": "Parallel Routes",
          "files": [
            "app/dashboard/@analytics/page.tsx",
            "app/dashboard/@team/page.tsx",
            "app/dashboard/layout.tsx"
          ]
        },
        {
          "name": "Intercepting Routes",
          "files": [
            "app/@modal/(.)products/[id]/page.tsx",
            "app/products/[id]/page.tsx"
          ]
        }
      ]
    },
    "flask": {
      "name": "Flask Route Templates",
      "description": "Common Flask routing patterns",
      "patterns": [
        {
          "name": "Basic Routes",
          "routes": [
            {
              "path": "/",
              "method": "GET",
              "function": "index",
              "template": "index.html"
            },
            {
              "path": "/about",
              "method": "GET",
              "function": "about",
              "template": "about.html"
            },
            {
              "path": "/contact",
              "methods": ["GET", "POST"],
              "function": "contact",
              "template": "contact.html"
            }
          ]
        },
        {
          "name": "RESTful Routes",
          "blueprint": "api",
          "prefix": "/api/v1",
          "routes": [
            {
              "path": "/resources",
              "method": "GET",
              "function": "get_resources"
            },
            {
              "path": "/resources",
              "method": "POST",
              "function": "create_resource"
            },
            {
              "path": "/resources/<int:id>",
              "method": "GET",
              "function": "get_resource"
            },
            {
              "path": "/resources/<int:id>",
              "method": "PUT",
              "function": "update_resource"
            },
            {
              "path": "/resources/<int:id>",
              "method": "DELETE",
              "function": "delete_resource"
            }
          ]
        },
        {
          "name": "Admin Routes",
          "blueprint": "admin",
          "prefix": "/admin",
          "auth_required": true,
          "routes": [
            {
              "path": "/",
              "method": "GET",
              "function": "admin_dashboard",
              "roles": ["admin"]
            },
            {
              "path": "/users",
              "method": "GET",
              "function": "manage_users",
              "roles": ["admin", "moderator"]
            }
          ]
        }
      ]
    },
    "django": {
      "name": "Django URL Templates",
      "description": "Common Django URL patterns",
      "patterns": [
        {
          "name": "Basic URLs",
          "urlpatterns": [
            {
              "pattern": "",
              "view": "views.index",
              "name": "index"
            },
            {
              "pattern": "about/",
              "view": "views.about",
              "name": "about"
            },
            {
              "pattern": "contact/",
              "view": "views.ContactView.as_view()",
              "name": "contact"
            }
          ]
        },
        {
          "name": "Model CRUD URLs",
          "app_name": "products",
          "urlpatterns": [
            {
              "pattern": "",
              "view": "views.ProductListView.as_view()",
              "name": "product_list"
            },
            {
              "pattern": "<int:pk>/",
              "view": "views.ProductDetailView.as_view()",
              "name": "product_detail"
            },
            {
              "pattern": "create/",
              "view": "views.ProductCreateView.as_view()",
              "name": "product_create"
            },
            {
              "pattern": "<int:pk>/update/",
              "view": "views.ProductUpdateView.as_view()",
              "name": "product_update"
            },
            {
              "pattern": "<int:pk>/delete/",
              "view": "views.ProductDeleteView.as_view()",
              "name": "product_delete"
            }
          ]
        },
        {
          "name": "Date-based Archives",
          "urlpatterns": [
            {
              "pattern": "archive/",
              "view": "views.ArchiveIndexView.as_view()",
              "name": "archive_index"
            },
            {
              "pattern": "archive/<int:year>/",
              "view": "views.YearArchiveView.as_view()",
              "name": "archive_year"
            },
            {
              "pattern": "archive/<int:year>/<int:month>/",
              "view": "views.MonthArchiveView.as_view()",
              "name": "archive_month"
            },
            {
              "pattern": "archive/<int:year>/<int:month>/<int:day>/",
              "view": "views.DayArchiveView.as_view()",
              "name": "archive_day"
            }
          ]
        }
      ]
    },
    "fastapi": {
      "name": "FastAPI Route Templates",
      "description": "Common FastAPI routing patterns",
      "patterns": [
        {
          "name": "Basic Routes",
          "routes": [
            {
              "path": "/",
              "method": "get",
              "function": "root",
              "response_model": "dict",
              "summary": "Root endpoint"
            },
            {
              "path": "/health",
              "method": "get",
              "function": "health_check",
              "tags": ["system"]
            }
          ]
        },
        {
          "name": "CRUD Operations",
          "router": "products",
          "prefix": "/products",
          "tags": ["products"],
          "routes": [
            {
              "path": "/",
              "method": "get",
              "function": "get_products",
              "response_model": "List[Product]"
            },
            {
              "path": "/",
              "method": "post",
              "function": "create_product",
              "response_model": "Product",
              "status_code": 201
            },
            {
              "path": "/{product_id}",
              "method": "get",
              "function": "get_product",
              "response_model": "Product"
            },
            {
              "path": "/{product_id}",
              "method": "put",
              "function": "update_product",
              "response_model": "Product"
            },
            {
              "path": "/{product_id}",
              "method": "delete",
              "function": "delete_product",
              "status_code": 204
            }
          ]
        },
        {
          "name": "WebSocket Routes",
          "routes": [
            {
              "path": "/ws",
              "type": "websocket",
              "function": "websocket_endpoint"
            },
            {
              "path": "/ws/chat/{room_id}",
              "type": "websocket",
              "function": "chat_endpoint"
            }
          ]
        },
        {
          "name": "File Operations",
          "routes": [
            {
              "path": "/upload",
              "method": "post",
              "function": "upload_file",
              "consumes": "multipart/form-data"
            },
            {
              "path": "/download/{file_id}",
              "method": "get",
              "function": "download_file",
              "response_class": "FileResponse"
            }
          ]
        }
      ]
    }
  },
  "common_patterns": {
    "authentication": {
      "routes": [
        "/login",
        "/logout",
        "/register",
        "/forgot-password",
        "/reset-password/{token}",
        "/verify-email/{token}"
      ]
    },
    "user_management": {
      "routes": [
        "/profile",
        "/profile/edit",
        "/settings",
        "/settings/security",
        "/settings/notifications",
        "/settings/privacy"
      ]
    },
    "e_commerce": {
      "routes": [
        "/products",
        "/products/{category}",
        "/products/{category}/{product}",
        "/cart",
        "/cart/add",
        "/cart/remove/{item_id}",
        "/checkout",
        "/checkout/shipping",
        "/checkout/payment",
        "/checkout/confirm",
        "/orders",
        "/orders/{order_id}"
      ]
    },
    "blog": {
      "routes": [
        "/blog",
        "/blog/{year}",
        "/blog/{year}/{month}",
        "/blog/{year}/{month}/{day}",
        "/blog/{year}/{month}/{day}/{slug}",
        "/blog/category/{category}",
        "/blog/tag/{tag}",
        "/blog/author/{author}",
        "/blog/search"
      ]
    },
    "api_versioning": {
      "patterns": [
        "/api/v1/{resource}",
        "/api/v2/{resource}",
        "/v1/api/{resource}",
        "/api/latest/{resource}"
      ]
    }
  }
}

"""
Django URL Pattern Organization
Demonstrates best practices for organizing URL patterns in Django applications.
"""

from django.urls import path, include
from django.contrib import admin
from . import views

# Root URL configuration (myproject/urls.py)
urlpatterns = [
    # Admin interface
    path('admin/', admin.site.urls),

    # API endpoints (namespaced)
    path('api/v1/', include('api.urls', namespace='api')),

    # App-specific URLs (include pattern)
    path('blog/', include('blog.urls')),
    path('shop/', include('shop.urls')),
    path('accounts/', include('accounts.urls')),

    # Root pages
    path('', views.home, name='home'),
    path('about/', views.about, name='about'),
    path('contact/', views.contact, name='contact'),
]


# App-level URL configuration (blog/urls.py)
app_name = 'blog'  # Namespace for reverse URL lookups

urlpatterns = [
    # List view
    path('', views.PostListView.as_view(), name='post_list'),

    # Detail view with slug
    path('<slug:slug>/', views.PostDetailView.as_view(), name='post_detail'),

    # Create, update, delete
    path('create/', views.PostCreateView.as_view(), name='post_create'),
    path('<int:pk>/edit/', views.PostUpdateView.as_view(), name='post_edit'),
    path('<int:pk>/delete/', views.PostDeleteView.as_view(), name='post_delete'),

    # Category filtering
    path('category/<slug:category_slug>/', views.PostByCategoryView.as_view(), name='posts_by_category'),

    # Tag filtering
    path('tag/<slug:tag_slug>/', views.PostByTagView.as_view(), name='posts_by_tag'),

    # Comments (nested)
    path('<int:post_id>/comments/', include('comments.urls')),
]


# API URL configuration (api/urls.py)
from rest_framework.routers import DefaultRouter
from .views import UserViewSet, PostViewSet, CommentViewSet

app_name = 'api'

# Router for ViewSets (automatic CRUD endpoints)
router = DefaultRouter()
router.register(r'users', UserViewSet, basename='user')
router.register(r'posts', PostViewSet, basename='post')
router.register(r'comments', CommentViewSet, basename='comment')

urlpatterns = [
    # Router-generated URLs
    path('', include(router.urls)),

    # Custom API endpoints
    path('auth/login/', views.LoginAPIView.as_view(), name='login'),
    path('auth/logout/', views.LogoutAPIView.as_view(), name='logout'),
    path('auth/refresh/', views.RefreshTokenAPIView.as_view(), name='refresh'),

    # Nested resources
    path('posts/<int:post_id>/comments/', views.PostCommentsAPIView.as_view(), name='post_comments'),

    # Search endpoints
    path('search/', views.SearchAPIView.as_view(), name='search'),
    path('search/posts/', views.PostSearchAPIView.as_view(), name='post_search'),
]


# E-commerce URL patterns (shop/urls.py)
app_name = 'shop'

urlpatterns = [
    # Product listings
    path('', views.ProductListView.as_view(), name='product_list'),
    path('products/<slug:slug>/', views.ProductDetailView.as_view(), name='product_detail'),
    path('category/<slug:category>/', views.CategoryView.as_view(), name='category'),

    # Cart operations
    path('cart/', views.CartView.as_view(), name='cart'),
    path('cart/add/<int:product_id>/', views.add_to_cart, name='add_to_cart'),
    path('cart/remove/<int:item_id>/', views.remove_from_cart, name='remove_from_cart'),
    path('cart/update/<int:item_id>/', views.update_cart_item, name='update_cart_item'),

    # Checkout flow
    path('checkout/', views.CheckoutView.as_view(), name='checkout'),
    path('checkout/shipping/', views.ShippingView.as_view(), name='checkout_shipping'),
    path('checkout/payment/', views.PaymentView.as_view(), name='checkout_payment'),
    path('checkout/confirm/', views.ConfirmOrderView.as_view(), name='checkout_confirm'),

    # Order management
    path('orders/', views.OrderListView.as_view(), name='order_list'),
    path('orders/<int:pk>/', views.OrderDetailView.as_view(), name='order_detail'),
]


# URL pattern with multiple parameters
urlpatterns = [
    # Date-based archive
    path(
        'archive/<int:year>/<int:month>/<int:day>/',
        views.DayArchiveView.as_view(),
        name='day_archive'
    ),

    # Nested resources with multiple IDs
    path(
        'projects/<int:project_id>/tasks/<int:task_id>/comments/',
        views.TaskCommentsView.as_view(),
        name='task_comments'
    ),
]


# Advanced URL patterns with converters
from django.urls import register_converter

class FourDigitYearConverter:
    regex = '[0-9]{4}'

    def to_python(self, value):
        return int(value)

    def to_url(self, value):
        return '%04d' % value

register_converter(FourDigitYearConverter, 'yyyy')

urlpatterns = [
    # Custom converter usage
    path('archive/<yyyy:year>/', views.YearArchiveView.as_view(), name='year_archive'),

    # Built-in converters
    path('user/<uuid:user_id>/', views.UserProfileView.as_view(), name='user_profile'),
    path('post/<slug:slug>/', views.PostDetailView.as_view(), name='post'),
    path('page/<path:page_path>/', views.PageView.as_view(), name='page'),
]


# Reverse URL lookups (usage in views/templates)
"""
# In views.py
from django.urls import reverse
from django.shortcuts import redirect

def create_post(request):
    # ... create post logic ...
    return redirect('blog:post_detail', slug=post.slug)

# Using reverse()
url = reverse('blog:post_detail', kwargs={'slug': 'my-post'})
# Result: /blog/my-post/

url = reverse('api:post-detail', kwargs={'pk': 123})
# Result: /api/v1/posts/123/

# In templates
{% url 'blog:post_detail' slug=post.slug %}
{% url 'shop:product_detail' slug='laptop-pro' %}
{% url 'api:user-list' %}
"""


# Best Practices Summary
"""
1. Use include() for app-specific URLs
2. Use app_name for namespacing
3. Use descriptive names for URL patterns
4. Group related URLs logically
5. Use slug fields for SEO-friendly URLs
6. Version API endpoints (api/v1/, api/v2/)
7. Use routers for ViewSets (DRF)
8. Keep URL patterns DRY (Don't Repeat Yourself)
9. Use path() over re_path() when possible
10. Document complex URL patterns
"""

"""
FastAPI Router Organization
Demonstrates best practices for organizing routes in FastAPI applications.
"""

from fastapi import FastAPI, APIRouter, Depends, HTTPException, status
from fastapi.responses import JSONResponse
from pydantic import BaseModel
from typing import List, Optional

# Main application instance (main.py)
app = FastAPI(
    title="MyApp API",
    version="1.0.0",
    description="API for MyApp with organized routers"
)


# ============================================================================
# AUTHENTICATION ROUTER (auth.py)
# ============================================================================

auth_router = APIRouter(
    prefix="/auth",
    tags=["authentication"],
    responses={401: {"description": "Unauthorized"}},
)

class LoginRequest(BaseModel):
    email: str
    password: str

class TokenResponse(BaseModel):
    access_token: str
    token_type: str = "bearer"

@auth_router.post("/login", response_model=TokenResponse)
async def login(credentials: LoginRequest):
    """Authenticate user and return access token"""
    # Authentication logic here
    return TokenResponse(access_token="fake-token", token_type="bearer")

@auth_router.post("/logout")
async def logout():
    """Invalidate user session"""
    return {"message": "Successfully logged out"}

@auth_router.post("/refresh", response_model=TokenResponse)
async def refresh_token():
    """Refresh access token"""
    return TokenResponse(access_token="new-fake-token")


# ============================================================================
# USERS ROUTER (users.py)
# ============================================================================

users_router = APIRouter(
    prefix="/users",
    tags=["users"],
    responses={404: {"description": "User not found"}},
)

class User(BaseModel):
    id: int
    email: str
    name: str

class UserCreate(BaseModel):
    email: str
    name: str
    password: str

@users_router.get("/", response_model=List[User])
async def list_users(skip: int = 0, limit: int = 10):
    """List all users with pagination"""
    return [
        User(id=1, email="user@example.com", name="John Doe"),
        User(id=2, email="jane@example.com", name="Jane Smith"),
    ]

@users_router.get("/{user_id}", response_model=User)
async def get_user(user_id: int):
    """Get user by ID"""
    if user_id == 1:
        return User(id=1, email="user@example.com", name="John Doe")
    raise HTTPException(status_code=404, detail="User not found")

@users_router.post("/", response_model=User, status_code=status.HTTP_201_CREATED)
async def create_user(user: UserCreate):
    """Create a new user"""
    return User(id=1, email=user.email, name=user.name)

@users_router.put("/{user_id}", response_model=User)
async def update_user(user_id: int, user: UserCreate):
    """Update existing user"""
    return User(id=user_id, email=user.email, name=user.name)

@users_router.delete("/{user_id}", status_code=status.HTTP_204_NO_CONTENT)
async def delete_user(user_id: int):
    """Delete user"""
    return None


# ============================================================================
# POSTS ROUTER (posts.py)
# ============================================================================

posts_router = APIRouter(
    prefix="/posts",
    tags=["posts"],
)

class Post(BaseModel):
    id: int
    title: str
    content: str
    author_id: int
    published: bool = False

class PostCreate(BaseModel):
    title: str
    content: str

@posts_router.get("/", response_model=List[Post])
async def list_posts(
    skip: int = 0,
    limit: int = 10,
    published: Optional[bool] = None,
):
    """List posts with optional filtering by published status"""
    return [
        Post(id=1, title="First Post", content="Content here", author_id=1, published=True),
    ]

@posts_router.get("/{post_id}", response_model=Post)
async def get_post(post_id: int):
    """Get post by ID"""
    return Post(id=post_id, title="Post Title", content="Post content", author_id=1)

@posts_router.post("/", response_model=Post, status_code=status.HTTP_201_CREATED)
async def create_post(post: PostCreate):
    """Create a new post"""
    return Post(id=1, title=post.title, content=post.content, author_id=1)


# ============================================================================
# NESTED RESOURCES (posts/{post_id}/comments)
# ============================================================================

comments_router = APIRouter(
    prefix="/posts/{post_id}/comments",
    tags=["comments"],
)

class Comment(BaseModel):
    id: int
    post_id: int
    content: str
    author_id: int

class CommentCreate(BaseModel):
    content: str

@comments_router.get("/", response_model=List[Comment])
async def list_post_comments(post_id: int):
    """List all comments for a specific post"""
    return [
        Comment(id=1, post_id=post_id, content="Great post!", author_id=2),
    ]

@comments_router.post("/", response_model=Comment, status_code=status.HTTP_201_CREATED)
async def create_comment(post_id: int, comment: CommentCreate):
    """Create a comment on a post"""
    return Comment(id=1, post_id=post_id, content=comment.content, author_id=1)


# ============================================================================
# API VERSIONING (api/v1/ and api/v2/)
# ============================================================================

# API v1 router
v1_router = APIRouter(prefix="/api/v1")
v1_router.include_router(auth_router)
v1_router.include_router(users_router)
v1_router.include_router(posts_router)

# API v2 router (with breaking changes)
v2_router = APIRouter(prefix="/api/v2")

v2_users_router = APIRouter(
    prefix="/users",
    tags=["users-v2"],
)

class UserV2(BaseModel):
    id: int
    email: str
    full_name: str  # Changed from 'name'
    is_active: bool = True  # New field

@v2_users_router.get("/", response_model=List[UserV2])
async def list_users_v2():
    """List users (API v2 with breaking changes)"""
    return [
        UserV2(id=1, email="user@example.com", full_name="John Doe", is_active=True),
    ]

v2_router.include_router(v2_users_router)


# ============================================================================
# REGISTER ALL ROUTERS
# ============================================================================

# Register versioned API routers
app.include_router(v1_router)
app.include_router(v2_router)

# Additional routers (no versioning)
app.include_router(comments_router)


# ============================================================================
# DEPENDENCY INJECTION PATTERN
# ============================================================================

from fastapi.security import OAuth2PasswordBearer

oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/auth/login")

async def get_current_user(token: str = Depends(oauth2_scheme)) -> User:
    """Dependency to get current authenticated user"""
    # Verify token and return user
    if token == "fake-token":
        return User(id=1, email="user@example.com", name="John Doe")
    raise HTTPException(status_code=401, detail="Invalid token")

# Protected route using dependency
@app.get("/me", response_model=User)
async def get_current_user_info(current_user: User = Depends(get_current_user)):
    """Get current user information (protected route)"""
    return current_user


# ============================================================================
# ADVANCED ROUTING PATTERNS
# ============================================================================

# Optional path parameters
@app.get("/items/{item_id}")
async def read_item(item_id: int, q: Optional[str] = None):
    """Item detail with optional query parameter"""
    if q:
        return {"item_id": item_id, "query": q}
    return {"item_id": item_id}

# Enum path parameters
from enum import Enum

class ModelName(str, Enum):
    gpt4 = "gpt-4"
    claude = "claude-3"
    llama = "llama-3"

@app.get("/models/{model_name}")
async def get_model(model_name: ModelName):
    """Model selection with enum validation"""
    if model_name == ModelName.gpt4:
        return {"model": "GPT-4", "provider": "OpenAI"}
    return {"model": model_name.value}

# File path parameters
@app.get("/files/{file_path:path}")
async def read_file(file_path: str):
    """Read file with path parameter (allows slashes)"""
    return {"file_path": file_path}


# ============================================================================
# BEST PRACTICES SUMMARY
# ============================================================================
"""
1. Use APIRouter for modular organization
2. Group related endpoints with tags
3. Use prefix for common path segments
4. Version APIs (api/v1, api/v2) for breaking changes
5. Use dependencies for authentication/authorization
6. Use Pydantic models for request/response validation
7. Document endpoints with docstrings
8. Use HTTP status codes correctly (201 for created, 204 for no content)
9. Handle errors with HTTPException
10. Keep routers in separate files for large projects

Project Structure:
myapp/
├── main.py              # FastAPI app instance
├── routers/
│   ├── __init__.py
│   ├── auth.py          # Authentication routes
│   ├── users.py         # User CRUD routes
│   ├── posts.py         # Post CRUD routes
│   └── comments.py      # Comment routes
├── models/
│   └── schemas.py       # Pydantic models
├── dependencies/
│   └── auth.py          # Authentication dependencies
└── database/
    └── db.py            # Database connection
"""

"""
Flask Blueprint Organization Example

This example demonstrates:
- Blueprint-based route organization
- Route guards and authentication
- Error handling
- RESTful API patterns
- Navigation hierarchy
"""

from flask import Flask, Blueprint, render_template, jsonify, request, redirect, url_for
from flask_login import login_required, current_user
from functools import wraps
from typing import Dict, List, Any

# Create Flask app
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'

# ====================
# Main Navigation Routes
# ====================

main_bp = Blueprint('main', __name__)

@main_bp.route('/')
def home():
    """Home page with navigation structure."""
    nav_items = get_navigation_structure()
    return render_template('index.html', navigation=nav_items)

@main_bp.route('/about')
def about():
    """About page."""
    breadcrumbs = [
        {'label': 'Home', 'href': url_for('main.home')},
        {'label': 'About', 'href': url_for('main.about'), 'current': True}
    ]
    return render_template('about.html', breadcrumbs=breadcrumbs)

@main_bp.route('/contact', methods=['GET', 'POST'])
def contact():
    """Contact page with form handling."""
    if request.method == 'POST':
        # Process contact form
        name = request.form.get('name')
        email = request.form.get('email')
        message = request.form.get('message')

        # Send email or save to database
        process_contact_form(name, email, message)

        return redirect(url_for('main.contact_success'))

    return render_template('contact.html')

# ====================
# Product Navigation
# ====================

products_bp = Blueprint('products', __name__, url_prefix='/products')

@products_bp.route('/')
def product_list():
    """Product listing with filtering."""
    # Get filter parameters
    category = request.args.get('category')
    sort = request.args.get('sort', 'name')
    page = request.args.get('page', 1, type=int)

    # Fetch products
    products = get_products(category=category, sort=sort, page=page)

    # Build breadcrumbs
    breadcrumbs = [
        {'label': 'Home', 'href': url_for('main.home')},
        {'label': 'Products', 'href': url_for('products.product_list'), 'current': True}
    ]

    return render_template('products/list.html',
                         products=products,
                         breadcrumbs=breadcrumbs,
                         current_category=category)

@products_bp.route('/category/<category_slug>')
def product_category(category_slug: str):
    """Product category page."""
    category = get_category_by_slug(category_slug)
    if not category:
        abort(404)

    products = get_products_by_category(category_slug)

    # Build breadcrumbs with category
    breadcrumbs = [
        {'label': 'Home', 'href': url_for('main.home')},
        {'label': 'Products', 'href': url_for('products.product_list')},
        {'label': category['name'], 'href': url_for('products.product_category', category_slug=category_slug), 'current': True}
    ]

    return render_template('products/category.html',
                         category=category,
                         products=products,
                         breadcrumbs=breadcrumbs)

@products_bp.route('/<int:product_id>')
def product_detail(product_id: int):
    """Product detail page."""
    product = get_product(product_id)
    if not product:
        abort(404)

    # Build full breadcrumb trail
    breadcrumbs = build_product_breadcrumbs(product)

    # Get related navigation
    related_products = get_related_products(product_id)

    return render_template('products/detail.html',
                         product=product,
                         breadcrumbs=breadcrumbs,
                         related_products=related_products)

# ====================
# Admin Routes with Authentication
# ====================

admin_bp = Blueprint('admin', __name__, url_prefix='/admin')

def admin_required(f):
    """Decorator for admin-only routes."""
    @wraps(f)
    def decorated_function(*args, **kwargs):
        if not current_user.is_authenticated:
            return redirect(url_for('auth.login', next=request.url))
        if not current_user.is_admin:
            abort(403)
        return f(*args, **kwargs)
    return decorated_function

@admin_bp.route('/')
@admin_required
def admin_dashboard():
    """Admin dashboard with navigation stats."""
    stats = {
        'total_pages': count_pages(),
        'total_products': count_products(),
        'navigation_depth': calculate_navigation_depth(),
        'broken_links': check_broken_links()
    }

    return render_template('admin/dashboard.html', stats=stats)

@admin_bp.route('/navigation')
@admin_required
def manage_navigation():
    """Manage site navigation structure."""
    nav_structure = get_full_navigation_structure()
    return render_template('admin/navigation.html', navigation=nav_structure)

@admin_bp.route('/navigation/edit/<int:item_id>', methods=['GET', 'POST'])
@admin_required
def edit_navigation_item(item_id: int):
    """Edit navigation item."""
    nav_item = get_navigation_item(item_id)

    if request.method == 'POST':
        nav_item['label'] = request.form.get('label')
        nav_item['href'] = request.form.get('href')
        nav_item['parent_id'] = request.form.get('parent_id', type=int)
        nav_item['order'] = request.form.get('order', type=int)

        save_navigation_item(nav_item)
        return redirect(url_for('admin.manage_navigation'))

    return render_template('admin/edit_navigation.html', item=nav_item)

# ====================
# API Routes for Dynamic Navigation
# ====================

api_bp = Blueprint('api', __name__, url_prefix='/api/v1')

@api_bp.route('/navigation')
def api_navigation():
    """Get navigation structure as JSON."""
    nav_structure = get_navigation_structure()
    return jsonify(nav_structure)

@api_bp.route('/navigation/breadcrumbs')
def api_breadcrumbs():
    """Calculate breadcrumbs for current path."""
    path = request.args.get('path', '/')
    breadcrumbs = calculate_breadcrumbs(path)
    return jsonify(breadcrumbs)

@api_bp.route('/navigation/search')
def api_navigation_search():
    """Search navigation items."""
    query = request.args.get('q', '')
    results = search_navigation(query)
    return jsonify(results)

@api_bp.route('/navigation/sitemap')
def api_sitemap():
    """Generate sitemap for SEO."""
    sitemap = generate_sitemap()
    return jsonify(sitemap)

# ====================
# Helper Functions
# ====================

def get_navigation_structure() -> List[Dict[str, Any]]:
    """Get main navigation structure."""
    return [
        {
            'id': 'home',
            'label': 'Home',
            'href': url_for('main.home'),
            'icon': 'home'
        },
        {
            'id': 'products',
            'label': 'Products',
            'href': url_for('products.product_list'),
            'icon': 'shopping-cart',
            'children': [
                {
                    'label': 'Electronics',
                    'href': url_for('products.product_category', category_slug='electronics')
                },
                {
                    'label': 'Clothing',
                    'href': url_for('products.product_category', category_slug='clothing')
                },
                {
                    'label': 'Books',
                    'href': url_for('products.product_category', category_slug='books')
                }
            ]
        },
        {
            'id': 'about',
            'label': 'About',
            'href': url_for('main.about'),
            'icon': 'info'
        },
        {
            'id': 'contact',
            'label': 'Contact',
            'href': url_for('main.contact'),
            'icon': 'mail'
        }
    ]

def calculate_breadcrumbs(path: str) -> List[Dict[str, Any]]:
    """Calculate breadcrumb trail for given path."""
    breadcrumbs = [
        {'label': 'Home', 'href': '/'}
    ]

    # Parse path and build breadcrumbs
    segments = [s for s in path.split('/') if s]
    current_path = ''

    for i, segment in enumerate(segments):
        current_path += '/' + segment
        is_last = i == len(segments) - 1

        # Look up proper label for segment
        label = get_label_for_segment(segment, current_path)

        breadcrumbs.append({
            'label': label,
            'href': current_path,
            'current': is_last
        })

    return breadcrumbs

def build_product_breadcrumbs(product: Dict[str, Any]) -> List[Dict[str, Any]]:
    """Build breadcrumb trail for product."""
    breadcrumbs = [
        {'label': 'Home', 'href': url_for('main.home')},
        {'label': 'Products', 'href': url_for('products.product_list')}
    ]

    if product.get('category'):
        breadcrumbs.append({
            'label': product['category']['name'],
            'href': url_for('products.product_category',
                          category_slug=product['category']['slug'])
        })

    breadcrumbs.append({
        'label': product['name'],
        'href': url_for('products.product_detail', product_id=product['id']),
        'current': True
    })

    return breadcrumbs

# ====================
# Register Blueprints
# ====================

app.register_blueprint(main_bp)
app.register_blueprint(products_bp)
app.register_blueprint(admin_bp)
app.register_blueprint(api_bp)

# ====================
# Error Handlers
# ====================

@app.errorhandler(404)
def not_found(error):
    """Handle 404 errors with navigation context."""
    if request.path.startswith('/api'):
        return jsonify({'error': 'Not found'}), 404

    return render_template('errors/404.html',
                         navigation=get_navigation_structure()), 404

@app.errorhandler(403)
def forbidden(error):
    """Handle 403 errors."""
    if request.path.startswith('/api'):
        return jsonify({'error': 'Forbidden'}), 403

    return render_template('errors/403.html',
                         navigation=get_navigation_structure()), 403

if __name__ == '__main__':
    app.run(debug=True)

/**
 * Responsive Horizontal Navigation Menu
 *
 * Features:
 * - Responsive design with mobile hamburger menu
 * - Keyboard navigation support
 * - ARIA compliance
 * - Active state management
 * - Dropdown submenus
 */

import React, { useState, useRef, useEffect } from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import './horizontal-menu.css';

interface NavItem {
  id: string;
  label: string;
  href: string;
  children?: NavItem[];
  external?: boolean;
  icon?: React.ReactNode;
}

interface HorizontalMenuProps {
  items: NavItem[];
  logo?: React.ReactNode;
  className?: string;
}

export const HorizontalMenu: React.FC<HorizontalMenuProps> = ({
  items,
  logo,
  className = ''
}) => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
  const [focusedIndex, setFocusedIndex] = useState(-1);
  const menuRef = useRef<HTMLElement>(null);
  const location = useLocation();

  // Close mobile menu on route change
  useEffect(() => {
    setMobileMenuOpen(false);
    setActiveDropdown(null);
  }, [location]);

  // Close dropdowns when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        setActiveDropdown(null);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  // Keyboard navigation
  const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
    switch (e.key) {
      case 'ArrowRight':
        e.preventDefault();
        setFocusedIndex((prev) => (prev + 1) % items.length);
        break;

      case 'ArrowLeft':
        e.preventDefault();
        setFocusedIndex((prev) => (prev - 1 + items.length) % items.length);
        break;

      case 'ArrowDown':
        if (items[index].children) {
          e.preventDefault();
          setActiveDropdown(items[index].id);
        }
        break;

      case 'Escape':
        e.preventDefault();
        setActiveDropdown(null);
        break;

      case 'Enter':
      case ' ':
        if (items[index].children) {
          e.preventDefault();
          setActiveDropdown(
            activeDropdown === items[index].id ? null : items[index].id
          );
        }
        break;

      case 'Home':
        e.preventDefault();
        setFocusedIndex(0);
        break;

      case 'End':
        e.preventDefault();
        setFocusedIndex(items.length - 1);
        break;
    }
  };

  const toggleDropdown = (itemId: string) => {
    setActiveDropdown(activeDropdown === itemId ? null : itemId);
  };

  const renderNavItem = (item: NavItem, index: number) => {
    const hasChildren = item.children && item.children.length > 0;
    const isActive = activeDropdown === item.id;

    if (hasChildren) {
      return (
        <li key={item.id} className="nav-item has-dropdown">
          <button
            className="nav-link dropdown-trigger"
            aria-expanded={isActive}
            aria-haspopup="true"
            aria-controls={`dropdown-${item.id}`}
            onClick={() => toggleDropdown(item.id)}
            onKeyDown={(e) => handleKeyDown(e, index)}
            tabIndex={focusedIndex === index ? 0 : -1}
          >
            {item.icon && <span className="nav-icon">{item.icon}</span>}
            <span>{item.label}</span>
            <svg
              className={`dropdown-arrow ${isActive ? 'open' : ''}`}
              width="12"
              height="8"
              viewBox="0 0 12 8"
              fill="currentColor"
              aria-hidden="true"
            >
              <path d="M1 1l5 5 5-5" stroke="currentColor" strokeWidth="2" fill="none" />
            </svg>
          </button>

          {isActive && (
            <ul
              id={`dropdown-${item.id}`}
              className="dropdown-menu"
              role="menu"
              aria-label={`${item.label} submenu`}
            >
              {item.children.map((child) => (
                <li key={child.id} role="none">
                  {child.external ? (
                    <a
                      href={child.href}
                      className="dropdown-link"
                      role="menuitem"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      {child.label}
                      <span className="sr-only">(opens in new tab)</span>
                    </a>
                  ) : (
                    <NavLink
                      to={child.href}
                      className={({ isActive }) =>
                        `dropdown-link ${isActive ? 'active' : ''}`
                      }
                      role="menuitem"
                    >
                      {child.label}
                    </NavLink>
                  )}
                </li>
              ))}
            </ul>
          )}
        </li>
      );
    }

    return (
      <li key={item.id} className="nav-item">
        {item.external ? (
          <a
            href={item.href}
            className="nav-link"
            target="_blank"
            rel="noopener noreferrer"
            tabIndex={focusedIndex === index ? 0 : -1}
            onKeyDown={(e) => handleKeyDown(e, index)}
          >
            {item.icon && <span className="nav-icon">{item.icon}</span>}
            <span>{item.label}</span>
          </a>
        ) : (
          <NavLink
            to={item.href}
            className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
            tabIndex={focusedIndex === index ? 0 : -1}
            onKeyDown={(e) => handleKeyDown(e, index)}
            aria-current={({ isActive }) => (isActive ? 'page' : undefined)}
          >
            {item.icon && <span className="nav-icon">{item.icon}</span>}
            <span>{item.label}</span>
          </NavLink>
        )}
      </li>
    );
  };

  return (
    <nav
      ref={menuRef}
      className={`horizontal-menu ${className}`}
      aria-label="Main navigation"
    >
      <div className="nav-container">
        {logo && (
          <div className="nav-logo">
            <NavLink to="/" aria-label="Home">
              {logo}
            </NavLink>
          </div>
        )}

        {/* Desktop Navigation */}
        <ul className="nav-list desktop-nav" role="menubar">
          {items.map((item, index) => renderNavItem(item, index))}
        </ul>

        {/* Mobile Menu Toggle */}
        <button
          className={`mobile-menu-toggle ${mobileMenuOpen ? 'open' : ''}`}
          aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={mobileMenuOpen}
          aria-controls="mobile-nav"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        >
          <span className="hamburger">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </button>

        {/* Mobile Navigation */}
        <div
          id="mobile-nav"
          className={`mobile-nav ${mobileMenuOpen ? 'open' : ''}`}
          aria-hidden={!mobileMenuOpen}
        >
          <ul className="nav-list" role="menubar">
            {items.map((item, index) => renderNavItem(item, index))}
          </ul>
        </div>
      </div>
    </nav>
  );
};

// Example usage
export const HorizontalMenuExample: React.FC = () => {
  const navigationItems: NavItem[] = [
    {
      id: 'home',
      label: 'Home',
      href: '/',
      icon: '🏠'
    },
    {
      id: 'products',
      label: 'Products',
      href: '/products',
      icon: '📦',
      children: [
        {
          id: 'electronics',
          label: 'Electronics',
          href: '/products/electronics'
        },
        {
          id: 'clothing',
          label: 'Clothing',
          href: '/products/clothing'
        },
        {
          id: 'books',
          label: 'Books',
          href: '/products/books'
        }
      ]
    },
    {
      id: 'services',
      label: 'Services',
      href: '/services',
      icon: '⚡',
      children: [
        {
          id: 'consulting',
          label: 'Consulting',
          href: '/services/consulting'
        },
        {
          id: 'support',
          label: 'Support',
          href: '/services/support'
        }
      ]
    },
    {
      id: 'about',
      label: 'About',
      href: '/about',
      icon: 'ℹ️'
    },
    {
      id: 'contact',
      label: 'Contact',
      href: '/contact',
      icon: '📧'
    }
  ];

  return (
    <HorizontalMenu
      items={navigationItems}
      logo={<img src="/logo.svg" alt="Company Logo" />}
    />
  );
};

import React, { useState } from 'react';
import { Menu, X, Home, User, Settings, LogOut } from 'lucide-react';

/**
 * Mobile Navigation Example
 *
 * Features:
 * - Hamburger menu toggle
 * - Slide-in drawer navigation
 * - Backdrop overlay
 * - Active link highlighting
 * - Accessible (keyboard navigation, ARIA labels)
 */

interface NavItem {
  label: string;
  href: string;
  icon: React.ReactNode;
}

const navItems: NavItem[] = [
  { label: 'Home', href: '/', icon: <Home size={20} /> },
  { label: 'Profile', href: '/profile', icon: <User size={20} /> },
  { label: 'Settings', href: '/settings', icon: <Settings size={20} /> },
];

export function MobileNavigation() {
  const [isOpen, setIsOpen] = useState(false);
  const [activePath, setActivePath] = useState('/');

  const toggleMenu = () => setIsOpen(!isOpen);

  const handleNavClick = (href: string) => {
    setActivePath(href);
    setIsOpen(false);
  };

  return (
    <>
      {/* Mobile Header */}
      <header
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          height: '60px',
          backgroundColor: '#fff',
          borderBottom: '1px solid #e0e0e0',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '0 16px',
          zIndex: 1000,
        }}
      >
        <h1 style={{ margin: 0, fontSize: '20px', fontWeight: 600 }}>MyApp</h1>

        <button
          onClick={toggleMenu}
          aria-label="Toggle menu"
          aria-expanded={isOpen}
          aria-controls="mobile-menu"
          style={{
            background: 'none',
            border: 'none',
            cursor: 'pointer',
            padding: '8px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          {isOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </header>

      {/* Backdrop Overlay */}
      {isOpen && (
        <div
          onClick={() => setIsOpen(false)}
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            zIndex: 1100,
            animation: 'fadeIn 0.3s ease',
          }}
        />
      )}

      {/* Slide-in Drawer */}
      <nav
        id="mobile-menu"
        role="navigation"
        aria-label="Main navigation"
        style={{
          position: 'fixed',
          top: 0,
          right: 0,
          bottom: 0,
          width: '280px',
          maxWidth: '80vw',
          backgroundColor: '#fff',
          boxShadow: '-2px 0 8px rgba(0, 0, 0, 0.1)',
          transform: isOpen ? 'translateX(0)' : 'translateX(100%)',
          transition: 'transform 0.3s ease',
          zIndex: 1200,
          display: 'flex',
          flexDirection: 'column',
          paddingTop: '80px',
        }}
      >
        {/* Navigation Links */}
        <ul
          style={{
            listStyle: 'none',
            margin: 0,
            padding: '0 16px',
            flex: 1,
          }}
        >
          {navItems.map((item) => {
            const isActive = activePath === item.href;

            return (
              <li key={item.href} style={{ marginBottom: '8px' }}>
                <a
                  href={item.href}
                  onClick={(e) => {
                    e.preventDefault();
                    handleNavClick(item.href);
                  }}
                  aria-current={isActive ? 'page' : undefined}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: '12px',
                    padding: '12px 16px',
                    borderRadius: '8px',
                    textDecoration: 'none',
                    color: isActive ? '#2563eb' : '#333',
                    backgroundColor: isActive ? '#eff6ff' : 'transparent',
                    fontWeight: isActive ? 600 : 400,
                    transition: 'all 0.2s ease',
                  }}
                >
                  {item.icon}
                  {item.label}
                </a>
              </li>
            );
          })}
        </ul>

        {/* Footer Action */}
        <div
          style={{
            borderTop: '1px solid #e0e0e0',
            padding: '16px',
          }}
        >
          <button
            onClick={() => console.log('Logout')}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              width: '100%',
              padding: '12px 16px',
              backgroundColor: 'transparent',
              border: 'none',
              borderRadius: '8px',
              color: '#ef4444',
              fontWeight: 600,
              cursor: 'pointer',
              textAlign: 'left',
            }}
          >
            <LogOut size={20} />
            Logout
          </button>
        </div>
      </nav>

      {/* Inline styles for animations */}
      <style>{`
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
      `}</style>
    </>
  );
}

export default MobileNavigation;