penguinui is now in the root dir in penguinui-components/
This commit is contained in:
Priec
69
penguinui-components/navbar/with-search.html
Normal file
69
penguinui-components/navbar/with-search.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<nav x-data="{ mobileMenuIsOpen: false }" x-on:click.away="mobileMenuIsOpen = false" class="flex items-center justify-between gap-4 px-6 py-4" aria-label="penguin ui menu">
|
||||
<!-- Brand Logo -->
|
||||
<a href="#" class="text-2xl font-bold text-on-surface dark:text-on-surface-dark">
|
||||
<span>Peng<span class="text-primary dark:text-primary-dark">ui</span>n</span>
|
||||
<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
|
||||
</a>
|
||||
<!-- Search -->
|
||||
<div class="relative flex mr-auto w-full max-w-64 flex-col gap-1 text-on-surface dark:text-on-surface-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="absolute left-2.5 top-1/2 size-5 -translate-y-1/2 text-on-surface/50 dark:text-on-surface-dark/50">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
||||
</svg>
|
||||
<input type="search" name="search" placeholder="Search" aria-label="search" class="w-full rounded-radius border border-outline bg-surface-alt py-2.5 pl-10 pr-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:focus-visible:outline-primary-dark" />
|
||||
</div>
|
||||
<!-- Desktop Menu -->
|
||||
<ul class="hidden items-center gap-4 shrink-0 sm:flex">
|
||||
<li><a href="#" class="font-bold text-black underline-offset-2 hover:text-primary focus:outline-hidden focus:underline dark:text-white dark:hover:text-primary" aria-current="page">Products</a></li>
|
||||
<li><a href="#" class="font-medium text-neutral-600 underline-offset-2 hover:text-primary focus:outline-hidden focus:underline dark:text-neutral-300 dark:hover:text-primary">Pricing</a></li>
|
||||
<li><a href="#" class="font-medium text-neutral-600 underline-offset-2 hover:text-primary focus:outline-hidden focus:underline dark:text-neutral-300 dark:hover:text-primary">Blog</a></li>
|
||||
<!-- User Pic -->
|
||||
<li x-data="{ userDropDownIsOpen: false, openWithKeyboard: false }" x-on:keydown.esc.window="userDropDownIsOpen = false, openWithKeyboard = false" class="relative flex items-center">
|
||||
<button x-on:click="userDropDownIsOpen = ! userDropDownIsOpen" x-bind:aria-expanded="userDropDownIsOpen" x-on:keydown.space.prevent="openWithKeyboard = true" x-on:keydown.enter.prevent="openWithKeyboard = true" x-on:keydown.down.prevent="openWithKeyboard = true" class="rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:focus-visible:outline-primary-dark" aria-controls="userMenu">
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class="size-10 rounded-full object-cover" />
|
||||
</button>
|
||||
<!-- User Dropdown -->
|
||||
<ul x-cloak x-show="userDropDownIsOpen || openWithKeyboard" x-transition.opacity x-trap="openWithKeyboard" x-on:click.outside="userDropDownIsOpen = false, openWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" id="userMenu" class="absolute right-0 top-12 flex w-fit min-w-48 flex-col overflow-hidden rounded-radius border border-outline bg-surface-alt py-1.5 dark:border-outline-dark dark:bg-surface-dark-alt">
|
||||
<li class="border-b border-outline dark:border-outline-dark">
|
||||
<div class="flex flex-col px-4 py-2">
|
||||
<span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">Alice Brown</span>
|
||||
<p class="text-xs text-on-surface dark:text-on-surface-dark">alice.brown@gmail.com</p>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="#" class="block bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark">Dashboard</a></li>
|
||||
<li><a href="#" class="block bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark">Subscription</a></li>
|
||||
<li><a href="#" class="block bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark">Settings</a></li>
|
||||
<li><a href="#" class="block bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark">Sign Out</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Mobile Menu Button -->
|
||||
<button x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen" x-bind:aria-expanded="mobileMenuIsOpen" x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button" class="flex text-on-surface dark:text-on-surface-dark sm:hidden" aria-label="mobile menu" aria-controls="mobileMenu">
|
||||
<svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
<svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Mobile Menu -->
|
||||
<ul x-cloak x-show="mobileMenuIsOpen" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-out duration-300" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" class="fixed max-h-svh overflow-y-auto inset-x-0 top-0 z-10 flex flex-col rounded-b-radius border-b border-outline bg-surface-alt px-8 pb-6 pt-10 dark:border-outline-dark dark:bg-surface-dark-alt sm:hidden">
|
||||
<li class="mb-4 border-none">
|
||||
<div class="flex items-center gap-2 py-2">
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class="size-12 rounded-full object-cover" />
|
||||
<div>
|
||||
<span class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">Alice Brown</span>
|
||||
<p class="text-sm text-on-surface dark:text-on-surface-dark">alice.brown@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="p-2"><a href="#" class="w-full text-lg font-bold text-black focus:underline dark:text-white" aria-current="page">Products</a></li>
|
||||
<li class="p-2"><a href="#" class="w-full text-lg font-medium text-neutral-600 focus:underline dark:text-neutral-300">Pricing</a></li>
|
||||
<li class="p-2"><a href="#" class="w-full text-lg font-medium text-neutral-600 focus:underline dark:text-neutral-300">Blog</a></li>
|
||||
<hr role="none" class="my-2 border-outline dark:border-outline-dark">
|
||||
<li class="p-2"><a href="#" class="w-full text-on-surface focus:underline dark:text-on-surface-dark">Dashboard</a></li>
|
||||
<li class="p-2"><a href="#" class="w-full text-on-surface focus:underline dark:text-on-surface-dark">Subscription</a></li>
|
||||
<li class="p-2"><a href="#" class="w-full text-on-surface focus:underline dark:text-on-surface-dark">Settings</a></li>
|
||||
<!-- CTA Button -->
|
||||
<li class="mt-4 w-full border-none"><a href="#" class="rounded-radius bg-primary border border-primary px-4 py-2 block text-center font-medium tracking-wide text-on-primary hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark dark:border-primary-dark">Sign Out</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
Reference in New Issue
Block a user