Skip to content

Commit

Permalink
Updated Navbar code with the dark - light theme decision
Browse files Browse the repository at this point in the history
  • Loading branch information
@angeldevildev
angeldevildev committed Sep 17, 2024
1 parent 672d8ef commit 2279fb3
Showing 1 changed file with 37 additions and 21 deletions.
58 changes: 37 additions & 21 deletions content/docs/Components/Sections/navbar.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,18 @@ import Navbar from '../../../../app/Components/Sections/Navbar';

## Component

<StyledContainer code={`"use client"
<StyledContainer code={`'use client'
import { useState, useEffect, useRef } from 'react'
import { Menu, Search, X } from 'lucide-react'
import { Menu, Search, X, Sun, Moon } from 'lucide-react'
import Link from 'next/link'
import { useTheme } from './ThemeContext'
export default function Navbar() {
const [isSearchOpen, setIsSearchOpen] = useState(false)
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
const mobileMenuRef = useRef<HTMLDivElement>(null)
const { theme, toggleTheme } = useTheme()
const toggleSearch = () => setIsSearchOpen(!isSearchOpen)
const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen)
Expand All @@ -41,12 +44,12 @@ export default function Navbar() {
]
return (
<nav className="bg-white shadow-sm rounded-xl">
<nav className="bg-white dark:bg-gray-800 shadow-sm rounded-xl transition-colors duration-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<Link href="/" className="flex-shrink-0" prefetch={false}>
<svg className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="h-8 w-8 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</Link>
Expand All @@ -56,7 +59,7 @@ export default function Navbar() {
<Link
key={item.name}
href={item.href}
className="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors no-underline"
prefetch={false}
>
{item.name}
Expand All @@ -65,28 +68,33 @@ export default function Navbar() {
</div>
</div>
</div>
<div className="hidden md:flex items-center">
<div className="hidden md:flex items-center space-x-4">
<div className="relative flex items-center">
<input
type="search"
placeholder="Search..."
className={\`px-3 py-2 pr-10 rounded-md text-sm bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 ease-in-out text-gray-900 \${
isSearchOpen ? 'w-64 opacity-100' : 'w-0 opacity-0'
}\`}
className={\`px-3 py-2 pr-10 rounded-md text-sm bg-gray-100 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 ease-in-out \${isSearchOpen ? 'w-64 opacity-100' : 'w-0 opacity-0'}\`}
/>
<button
onClick={toggleSearch}
className="p-2 rounded-md text-gray-600 hover:text-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 absolute right-0"
className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 absolute right-0"
aria-label="Search"
>
<Search className="h-5 w-5" />
</button>
</div>
<button
onClick={toggleTheme}
className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
aria-label={\`Switch to \${theme === 'light' ? 'dark' : 'light'} mode\`}
>
{theme === 'light' ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
</button>
</div>
<div className="md:hidden">
<button
onClick={toggleMobileMenu}
className="p-2 rounded-md text-gray-600 hover:text-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
aria-label="Open menu"
>
<Menu className="h-5 w-5" />
Expand All @@ -97,20 +105,19 @@ export default function Navbar() {
{/* Mobile menu */}
<div
className={\`fixed inset-y-0 right-0 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out \${
isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'
} z-50\`}
ref={mobileMenuRef}
className={\`fixed inset-y-0 right-0 w-64 bg-white dark:bg-gray-800 shadow-lg transform transition-transform duration-300 ease-in-out \${isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'} z-50\`}
>
<div className="p-6">
<div className="flex items-center justify-between mb-8">
<Link href="/" className="flex-shrink-0" prefetch={false}>
<svg className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="h-8 w-8 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</Link>
<button
onClick={toggleMobileMenu}
className="p-2 rounded-md text-gray-600 hover:text-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
aria-label="Close menu"
>
<X className="h-5 w-5" />
Expand All @@ -121,28 +128,37 @@ export default function Navbar() {
<Link
key={item.name}
href={item.href}
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition-colors"
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors no-underline"
prefetch={false}
>
{item.name}
</Link>
))}
</nav>
<div className="mt-6">
<div className="mt-6 space-y-4">
<div className="relative">
<input
type="search"
placeholder="Search..."
className="w-full px-3 py-2 rounded-md text-sm bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
className="w-full px-3 py-2 rounded-md text-sm bg-gray-100 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<Search className="absolute right-3 top-2.5 h-4 w-4 text-gray-400" />
<Search className="absolute right-3 top-2.5 h-4 w-4 text-gray-400 dark:text-gray-500" />
</div>
<button
onClick={toggleTheme}
className="w-full p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center justify-center"
aria-label={\`Switch to \${theme === 'light' ? 'dark' : 'light'} mode\`}
>
{theme === 'light' ? <Moon className="h-5 w-5 mr-2" /> : <Sun className="h-5 w-5 mr-2" />}
{theme === 'light' ? 'Dark Mode' : 'Light Mode'}
</button>
</div>
</div>
</div>
</nav>
)
}`}>
}
`}>
<Navbar />
</StyledContainer>

Expand Down

0 comments on commit 2279fb3

Please sign in to comment.