Initial commit

2025-11-30 09:05:04 +08:00
commit 7afdd6601b
69 changed files with 9552 additions and 0 deletions
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -0,0 +1,164 @@
+- Home
+- Components
+- Navbar
+
+# Navbar
+
+The Navbar component provides a consistent navigation experience across your application. It includes built-in support for search, theme switching, and mobile responsiveness.
+
+## Props
+
+
+Prop	Type	Default	Description
+title	string	-	The title/logo text to display
+onSearch	(query: string) => void	-	Callback function for search
+showThemeToggle	boolean	false	Whether to show the theme toggle
+currentTheme	'light' | 'dark' | 'auto'	-	Current theme state
+onThemeChange	(theme: string) => void	-	Callback for theme changes
+
+## Overview
+
+The Navbar is a top-level navigation component that typically contains the application logo, navigation links, search functionality, and user controls like theme switching.
+
+## Features
+
+- Responsive Design: Automatically adapts to mobile and desktop
+- Theme Switching: Built-in light/dark mode toggle
+- Search Integration: Optional search functionality
+- Customizable: Easy to customize with props
+
+## Basic Usage
+
+```
+import { Navbar } from '@vuer-ai/vuer-uikit';
+
+function App() {
+  return (
+    <Navbar title="My Application" />
+  );
+}
+```
+
+## With Search
+
+```
+import { Navbar } from '@vuer-ai/vuer-uikit';
+
+function App() {
+  const handleSearch = (query) => {
+    console.log('Search query:', query);
+  };
+
+  return (
+    <Navbar
+      title="My Application"
+      onSearch={handleSearch}
+    />
+  );
+}
+```
+
+## With Theme Toggle
+
+```
+import { Navbar } from '@vuer-ai/vuer-uikit';
+
+function App() {
+  return (
+    <Navbar
+      title="My Application"
+      showThemeToggle={true}
+    />
+  );
+}
+```
+
+## API Reference
+
+### Examples
+
+#### Basic Navbar
+
+```
+<Navbar title="My App" />
+```
+
+#### Navbar with Search
+
+```
+<Navbar
+  title="My App"
+  onSearch={(query) => {
+    // Handle search
+    console.log('Searching for:', query);
+  }}
+/>
+```
+
+#### Navbar with Theme Toggle
+
+```
+<Navbar
+  title="My App"
+  showThemeToggle={true}
+  currentTheme="light"
+  onThemeChange={(theme) => {
+    // Handle theme change
+    console.log('Theme changed to:', theme);
+  }}
+/>
+```
+
+## Mobile Behavior
+
+On mobile devices, the navbar automatically adapts:
+
+- Search bar collapses into a mobile-friendly interface
+- Theme toggle remains accessible
+- Touch targets are appropriately sized
+- Responsive breakpoints ensure good UX
+
+## Customization
+
+### Styling
+
+You can customize the navbar appearance using CSS custom properties:
+
+```
+.vuer-navbar {
+  --navbar-bg: var(--neutral-50);
+  --navbar-border: var(--neutral-200);
+  --navbar-height: 4rem;
+  --navbar-padding: 1rem;
+}
+```
+
+### Custom Content
+
+For more complex navigation needs, you can extend the navbar with custom content:
+
+```
+<Navbar title="My App">
+  <div className="custom-nav-content">
+    <a href="/dashboard">Dashboard</a>
+    <a href="/profile">Profile</a>
+  </div>
+</Navbar>
+```
+
+## Accessibility
+
+- Proper semantic HTML structure
+- Keyboard navigation support
+- Screen reader announcements
+- Focus management
+- ARIA labels and descriptions
+
+## Best Practices
+
+- Keep the title concise and recognizable
+- Provide meaningful search functionality
+- Use theme toggle for better user experience
+- Ensure mobile responsiveness
+- Test with keyboard navigation
+