Instantly share code, notes, and snippets.
Last active
April 11, 2020 17:07
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
-
Save evdama/9de0a32ca0af663ae5b3b15c4d04caed to your computer and use it in GitHub Desktop.
tailwind UI navbar from alpine to svelte... example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| import { authState } from 'rxfire/auth' | |
| import { fade, fly } from 'svelte/transition' | |
| import { onMount } from 'svelte' | |
| import { tuiClassToggle } from 'utils' | |
| import { writable } from 'svelte/store' | |
| import ClickOutside from 'svelte-click-outside' | |
| import EDMDropDown from './EDMDropDown.svelte' | |
| import UserDropDown from './UserDropDown.svelte' | |
| let user$ = writable(true) // TODO: fix the syntax because that is actually a placeholder for the observable below (it's not a store actually) | |
| let openDesktopNav = false | |
| let openMobileNav = false | |
| let toggleDesktopProfile | |
| const closeDesktopNav = () => { openDesktopNav = false } | |
| const toggleDesktopNav = () => { openDesktopNav = !openDesktopNav } | |
| const toggleMobileNav = () => { openMobileNav = !openMobileNav } | |
| onMount( () => { user$ = authState( firebase.auth() ) } ) | |
| </script> | |
| <nav class="rounded-lg shadow bg-three elevation-3"> | |
| <div class="px-4 mx-auto sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex"> | |
| <div class="flex items-center mr-2 -ml-2 md:hidden"> | |
| <button on:click={ toggleMobileNav } class="inline-flex items-center justify-center p-2 transition duration-150 ease-in-out transform rounded-md text-five hover:text-link hover:scale-125 active:scale-125 focus:outline-none focus:text-link"> | |
| <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"> | |
| <path class={ tuiClassToggle(openMobileNav, 'hidden', 'inline-flex') } stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> | |
| <path class={ tuiClassToggle(openMobileNav, 'inline-flex', 'hidden') } stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="flex items-center flex-shrink-0"> | |
| <div class="hover:pulse-once"> | |
| <svg class="mt-1 ml-1 -mb-2 w-14 h-14 sm:mt-2 sm:ml-2 sm:w-16 sm:h-16 md:ml-0 md:mr-4" viewBox="0 0 200 200"><defs><clipPath id="topNav"><path d="M0 226.772h255.118V0H0z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 -70.840132 230.75493)"><path fill="none" stroke="var(--theme-color-bg-five)" stroke-width="var(--stroke-width-fat)" d="M68.8511 156.002c-1.522-1.065-7.133-13.46-.461-28.683M189.502 105.5918c-3.807 3.996-28.166 31.668-59.191 15.658M66.167 89.7471c1.613 1.613 6.002 8.55 19.371 7.12M112.8364 71.2598c2.971 3.496 13.763 13.524 11.15 38.68M147.3643 112.4004c-2.894 3.35-7.446 6.322-15.841 5.845M97.0728 105.6348c1.35 1.881 6.365 10.171 17.84 10.842M90.6899 105.71c-3.621 8.673-10.39 9.927-11.304 10.536M114.8359 145.4668c-27.638 1.537-36.982-16.858-37.68-19.301"/><path fill="var(--theme-color-bg-four)" d="M71.9956 173.0662c-5.082 0-9.2-4.118-9.2-9.199 0-5.081 4.118-9.199 9.2-9.199 5.081 0 9.198 4.118 9.198 9.199 0 5.081-4.117 9.199-9.198 9.199M123.2617 155.0209c-5.082 0-9.201-4.119-9.201-9.2 0-5.081 4.119-9.199 9.201-9.199 5.08 0 9.198 4.118 9.198 9.199 0 5.081-4.118 9.2-9.198 9.2M123.1079 127.4671c-5.082 0-9.201-4.118-9.201-9.199 0-5.08 4.119-9.2 9.201-9.2 5.08 0 9.199 4.12 9.199 9.2 0 5.081-4.119 9.199-9.199 9.199M151.9688 114.4379c-5.082 0-9.199-4.118-9.199-9.2 0-5.08 4.117-9.197 9.199-9.197s9.199 4.117 9.199 9.197c0 5.082-4.117 9.2-9.199 9.2M194.5098 108.6879c-5.082 0-9.201-4.118-9.201-9.2 0-5.08 4.119-9.199 9.201-9.199 5.08 0 9.197 4.119 9.197 9.199 0 5.082-4.117 9.2-9.197 9.2M93.9194 107.181c-5.082 0-9.2-4.117-9.2-9.2 0-5.08 4.118-9.196 9.2-9.196 5.081 0 9.198 4.116 9.198 9.196 0 5.083-4.117 9.2-9.198 9.2M107.8149 73.805c-5.082 0-9.2-4.118-9.2-9.2 0-5.08 4.118-9.199 9.2-9.199 5.08 0 9.198 4.119 9.198 9.199 0 5.082-4.118 9.2-9.198 9.2M62.3301 92.1214c-5.082 0-9.2-4.119-9.2-9.2 0-5.08 4.118-9.199 9.2-9.199 5.08 0 9.197 4.119 9.197 9.199 0 5.081-4.117 9.2-9.197 9.2M71.8545 129.0208c-5.082 0-9.2-4.118-9.2-9.199 0-5.08 4.118-9.199 9.2-9.199 5.081 0 9.198 4.119 9.198 9.199 0 5.081-4.117 9.199-9.198 9.199"/></g></svg> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center"> | |
| <span class="transform hover:rotate-5"><a href="." class="inline-flex items-center px-1 pt-1 text-sm font-semibold leading-5 transform text-five focus:outline-none hover:text-two active:text-eight active:rotate-10">Home</a></span> | |
| <span class="transform hover:rotate-5"><a href="about" class="inline-flex items-center px-1 pt-1 ml-8 text-sm font-semibold leading-5 transform text-five focus:outline-none hover:text-two active:text-eight active:rotate-10">About</a></span> | |
| <span class="transform hover:rotate-5"><a href="stories" class="inline-flex items-center px-1 pt-1 ml-8 text-sm font-semibold leading-5 transform text-five focus:outline-none hover:text-two active:text-eight active:rotate-10">Stories</a></span> | |
| <span class="transform hover:rotate-5"><a href="users" class="inline-flex items-center px-1 pt-1 ml-8 text-sm font-semibold leading-5 transform text-five focus:outline-none hover:text-two active:text-eight active:rotate-10">Users</a></span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| {#if $user$ } | |
| <div class="transform hover:rotate-5 active:scale-125"><a href="signup" class="px-4 py-2 text-sm font-semibold transform border rounded-lg pulse-twice elevation-1 hover:elevation-5 text-five border-two hover:text-two hover:border-four">Sign Up</a></div> | |
| {/if} | |
| </div> | |
| <div class="hidden md:ml-4 md:flex-shrink-0 md:flex md:items-center"> | |
| {#if !$user$ } | |
| <button class="p-1 text-gray-400 transition duration-150 ease-in-out border-2 border-transparent rounded-full hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100"> | |
| <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> | |
| </svg> | |
| </button> | |
| <div class="relative ml-3"> | |
| <button bind:this={ toggleDesktopProfile } on:click={ toggleDesktopNav } class="flex text-sm transition duration-150 ease-in-out border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300"> | |
| <span class="relative inline-block"> | |
| <img class="w-10 h-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" /> | |
| <span class="absolute top-0 right-0 block w-3 h-3 text-white bg-green-400 rounded-full shadow-solid"></span> | |
| </span> | |
| </button> | |
| <ClickOutside on:clickoutside={ closeDesktopNav } exclude={ [toggleDesktopProfile] }> | |
| {#if openDesktopNav } | |
| <div in:fly="{{ x: 900, duration: 500 }}" out:fade={{ duration: 75 }} class="absolute right-0 w-48 mt-2 origin-top-right rounded-md"> | |
| <div class="py-1 bg-white rounded-md elevation-5"> | |
| <a href="." class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100">Your Profile</a> | |
| <a href="." class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100">Settings</a> | |
| <a href="." class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100">Sign out</a> | |
| </div> | |
| </div> | |
| {/if} | |
| </ClickOutside> | |
| </div> | |
| {/if} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class={ tuiClassToggle(openMobileNav, 'block', 'hidden') + "md:hidden" } > | |
| <div class="px-2 pt-2 pb-3 max-w-mobilenav"> | |
| <div class="transform hover:rotate-5 active:text-xl"><a href="." class="block py-2 pl-3 pr-4 text-base font-semibold transition duration-150 ease-in-out transform text-five hover:text-two focus:outline-none active:text-eight active:rotate-10 sm:pl-5 sm:pr-6">Home</a></div> | |
| <div class="transform hover:rotate-5 active:text-xl"><a href="about" class="block py-2 pl-3 pr-4 mt-1 text-base font-semibold transition duration-150 ease-in-out transform text-five hover:text-two focus:outline-none active:text-eight active:rotate-10 sm:pl-5 sm:pr-6">About</a></div> | |
| <div class="transform hover:rotate-5 active:text-xl"><a href="stories" class="block py-2 pl-3 pr-4 mt-1 text-base font-semibold transition duration-150 ease-in-out transform text-five hover:text-two focus:outline-none active:text-eight active:rotate-10 sm:pl-5 sm:pr-6">Stories</a></div> | |
| <div class="transform hover:rotate-5 active:text-xl"><a href="users" class="block py-2 pl-3 pr-4 mt-1 text-base font-semibold transition duration-150 ease-in-out transform text-five hover:text-two focus:outline-none active:text-eight active:rotate-10 sm:pl-5 sm:pr-6">Users</a></div> | |
| </div> | |
| {#if $user$ } | |
| <div class="pt-4 pb-3 border-t border-gray-200"> | |
| <div class="flex items-center px-4 sm:px-6"> | |
| <div class="flex-shrink-0"> | |
| <img class="w-10 h-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" /> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-base font-medium leading-6 text-gray-800">Tom Cook</div> | |
| <div class="text-sm font-medium leading-5 text-gray-500">[email protected]</div> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <a href="." class="block px-4 py-2 text-base font-medium text-gray-500 transition duration-150 ease-in-out hover:text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-gray-800 focus:bg-gray-100 sm:px-6">Your Profile</a> | |
| <a href="." class="block px-4 py-2 mt-1 text-base font-medium text-gray-500 transition duration-150 ease-in-out hover:text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-gray-800 focus:bg-gray-100 sm:px-6">Settings</a> | |
| <a href="." class="block px-4 py-2 mt-1 text-base font-medium text-gray-500 transition duration-150 ease-in-out hover:text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-gray-800 focus:bg-gray-100 sm:px-6">Sign out</a> | |
| </div> | |
| </div> | |
| {/if} | |
| </div> | |
| </nav> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment