🔀 Merge update basic layout with Nuxt UI (#50)

app.config.ts

@@ -0,0 +1,11 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'like-green',
+    gray: 'cool',
+
+    notifications: {
+      // Show toasts at the top right of the screen
+      position: 'top-0 bottom-auto'
+    }
+  }
+})

app.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex flex-col min-h-screen">
+    <SiteHeader />
+    <NuxtLayout class="w-full flex-grow">
+      <NuxtPage />
+    </NuxtLayout>
+
+    <UNotifications />
+  </div>
+</template>
+
+<style>
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.4s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+</style>

components/ColorModeButton.vue

@@ -0,0 +1,29 @@
+<template>
+  <ClientOnly>
+    <UButton
+      v-bind="$attrs"
+      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+      color="primary"
+      variant="ghost"
+      aria-label="Theme"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <div class="w-8 h-8" />
+    </template>
+  </ClientOnly>
+</template>
+
+<script setup>
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get () {
+    return colorMode.value === 'dark'
+  },
+  set () {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+</script>

components/QRCode.vue

@@ -1,16 +1,34 @@
 <template>
-  <div>
+  <UCard
+    :ui="{
+      body: { padding: '' },
+      footer: { base: 'flex items-center gap-2' }
+    }"
+  >
     <div id="qr-code" ref="qrCodeRef" />
-    <label>
-      <select v-model="extension">
-        <option value="svg">SVG</option>
-        <option value="png">PNG</option>
-        <option value="jpeg">JPEG</option>
-        <option value="webp">WEBP</option>
-      </select>
-      <button @click="download">Download</button>
-    </label>
-  </div>
+    <template #header>
+      <slot name="header" />
+    </template>
+
+    <template #footer>
+      <USelect
+        v-model="extension"
+        :options="[
+          { value: 'svg', label: 'SVG' },
+          { value: 'png', label: 'PNG' },
+          { value: 'jpeg', label: 'JPEG' },
+          { value: 'webp', label: 'WEBP' },
+        ]"
+      />
+
+      <UButton
+        label="Download"
+        variant="outline"
+        color="primary"
+        @click="download"
+      />
+    </template>
+  </UCard>
 </template>
 
 <script setup lang="ts">

components/SiteHeader.vue

@@ -0,0 +1,74 @@
+<template>
+  <header class="shadow-md dark:shadow-none dark:border-b border-b-like-green-600">
+    <UContainer class="flex justify-between items-center gap-4 py-4">
+      <h1 class="flex items-center">
+        <UButton
+          class="font-bold"
+          variant="ghost"
+          label="LikeCoin NFT Book Press"
+          :to="{ name: 'index' }"
+        />
+        <UBadge
+          v-if="IS_TESTNET"
+          label="TESTNET"
+          variant="subtle"
+          color="amber"
+          size="xs"
+          :ui="{ rounded: 'rounded-full', font: 'font-mono' }"
+        />
+      </h1>
+
+      <div class="flex items-center gap-2">
+        <WalletHeader class="max-lg:hidden" />
+        <ColorModeButton class="max-lg:hidden" />
+        <UButton
+          class="lg:hidden"
+          icon="i-heroicons-bars-3"
+          variant="ghost"
+          @click="uiStore.toggleSiteMenuOpen"
+        />
+      </div>
+    </UContainer>
+
+    <!-- Mobile menu -->
+    <nav class="lg:hidden">
+      <USlideover v-model="isSiteMenuOpen" class="lg:hidden">
+        <UCard
+          class="flex flex-col flex-1"
+          :ui="{
+            body: { base: 'flex-1' },
+            ring: '',
+            divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+          }"
+        >
+          <template #header>
+            <WalletHeader />
+          </template>
+
+          <SiteMenu @click-link="uiStore.toggleSiteMenuOpen" />
+
+          <template #footer>
+            <ColorModeButton />
+          </template>
+        </UCard>
+      </USlideover>
+    </nav>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { IS_TESTNET } from '~/constant'
+
+import { useUIStore } from '~/stores/ui'
+
+const uiStore = useUIStore()
+
+const isSiteMenuOpen = computed({
+  get () {
+    return uiStore.isSiteMenuOpen
+  },
+  set (value: boolean) {
+    uiStore.setSiteMenuOpen(value)
+  }
+})
+</script>

