react-vite-themes/dist/pages/Documentation/NavbarDocumentation.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Link } from 'react-router-dom';
import { Navbar } from '../../components/organisms/Navbar';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Card } from '../../components/atoms/Card';
import { Alert } from '../../components/atoms/Alert';
import { Icon } from '../../components/atoms/Icon';
const NavbarDocumentation = () => {
    const navigationLinks = [
        { path: '/home', label: 'Home' },
        { path: '/about', label: 'About' },
        { path: '/services', label: 'Services' },
        { path: '/contact', label: 'Contact' }
    ];
    const handleUserClick = () => {
        alert('User button clicked!');
    };
    return (_jsx("div", { className: "component-documentation", children: _jsxs("div", { className: "container", children: [_jsxs("div", { className: "doc-header", children: [_jsxs(Link, { to: "/documentation", className: "back-link", children: [_jsx(Icon, { name: "arrow-left", size: "sm" }), "Back to Documentation"] }), _jsx("h1", { children: "Navbar Component" }), _jsx("p", { className: "component-description", children: "A responsive navigation bar component with mobile sidebar support, user actions, and customizable branding. Perfect for main site navigation." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { { Navbar } } from '../../components/atoms/Navbar';", language: "typescript" })] }), _jsxs("section", { className: "usage-section", children: [_jsx("h2", { children: "Basic Usage" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: "My App", navigationLinks: navigationLinks, userButtonText: "Login", onUserClick: handleUserClick }) }), _jsx(CodeBlock, { code: `const navigationLinks = [
  { path: '/home', label: 'Home' },
  { path: '/about', label: 'About' },
  { path: '/services', label: 'Services' },
  { path: '/contact', label: 'Contact' }
];

const handleUserClick = () => {
  alert('User button clicked!');
};

<Navbar
  brand="My App"
  navigationLinks={navigationLinks}
  userButtonText="Login"
  onUserClick={handleUserClick}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "variants-section", children: [_jsx("h2", { children: "Variants" }), _jsx("p", { children: "Choose from different visual styles for the navbar." }), _jsxs("div", { className: "variants-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: "Default" }), _jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: "Default", navigationLinks: navigationLinks, variant: "default" }) }), _jsx(CodeBlock, { code: `<Navbar variant="default" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: "Elevated" }), _jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: "Elevated", navigationLinks: navigationLinks, variant: "elevated" }) }), _jsx(CodeBlock, { code: `<Navbar variant="elevated" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: "Glass" }), _jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: "Glass", navigationLinks: navigationLinks, variant: "glass" }) }), _jsx(CodeBlock, { code: `<Navbar variant="glass" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: "Bordered" }), _jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: "Bordered", navigationLinks: navigationLinks, variant: "bordered" }) }), _jsx(CodeBlock, { code: `<Navbar variant="bordered" />`, language: "tsx" })] })] })] }), _jsxs("section", { className: "user-button-section", children: [_jsx("h2", { children: "User Button Configuration" }), _jsx("p", { children: "Customize the user button behavior and mobile placement." }), _jsxs("div", { className: "user-button-examples", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Header User Button" }), _jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: "Header User", navigationLinks: navigationLinks, mobileUserButton: "header", userButtonText: "Profile", userButtonIcon: "user", onUserClick: handleUserClick }) }), _jsx(CodeBlock, { code: `<Navbar
  mobileUserButton="header"
  userButtonText="Profile"
  userButtonIcon="user"
  onUserClick={handleUserClick}
/>`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Sidebar User Button" }), _jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: "Sidebar User", navigationLinks: navigationLinks, mobileUserButton: "sidebar", userButtonText: "Account", userButtonIcon: "settings", onUserClick: handleUserClick }) }), _jsx(CodeBlock, { code: `<Navbar
  mobileUserButton="sidebar"
  userButtonText="Account"
  userButtonIcon="settings"
  onUserClick={handleUserClick}
/>`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Both Header and Sidebar" }), _jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: "Both", navigationLinks: navigationLinks, mobileUserButton: "both", userButtonText: "User", userButtonIcon: "user", onUserClick: handleUserClick }) }), _jsx(CodeBlock, { code: `<Navbar
  mobileUserButton="both"
  userButtonText="User"
  userButtonIcon="user"
  onUserClick={handleUserClick}
/>`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "No User Button" }), _jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: "No User", navigationLinks: navigationLinks, mobileUserButton: "none" }) }), _jsx(CodeBlock, { code: `<Navbar
  mobileUserButton="none"
/>`, language: "tsx" })] })] })] }), _jsxs("section", { className: "active-state-section", children: [_jsx("h2", { children: "Active Navigation State" }), _jsx("p", { children: "The navbar automatically highlights the current page based on the URL." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: "Active States", navigationLinks: [
                                            { path: '/home', label: 'Home' },
                                            { path: '/about', label: 'About' },
                                            { path: '/services', label: 'Services' },
                                            { path: '/contact', label: 'Contact' }
                                        ], userButtonText: "Login", onUserClick: handleUserClick }) }), _jsx(CodeBlock, { code: `// The navbar automatically detects the current route
// and applies the '--active' class to the matching link

<Navbar
  brand="Active States"
  navigationLinks={[
    { path: '/home', label: 'Home' },
    { path: '/about', label: 'About' },
    { path: '/services', label: 'Services' },
    { path: '/contact', label: 'Contact' }
  ]}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "custom-brand-section", children: [_jsx("h2", { children: "Custom Brand" }), _jsx("p", { children: "Use custom content for the brand section." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [_jsx(Icon, { name: "globe", size: "lg", color: "var(--color-primary)" }), _jsx("span", { style: { fontWeight: 'bold', fontSize: '1.25rem' }, children: "MyApp" })] }), navigationLinks: navigationLinks, userButtonText: "Login", onUserClick: handleUserClick }) }), _jsx(CodeBlock, { code: `<Navbar
  brand={
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
      <Icon name="globe" size="lg" color="var(--color-primary)" />
      <span style={{ fontWeight: 'bold', fontSize: '1.25rem' }}>MyApp</span>
    </div>
  }
  navigationLinks={navigationLinks}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "navigation-icons-section", children: [_jsx("h2", { children: "Navigation with Icons" }), _jsx("p", { children: "Create navigation links with icons for better visual hierarchy." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: "Icon Navigation", navigationLinks: [
                                            { path: '/dashboard', label: 'Dashboard' },
                                            { path: '/analytics', label: 'Analytics' },
                                            { path: '/settings', label: 'Settings' },
                                            { path: '/profile', label: 'Profile' }
                                        ], userButtonText: "Account", userButtonIcon: "user", onUserClick: handleUserClick }) }), _jsx(CodeBlock, { code: `// You can enhance navigation links with icons
// by customizing the brand or using custom components

<Navbar
  brand="Icon Navigation"
  navigationLinks={[
    { path: '/dashboard', label: 'Dashboard' },
    { path: '/analytics', label: 'Analytics' },
    { path: '/settings', label: 'Settings' },
    { path: '/profile', label: 'Profile' }
  ]}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "complex-examples-section", children: [_jsx("h2", { children: "Complex Examples" }), _jsx("p", { children: "Real-world navbar implementations." }), _jsxs("div", { className: "complex-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "E-commerce Navbar" }), _jsx("p", { children: "Complete e-commerce navigation with search, categories, and user actions." }), _jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [_jsx(Icon, { name: "shopping-cart", size: "lg", color: "var(--color-primary)" }), _jsx("span", { style: { fontWeight: 'bold', fontSize: '1.25rem' }, children: "ShopStore" })] }), navigationLinks: [
                                                    { path: '/products', label: 'Products' },
                                                    { path: '/categories', label: 'Categories' },
                                                    { path: '/deals', label: 'Deals' },
                                                    { path: '/support', label: 'Support' }
                                                ], userButtonText: "Account", userButtonIcon: "user", onUserClick: handleUserClick }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Dashboard Navbar" }), _jsx("p", { children: "Admin dashboard with user profile and notifications." }), _jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [_jsx(Icon, { name: "activity", size: "lg", color: "var(--color-success)" }), _jsx("span", { style: { fontWeight: 'bold', fontSize: '1.25rem' }, children: "AdminPanel" })] }), navigationLinks: [
                                                    { path: '/dashboard', label: 'Dashboard' },
                                                    { path: '/users', label: 'Users' },
                                                    { path: '/analytics', label: 'Analytics' },
                                                    { path: '/settings', label: 'Settings' }
                                                ], userButtonText: "Admin", userButtonIcon: "settings", onUserClick: handleUserClick }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Minimal Navbar" }), _jsx("p", { children: "Clean and minimal navigation for content-focused sites." }), _jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: "Minimal", navigationLinks: [
                                                    { path: '/home', label: 'Home' },
                                                    { path: '/about', label: 'About' },
                                                    { path: '/contact', label: 'Contact' }
                                                ], mobileUserButton: "none" }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "App Navbar" }), _jsx("p", { children: "Mobile app-style navigation with prominent user actions." }), _jsx("div", { className: "example-content", children: _jsx(Navbar, { brand: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [_jsx(Icon, { name: "smartphone", size: "lg", color: "var(--color-primary)" }), _jsx("span", { style: { fontWeight: 'bold', fontSize: '1.25rem' }, children: "MyApp" })] }), navigationLinks: [
                                                    { path: '/home', label: 'Home' },
                                                    { path: '/messages', label: 'Messages' },
                                                    { path: '/notifications', label: 'Notifications' }
                                                ], userButtonText: "Profile", userButtonIcon: "user", mobileUserButton: "both", onUserClick: handleUserClick }) })] })] })] }), _jsxs("section", { className: "props-section", children: [_jsx("h2", { children: "Props" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "props-card", children: _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "brand" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Brand/logo content to display" })] }), _jsxs("tr", { children: [_jsx("td", { children: "variant" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'default'" }), _jsx("td", { children: "Visual style variant (default, elevated, glass, bordered)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "Size" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Size of the navbar" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isSticky" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Whether the navbar should stick to the top" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isTransparent" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Whether the navbar should be transparent" })] }), _jsxs("tr", { children: [_jsx("td", { children: "mobileUserButton" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'sidebar'" }), _jsx("td", { children: "Mobile user button placement (header, sidebar, both, none)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "onUserClick" }), _jsx("td", { children: "function" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Callback when user button is clicked" })] }), _jsxs("tr", { children: [_jsx("td", { children: "userButtonText" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'User'" }), _jsx("td", { children: "Text for the user button" })] }), _jsxs("tr", { children: [_jsx("td", { children: "userButtonIcon" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'user'" }), _jsx("td", { children: "Icon name for the user button" })] }), _jsxs("tr", { children: [_jsx("td", { children: "userButtonNavigateTo" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Route to navigate to when user button is clicked" })] }), _jsxs("tr", { children: [_jsx("td", { children: "navigationLinks" }), _jsx("td", { children: "Array" }), _jsx("td", { children: "[]" }), _jsx("td", { children: "Array of navigation link objects" })] })] })] }) }) })] }), _jsxs("section", { className: "best-practices-section", children: [_jsx("h2", { children: "Best Practices" }), _jsxs("div", { className: "practices-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u2705 Do" }), _jsxs("ul", { children: [_jsx("li", { children: "Keep navigation links concise and clear" }), _jsx("li", { children: "Use descriptive labels for navigation items" }), _jsx("li", { children: "Include a clear brand/logo for recognition" }), _jsx("li", { children: "Provide accessible user actions" }), _jsx("li", { children: "Test mobile responsiveness thoroughly" }), _jsx("li", { children: "Use consistent iconography" }), _jsx("li", { children: "Ensure proper contrast for readability" }), _jsx("li", { children: "Include proper ARIA labels for accessibility" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u274C Don't" }), _jsxs("ul", { children: [_jsx("li", { children: "Don't overcrowd the navbar with too many items" }), _jsx("li", { children: "Don't use unclear or ambiguous navigation labels" }), _jsx("li", { children: "Don't forget to test on different screen sizes" }), _jsx("li", { children: "Don't use inconsistent styling patterns" }), _jsx("li", { children: "Don't ignore mobile user experience" }), _jsx("li", { children: "Don't use too many different colors" }), _jsx("li", { children: "Don't forget keyboard navigation support" }), _jsx("li", { children: "Don't use overly complex brand elements" })] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The Navbar component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Proper ARIA labels for all interactive elements" }), _jsx("li", { children: "Keyboard navigation support" }), _jsx("li", { children: "Screen reader friendly navigation structure" }), _jsx("li", { children: "Focus management for mobile sidebar" }), _jsx("li", { children: "Semantic HTML structure" }), _jsx("li", { children: "High contrast support for all variants" }), _jsx("li", { children: "Responsive design for all screen sizes" })] })] })] })] }) }));
};
export default NavbarDocumentation;