Enhance mobile menu with new sub-pages and improved layout
Update mobile navigation in multiple pages (FolxStadlPage, GeschichteLiedPage, GipfelstammtischPage, VideoPage, home.tsx) to include new sub-pages and refine the visual presentation. The changes introduce a "Navigation" section with categorized links and improved styling for better usability on mobile devices. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/2xHHKQn
This commit is contained in:
sebastjanartic
parent
812175305f
commit
3d8ed65c92
@ -122,51 +122,61 @@ export default function FolxStadlPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu dropdown - kompakten */}
|
||||
{/* Mobile menu dropdown */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
|
||||
<div className="px-4 py-3">
|
||||
<nav className="flex flex-col space-y-3 mb-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/folx-stadl"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<Link
|
||||
href="/geschichte-lied"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
</Link>
|
||||
<Link
|
||||
href="/gipfelstammtisch"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="px-6 py-4">
|
||||
{/* Navigation Section */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-white text-xs font-semibold uppercase tracking-wider mb-3 opacity-70">Navigation</h3>
|
||||
<nav className="flex flex-col space-y-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/folx-stadl"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<Link
|
||||
href="/geschichte-lied"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
</Link>
|
||||
<Link
|
||||
href="/gipfelstammtisch"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Mobile search - manjši */}
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white border border-gray-300 rounded-lg px-3 py-2 pl-9 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
|
||||
/>
|
||||
<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
{/* Separator */}
|
||||
<div className="border-t border-white/10 mb-4"></div>
|
||||
|
||||
{/* Search Section */}
|
||||
<div>
|
||||
<h3 className="text-white text-xs font-semibold uppercase tracking-wider mb-3 opacity-70">Suchen</h3>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -127,47 +127,58 @@ export default function GeschichteLiedPage() {
|
||||
{/* Mobile menu dropdown */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
|
||||
<div className="px-4 py-3">
|
||||
<nav className="flex flex-col space-y-3 mb-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/folx-stadl"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<Link
|
||||
href="/geschichte-lied"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
</Link>
|
||||
<Link
|
||||
href="/gipfelstammtisch"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="px-6 py-4">
|
||||
{/* Navigation Section */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-white text-xs font-semibold uppercase tracking-wider mb-3 opacity-70">Navigation</h3>
|
||||
<nav className="flex flex-col space-y-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/folx-stadl"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<Link
|
||||
href="/geschichte-lied"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
</Link>
|
||||
<Link
|
||||
href="/gipfelstammtisch"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="relative mt-3">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
{/* Separator */}
|
||||
<div className="border-t border-white/10 mb-4"></div>
|
||||
|
||||
{/* Search Section */}
|
||||
<div>
|
||||
<h3 className="text-white text-xs font-semibold uppercase tracking-wider mb-3 opacity-70">Suchen</h3>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -127,47 +127,58 @@ export default function GipfelstammtischPage() {
|
||||
{/* Mobile menu dropdown */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
|
||||
<div className="px-4 py-3">
|
||||
<nav className="flex flex-col space-y-3 mb-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/folx-stadl"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<Link
|
||||
href="/geschichte-lied"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
</Link>
|
||||
<Link
|
||||
href="/gipfelstammtisch"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="px-6 py-4">
|
||||
{/* Navigation Section */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-white text-xs font-semibold uppercase tracking-wider mb-3 opacity-70">Navigation</h3>
|
||||
<nav className="flex flex-col space-y-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/folx-stadl"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<Link
|
||||
href="/geschichte-lied"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
</Link>
|
||||
<Link
|
||||
href="/gipfelstammtisch"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white border border-gray-300 rounded-lg px-3 py-2 pl-9 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
|
||||
/>
|
||||
<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
{/* Separator */}
|
||||
<div className="border-t border-white/10 mb-4"></div>
|
||||
|
||||
{/* Search Section */}
|
||||
<div>
|
||||
<h3 className="text-white text-xs font-semibold uppercase tracking-wider mb-3 opacity-70">Suchen</h3>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -304,47 +304,58 @@ export default function VideoPage() {
|
||||
{/* Mobile menu dropdown - kompakten */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
|
||||
<div className="px-4 py-3">
|
||||
<nav className="flex flex-col space-y-3 mb-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/folx-stadl"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<Link
|
||||
href="/geschichte-lied"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
</Link>
|
||||
<Link
|
||||
href="/gipfelstammtisch"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="px-6 py-4">
|
||||
{/* Navigation Section */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-white text-xs font-semibold uppercase tracking-wider mb-3 opacity-70">Navigation</h3>
|
||||
<nav className="flex flex-col space-y-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/folx-stadl"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<Link
|
||||
href="/geschichte-lied"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
</Link>
|
||||
<Link
|
||||
href="/gipfelstammtisch"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white border border-gray-300 rounded-lg px-3 py-2 pl-9 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
|
||||
/>
|
||||
<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
{/* Separator */}
|
||||
<div className="border-t border-white/10 mb-4"></div>
|
||||
|
||||
{/* Search Section */}
|
||||
<div>
|
||||
<h3 className="text-white text-xs font-semibold uppercase tracking-wider mb-3 opacity-70">Suchen</h3>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -130,47 +130,58 @@ export default function Home() {
|
||||
{/* Mobile menu dropdown */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
|
||||
<div className="px-4 py-3">
|
||||
<nav className="flex flex-col space-y-3 mb-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/folx-stadl"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<Link
|
||||
href="/geschichte-lied"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
</Link>
|
||||
<Link
|
||||
href="/gipfelstammtisch"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="px-6 py-4">
|
||||
{/* Navigation Section */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-white text-xs font-semibold uppercase tracking-wider mb-3 opacity-70">Navigation</h3>
|
||||
<nav className="flex flex-col space-y-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/folx-stadl"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<Link
|
||||
href="/geschichte-lied"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
</Link>
|
||||
<Link
|
||||
href="/gipfelstammtisch"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white border border-gray-300 rounded-lg px-3 py-2 pl-9 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
|
||||
/>
|
||||
<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
{/* Separator */}
|
||||
<div className="border-t border-white/10 mb-4"></div>
|
||||
|
||||
{/* Search Section */}
|
||||
<div>
|
||||
<h3 className="text-white text-xs font-semibold uppercase tracking-wider mb-3 opacity-70">Suchen</h3>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user