123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459 |
- <script setup lang="ts">
- /* Import modules. */
- /* Initialize stores. */
- import { useProfileStore } from '@/stores/profile'
- import { useSystemStore } from '@/stores/system'
- import { useWalletStore } from '@/stores/wallet'
- const Profile = useProfileStore()
- const System = useSystemStore()
- const Wallet = useWalletStore()
- /* Initialize (responsive) locals. */
- const isShowingMobileMenu = ref(false)
- const isShowingProfileMenu = ref(false)
- onBeforeMount(() => {
- // TODO Move this block to @nexajs/app
- try {
- Profile.$state = JSON.parse(localStorage.getItem('profile'), (key, value) => {
- if (typeof value === 'string' && /^\d+n$/.test(value)) {
- return BigInt(value.slice(0, value.length - 1))
- }
- return value
- })
- System.$state = JSON.parse(localStorage.getItem('system'), (key, value) => {
- if (typeof value === 'string' && /^\d+n$/.test(value)) {
- return BigInt(value.slice(0, value.length - 1))
- }
- return value
- })
- // NOTE: This is an "ephemeral" wallet, stored in the Session.
- Wallet.$state = JSON.parse(sessionStorage.getItem('wallet'), (key, value) => {
- if (typeof value === 'string' && /^\d+n$/.test(value)) {
- return BigInt(value.slice(0, value.length - 1))
- }
- return value
- })
- // add additional states here...
- } catch (err) {
- console.error(err)
- }
- })
- // TODO Move this block to @nexajs/app
- watch([Profile.$state, System.$state, Wallet.$state], (_state) => {
- localStorage.setItem('profile',
- JSON.stringify(_state[0], (key, value) =>
- typeof value === 'bigint' ? value.toString() + 'n' : value
- )
- )
- localStorage.setItem('system',
- JSON.stringify(_state[1], (key, value) =>
- typeof value === 'bigint' ? value.toString() + 'n' : value
- )
- )
- // NOTE: This is an "ephemeral" wallet, stored in the Session.
- sessionStorage.setItem('wallet',
- JSON.stringify(_state[2], (key, value) =>
- typeof value === 'bigint' ? value.toString() + 'n' : value
- )
- )
- // watch additional states here...
- })
- onMounted(() => {
- /* Initailize system. */
- System.init()
- /* Initialize wallet. */
- Wallet.init()
- })
- onBeforeUnmount(() => {
- console.log('TODO! Cleanup session.')
- // Now is the time to perform all cleanup operations.
- })
- </script>
- <template>
- <main>
- <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
- <div v-if="isShowingMobileMenu" class="relative z-50 lg:hidden" role="dialog" aria-modal="true">
- <!--
- Off-canvas menu backdrop, show/hide based on off-canvas menu state.
- Entering: "transition-opacity ease-linear duration-300"
- From: "opacity-0"
- To: "opacity-100"
- Leaving: "transition-opacity ease-linear duration-300"
- From: "opacity-100"
- To: "opacity-0"
- -->
- <div class="fixed inset-0 bg-gray-900/80"></div>
- <div class="fixed inset-0 flex">
- <!--
- Off-canvas menu, show/hide based on off-canvas menu state.
- Entering: "transition ease-in-out duration-300 transform"
- From: "-translate-x-full"
- To: "translate-x-0"
- Leaving: "transition ease-in-out duration-300 transform"
- From: "translate-x-0"
- To: "-translate-x-full"
- -->
- <div class="relative mr-16 flex w-full max-w-xs flex-1">
- <!--
- Close button, show/hide based on off-canvas menu state.
- Entering: "ease-in-out duration-300"
- From: "opacity-0"
- To: "opacity-100"
- Leaving: "ease-in-out duration-300"
- From: "opacity-100"
- To: "opacity-0"
- -->
- <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
- <button
- @click="isShowingMobileMenu = false"
- type="button" class="-m-2.5 p-2.5"
- >
- <span class="sr-only">Close sidebar</span>
- <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
- <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
- </svg>
- </button>
- </div>
- <!-- Sidebar component, swap this element with another sidebar if you like -->
- <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10">
- <NuxtLink to="/" class="flex h-16 shrink-0 items-center">
- <img class="h-12 w-auto" src="~/assets/icon.png" alt="Nexa Logo" />
- </NuxtLink>
- <nav class="flex flex-1 flex-col">
- <ul role="list" class="flex flex-1 flex-col gap-y-7">
- <li>
- <ul role="list" class="-mx-2 space-y-1">
- <li>
- <!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
- <NuxtLink to="/admin" @click="isShowingMobileMenu = false" class="bg-gray-800 text-white group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
- <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
- />
- </svg>
- Dashboard
- </NuxtLink>
- </li>
- <li>
- <NuxtLink to="/admin/liquidity" @click="isShowingMobileMenu = false" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
- <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
- />
- </svg>
- Liquidity
- </NuxtLink>
- </li>
- <li>
- <NuxtLink to="/admin/insights" @click="isShowingMobileMenu = false" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
- <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
- <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
- <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
- </svg>
- Insights
- </NuxtLink>
- </li>
- </ul>
- </li>
- <li>
- <div class="text-xs font-semibold leading-6 text-gray-400">
- Resource Center
- </div>
- <ul role="list" class="-mx-2 mt-2 space-y-1">
- <li>
- <!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
- <NuxtLink to="https://cashfusion.org" target="_blank" @click="isShowingMobileMenu = false" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
- <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white">CF</span>
- <span class="truncate">CashFusion</span>
- </NuxtLink>
- </li>
- <li>
- <NuxtLink to="https://runonflux.io" target="_blank" @click="isShowingMobileMenu = false" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
- <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white">FC</span>
- <span class="truncate">Flux Cloud</span>
- </NuxtLink>
- </li>
- </ul>
- </li>
- <li class="mt-auto">
- <NuxtLink to="/admin/settings" @click="isShowingMobileMenu = false" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white">
- <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
- />
- <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
- </svg>
- Settings
- </NuxtLink>
- </li>
- </ul>
- </nav>
- </div>
- </div>
- </div>
- </div>
- <!-- Static sidebar for desktop -->
- <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
- <!-- Sidebar component, swap this element with another sidebar if you like -->
- <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4">
- <NuxtLink to="/" class="flex h-16 shrink-0 items-center">
- <img class="h-12 w-auto" src="~/assets/icon.png" alt="Nexa Logo" />
- </NuxtLink>
- <nav class="flex flex-1 flex-col">
- <ul role="list" class="flex flex-1 flex-col gap-y-7">
- <li>
- <ul role="list" class="-mx-2 space-y-1">
- <li>
- <!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
- <NuxtLink to="/admin" class="bg-gray-800 text-white group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
- <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
- />
- </svg>
- Dashboard
- </NuxtLink>
- </li>
- <li>
- <NuxtLink to="/admin/liquidity" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
- <svg class="h-6 w-6 shrink-0" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
- <path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 1 0 9.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1 1 14.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"></path>
- </svg>
- Liquidity
- </NuxtLink>
- </li>
- <li>
- <NuxtLink to="/admin/insights" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
- <svg class="h-6 w-6 shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
- <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"></path>
- </svg>
- Insights
- </NuxtLink>
- </li>
- </ul>
- </li>
- <li>
- <div class="text-xs font-semibold leading-6 text-gray-400">
- Club Networks
- </div>
- <ul role="list" class="-mx-2 space-y-1">
- <li>
- <NuxtLink to="/admin/network/btc" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
- <svg class="h-6 w-6 shrink-0" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
- <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"></path>
- </svg>
- Bitcoin
- </NuxtLink>
- </li>
- <li>
- <NuxtLink to="/admin/network/bch" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
- <svg class="h-6 w-6 shrink-0" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
- <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"></path>
- </svg>
- Bitcoin Cash
- </NuxtLink>
- </li>
- <li>
- <NuxtLink to="/admin/network/nexa" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
- <svg class="h-6 w-6 shrink-0" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
- <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"></path>
- </svg>
- Nexa
- </NuxtLink>
- </li>
- </ul>
- </li>
- <li>
- <div class="text-xs font-semibold leading-6 text-gray-400">
- Resource Center
- </div>
- <ul role="list" class="-mx-2 mt-2 space-y-1">
- <li>
- <!-- Current: "bg-gray-800 text-white", Default: "text-gray-400 hover:text-white hover:bg-gray-800" -->
- <NuxtLink to="https://cashfusion.org" target="_blank" @click="isShowingMobileMenu = false" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
- <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white">CF</span>
- <span class="truncate">CashFusion</span>
- </NuxtLink>
- </li>
- <li>
- <NuxtLink to="https://runonflux.io" target="_blank" @click="isShowingMobileMenu = false" class="text-gray-400 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
- <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white">FC</span>
- <span class="truncate">Flux Cloud</span>
- </NuxtLink>
- </li>
- </ul>
- </li>
- <li class="mt-auto">
- <NuxtLink to="/admin/settings" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white">
- <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
- />
- <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
- </svg>
- Settings
- </NuxtLink>
- </li>
- </ul>
- </nav>
- </div>
- </div>
- <div class="lg:pl-72">
- <div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
- <button
- @click="isShowingMobileMenu = true"
- type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden"
- >
- <span class="sr-only">Open sidebar</span>
- <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
- <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
- </svg>
- </button>
- <!-- Separator -->
- <div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true"></div>
- <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
- <form class="relative flex flex-1" action="javascript://" method="GET">
- <label for="search-field" class="sr-only">Search</label>
- <svg class="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
- <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
- </svg>
- <input id="search-field" class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm" placeholder="Search..." type="search" name="search" />
- </form>
- <div class="flex items-center gap-x-4 lg:gap-x-6">
- <button type="button" class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500">
- <span class="sr-only">View notifications</span>
- <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
- />
- </svg>
- </button>
- <!-- Separator -->
- <div class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10" aria-hidden="true"></div>
- <!-- Profile dropdown -->
- <div class="relative">
- <button
- @click="isShowingProfileMenu = !isShowingProfileMenu"
- type="button"
- class="-m-1.5 flex items-center p-1.5"
- id="user-menu-button"
- aria-expanded="false" aria-haspopup="true"
- >
- <span class="sr-only">Open user menu</span>
- <img
- class="h-8 w-8 rounded-full bg-gray-50"
- 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="hidden lg:flex lg:items-center">
- <span class="ml-4 text-sm font-semibold leading-6 text-gray-900" aria-hidden="true">Satoshi Nakamoto</span>
- <svg class="ml-2 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
- <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
- </svg>
- </span>
- </button>
- <!--
- Dropdown menu, show/hide based on menu state.
- Entering: "transition ease-out duration-100"
- From: "transform opacity-0 scale-95"
- To: "transform opacity-100 scale-100"
- Leaving: "transition ease-in duration-75"
- From: "transform opacity-100 scale-100"
- To: "transform opacity-0 scale-95"
- -->
- <div
- v-if="isShowingProfileMenu"
- class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
- role="menu"
- aria-orientation="vertical"
- aria-labelledby="user-menu-button"
- tabindex="-1"
- >
- <!-- Active: "bg-gray-50", Not Active: "" -->
- <a href="javascript://" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="user-menu-item-0">
- My Profile
- </a>
- <a href="javascript://" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="user-menu-item-0">
- My Team
- </a>
- <a href="javascript://" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="user-menu-item-1">
- Sign Out
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="m-5">
- <slot />
- </div>
- <FooterMin />
- </div>
- </main>
- </template>
|