-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
build : Created the NavBar file and the style for the component
- Loading branch information
1 parent
95a6bac
commit 15fc16e
Showing
1 changed file
with
223 additions
and
0 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,223 @@ | ||
| <script setup> | ||
| import logo from "@/assets/images/logo-black.svg"; | ||
| </script> | ||
|
|
||
| <template> | ||
| <nav | ||
| class="bg-var secondaryDarker border-gray-200 dark:bg-gray-900 dark:border-gray-700" | ||
| > | ||
| <div | ||
| class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4" | ||
| > | ||
| <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse"> | ||
| <img :src="logo" class="h-20" alt="Nei analytics market Logo" /> | ||
| <span | ||
| class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white" | ||
| >NEI MARKET ANALYTICS</span | ||
| > | ||
| </a> | ||
| <button | ||
| data-collapse-toggle="navbar-dropdown" | ||
| type="button" | ||
| class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" | ||
| aria-controls="navbar-dropdown" | ||
| aria-expanded="false" | ||
| > | ||
| <span class="sr-only">Explore</span> | ||
| <svg | ||
| class="w-5 h-5" | ||
| aria-hidden="true" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 17 14" | ||
| > | ||
| <path | ||
| stroke="currentColor" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="2" | ||
| d="M1 1h15M1 7h15M1 13h15" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| <div class="hidden w-full md:block md:w-auto" id="navbar-dropdown"> | ||
| <ul | ||
| class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700" | ||
| > | ||
| <li> | ||
| <a | ||
| href="#" | ||
| class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent" | ||
| aria-current="page" | ||
| >Home</a | ||
| > | ||
| </li> | ||
| <li> | ||
| <button | ||
| id="dropdownNavbarLink" | ||
| data-dropdown-toggle="dropdownNavbar" | ||
| class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent" | ||
| > | ||
| Criptos | ||
| <svg | ||
| class="w-2.5 h-2.5 ms-2.5" | ||
| aria-hidden="true" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 10 6" | ||
| > | ||
| <path | ||
| stroke="currentColor" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="2" | ||
| d="m1 1 4 4 4-4" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| <!-- Dropdown menu --> | ||
| <div | ||
| id="dropdownNavbar" | ||
| class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600" | ||
| > | ||
| <ul | ||
| class="py-2 text-sm text-gray-700 dark:text-gray-400" | ||
| aria-labelledby="dropdownLargeButton" | ||
| > | ||
| <li> | ||
| <a | ||
| href="#" | ||
| class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" | ||
| >Analytics</a | ||
| > | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="#" | ||
| class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" | ||
| >Negotiations</a | ||
| > | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="#" | ||
| class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" | ||
| >falls</a | ||
| > | ||
| </li> | ||
| </ul> | ||
| <div class="py-1"> | ||
| <a | ||
| href="#" | ||
| class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white" | ||
| >Sign out</a | ||
| > | ||
| </div> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="#" | ||
| class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" | ||
| >Currency Quote</a | ||
| > | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="#" | ||
| class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" | ||
| >Favorites</a | ||
| > | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="#" | ||
| class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" | ||
| >Buy me a coffe</a | ||
| > | ||
| </li> | ||
| <li> | ||
| <div class="flex md:order-2"> | ||
| <button | ||
| type="button" | ||
| data-collapse-toggle="navbar-search" | ||
| aria-controls="navbar-search" | ||
| aria-expanded="false" | ||
| class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 me-1" | ||
| > | ||
| <svg | ||
| class="w-5 h-5" | ||
| aria-hidden="true" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 20 20" | ||
| > | ||
| <path | ||
| stroke="currentColor" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="2" | ||
| d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" | ||
| /> | ||
| </svg> | ||
| <span class="sr-only">Search</span> | ||
| </button> | ||
| <div class="relative hidden md:block"> | ||
| <div | ||
| class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none" | ||
| > | ||
| <svg | ||
| class="w-4 h-4 text-gray-500 dark:text-gray-400" | ||
| aria-hidden="true" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 20 20" | ||
| > | ||
| <path | ||
| stroke="currentColor" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="2" | ||
| d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" | ||
| /> | ||
| </svg> | ||
| <span class="sr-only">Search icon</span> | ||
| </div> | ||
| <input | ||
| type="text" | ||
| id="search-navbar" | ||
| class="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" | ||
| placeholder="Search..." | ||
| /> | ||
| </div> | ||
| <button | ||
| data-collapse-toggle="navbar-search" | ||
| type="button" | ||
| class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" | ||
| aria-controls="navbar-search" | ||
| aria-expanded="false" | ||
| > | ||
| <span class="sr-only">Open main menu</span> | ||
| <svg | ||
| class="w-5 h-5" | ||
| aria-hidden="true" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 17 14" | ||
| > | ||
| <path | ||
| stroke="currentColor" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="2" | ||
| d="M1 1h15M1 7h15M1 13h15" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| </template> |