components/SiteMenu.vue

@@ -0,0 +1,91 @@
+<template>
+  <UAccordion
+    :items="items"
+    :default-open="true"
+    :multiple="true"
+  >
+    <template #item="{ item }">
+      <UVerticalNavigation
+        :links="item.links"
+        :ui="{
+          icon: props.isLarge ? 'w-12 h-12' : undefined,
+          size: props.isLarge ? 'text-xl' : undefined,
+        }"
+      />
+    </template>
+  </UAccordion>
+</template>
+
+<script setup lang="ts">
+import { ISCN_TOOLS_URL } from '~/constant'
+
+const props = defineProps({
+  isLarge: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['click-link'])
+
+function handleLinkClick () {
+  emit('click-link')
+}
+
+const items = [
+  {
+    label: 'Mint NFT',
+    links: [
+      {
+        label: 'Mint NFT',
+        icon: 'i-heroicons-sparkles',
+        to: { name: 'mint-nft' }
+      }
+    ]
+  },
+  {
+    label: 'NFT Book Press',
+    links: [
+      {
+        label: 'Manage NFT Books',
+        icon: 'i-heroicons-rectangle-stack',
+        to: { name: 'nft-book-store' },
+        exact: true
+      },
+      {
+        label: 'Manage Stripe Account',
+        icon: 'i-heroicons-user-group',
+        to: { name: 'nft-book-store-user' },
+        exact: true
+      }
+    ]
+  },
+  {
+    label: 'Others',
+    links: [
+      {
+        label: 'NFT Authz Grants',
+        icon: 'i-heroicons-user-plus',
+        to: { name: 'authz' }
+      }
+    ]
+  },
+  {
+    label: 'More Tools',
+    links: [
+      {
+        label: 'LikeCoin ISCN/NFT Tools',
+        icon: 'i-heroicons-arrow-top-right-on-square',
+        to: ISCN_TOOLS_URL,
+        target: '_blank'
+      }
+    ]
+  }
+].map(item => ({
+  ...item,
+  links: item.links.map(link => ({
+    ...link,
+    click: handleLinkClick
+  }))
+}))
+</script>

components/WalletHeader.vue

@@ -1,25 +1,45 @@
 <template>
-  <div style="display:flex; flex-wrap:wrap; justify-content: center; align-items: center; gap: 10px;">
+  <div class="flex flex-wrap items-center gap-2">
     <template v-if="wallet">
-      <span>{{ wallet }}</span>
-      <button @click="onClickDisconnect">
-        Logout
-      </button>
+      <UTooltip :text="wallet">
+        <UButton
+          class="text-xs font-mono"
+          :label="shortenWalletAddress(wallet)"
+          :to="portfolioURL"
+          variant="soft"
+          target="_blank"
+        />
+      </UTooltip>
+      <UButton
+        label="Disconnect Wallet"
+        icon="i-heroicons-arrow-left-on-rectangle"
+        color="primary"
+        variant="outline"
+        @click="onClickDisconnect"
+      />
     </template>
-    <button v-if="!wallet" @click="connect">
-      Connect
-    </button>
+    <UButton
+      v-else
+      label="Connect Wallet"
+      icon="i-heroicons-arrow-right-on-rectangle"
+      color="primary"
+      @click="connect"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useWalletStore } from '~/stores/wallet'
+import { getPortfolioURL } from '~/utils'
+import { shortenWalletAddress } from '~/utils/cosmos'
 
 const store = useWalletStore()
 const { wallet } = storeToRefs(store)
 const { connect, disconnect } = store
 
+const portfolioURL = computed(() => getPortfolioURL(wallet.value))
+
 function onClickDisconnect () {
   disconnect()
   window.sessionStorage.removeItem('likecoin_nft_book_press_token')