135 lines
13 KiB
HTML
135 lines
13 KiB
HTML
<div x-data="{ sidebarIsOpen: false }" x-on:click.outside="sidebarIsOpen = false" x-on:keydown.esc.window="sidebarIsOpen = false">
|
|
<!-- toggle button -->
|
|
<button class="fixed bottom-4 right-4 z-10 rounded-full bg-primary p-4 text-on-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark" x-on:click="sidebarIsOpen = ! sidebarIsOpen">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.5" class="size-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
|
|
</svg>
|
|
<span class="sr-only">sidenav toggle</span>
|
|
</button>
|
|
|
|
<nav x-cloak x-show="sidebarIsOpen" x-trap="sidebarIsOpen" class="fixed right-0 z-20 flex h-svh w-80 shrink-0 flex-col border-l border-outline bg-surface-alt p-4 transition-transform duration-300 dark:border-outline-dark dark:bg-surface-dark-alt" aria-label="shopping cart" x-transition:enter="transition duration-200 ease-out" x-transition:enter-end="translate-x-0" x-transition:enter-start=" translate-x-80" x-transition:leave="transition ease-in duration-200 " x-transition:leave-end="translate-x-80" x-transition:leave-start="translate-x-0">
|
|
<!-- sidebar header -->
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-lg font-medium text-on-surface-strong dark:text-on-surface-dark-strong">Your Cart</h3>
|
|
<button class="text-on-surface dark:text-on-surface-dark" x-on:click="sidebarIsOpen = false">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.5" class="size-6" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
|
|
</svg>
|
|
<span class="sr-only">close sidebar</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- menu items -->
|
|
<div class="flex flex-col gap-2 overflow-y-auto py-4">
|
|
<!-- products -->
|
|
<div class="flex flex-col divide-y divide-outline dark:divide-outline-dark">
|
|
<!-- product card -->
|
|
<div class="flex justify-between gap-4 py-4">
|
|
<img src="https://res.cloudinary.com/ds8pgw1pf/image/upload/v1730561465/penguinui/component-assets/products/BeatsStudioPro.webp" class="size-20 object-cover rounded-radius" alt="Beats Studio Pro"/>
|
|
<div class="mr-auto flex flex-col gap-2">
|
|
<p class="text-sm font-bold leading-4 text-on-surface-strong dark:text-on-surface-dark-strong">Beats Studio Pro</p>
|
|
<p class="text-xs leading-4 text-on-surface dark:text-on-surface-dark">Color: Black</p>
|
|
<!-- counter -->
|
|
<div class="mt-auto flex flex-col gap-1">
|
|
<label for="counterInput1" class="sr-only">quantity</label>
|
|
<div class="flex items-center">
|
|
<button type="button" class="flex h-6 items-center justify-center border border-outline rounded-l-radius bg-surface-alt px-2 py-2 text-on-surface hover:opacity-75 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" aria-label="subtract">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2.5" class="size-4" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<input id="counterInput1" type="text" class="border-x-none h-6 w-10 border-outline bg-surface-alt/50 text-center text-on-surface-strong focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark border-y" value="1" readonly/>
|
|
|
|
<button type="button" class="flex h-6 items-center justify-center border-outline rounded-r-radius bg-surface-alt px-2 py-2 text-on-surface hover:opacity-75 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:outline-primary-dark border" aria-label="add">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2.5" class="size-4" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="sr-only">item price</span>
|
|
<p class="text-sm font-bold text-on-surface dark:text-on-surface-dark">$169</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- product card -->
|
|
<div class="flex justify-between gap-4 py-4">
|
|
<img src="https://res.cloudinary.com/ds8pgw1pf/image/upload/v1730561465/penguinui/component-assets/products/PS5Pro.webp" class="size-20 object-cover rounded-radius" alt="Playstation 5 Pro"/>
|
|
<div class="mr-auto flex flex-col gap-2">
|
|
<p class="text-sm font-bold leading-4 text-on-surface-strong dark:text-on-surface-dark-strong">Playstation 5 Pro</p>
|
|
<p class="text-xs leading-4 text-on-surface dark:text-on-surface-dark">Strorage: 2TB</p>
|
|
<!-- counter -->
|
|
<div class="mt-auto flex flex-col gap-1">
|
|
<label for="counterInput2" class="sr-only">quantity</label>
|
|
<div class="flex items-center">
|
|
<button type="button" class="flex h-6 items-center justify-center border border-outline rounded-l-radius bg-surface-alt px-2 py-2 text-on-surface hover:opacity-75 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" aria-label="subtract">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2.5" class="size-4" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<input id="counterInput2" type="text" class="border-x-none h-6 w-10 border-outline bg-surface-alt/50 text-center text-on-surface-strong focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark border-y" value="1" readonly/>
|
|
|
|
<button type="button" class="flex h-6 items-center justify-center border-outline rounded-r-radius bg-surface-alt px-2 py-2 text-on-surface hover:opacity-75 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:outline-primary-dark border" aria-label="add">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2.5" class="size-4" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="sr-only">item price</span>
|
|
<p class="text-sm font-bold text-on-surface dark:text-on-surface-dark">$699</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- sidebar footer -->
|
|
<div class="mt-auto">
|
|
<div class="divide-y divide-outline dark:divide-outline-dark" >
|
|
<div class="flex items-center justify-between py-2 text-xs font-medium text-on-surface dark:text-on-surface-dark">
|
|
<span>Sub total</span>
|
|
<span>$868</span>
|
|
</div>
|
|
<div class="flex items-center justify-between py-2 text-xs font-medium text-on-surface dark:text-on-surface-dark">
|
|
<span>Tax</span>
|
|
<span>$56</span>
|
|
</div>
|
|
<div class="flex items-center justify-between py-2 text-sm font-bold text-on-surface dark:text-on-surface-dark">
|
|
<span>Total</span>
|
|
<span>$924</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button type="button" class="mt-2 flex w-full rounded-radius border border-primary dark:border-primary-dark items-center justify-center gap-2 whitespace-nowrap bg-primary px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">
|
|
<span>Checkout</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="size-4" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="mt-2 flex w-full rounded-radius border border-black dark:border-white items-center justify-center gap-2 whitespace-nowrap bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-white transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-white dark:text-black dark:focus-visible:outline-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4" aria-hidden="true">
|
|
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282"/>
|
|
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282"/>
|
|
</svg>
|
|
<span class="sr-only">Pay with apple</span>
|
|
<span>Pay</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- page content -->
|
|
<div class="p-8 min-h-svh bg-surface dark:bg-surface-dark">
|
|
<div>
|
|
<!-- content goes here -->
|
|
</div>
|
|
</div>
|
|
|