release update

components/Navbar.vue

@@ -1,155 +1,190 @@
 <template>
-  <b-navbar
-    ref="root"
-    :active.sync="isBurgerMenuOpened"
-    :class="{ 'navbar-shrink': !showTopNavbar }"
-    close-on-click
-    fixed-top
-    mobile-burger
-    spaced
-    :wrapper-class="{ container: true, 'is-fluid': !isMobile }">
-    <template #brand>
-      <b-navbar-item :to="{ path: '/' }" class="logo" tag="nuxt-link">
-        <img
-          :src="logoSrc"
-          alt="First NFT market explorer on Kusama and Polkadot"
-          width="143"
-          height="42" />
-      </b-navbar-item>
+  <nav
+    role="navigation"
+    aria-label="main navigation"
+    class="navbar is-fixed-top is-spaced"
+    :class="{
+      'navbar-shrink': !showTopNavbar,
+      'is-active': isMobileNavbarOpen,
+    }">
+    <div class="container" :class="{ 'is-fluid': !isMobile }">
+      <!-- BRAND -->
+      <div class="navbar-brand">
+        <nuxt-link to="/" class="navbar-item logo nuxt-link-active">
+          <img
+            :src="logoSrc"
+            alt="First NFT market explorer on Kusama and Polkadot"
+            width="143"
+            height="42" />
+        </nuxt-link>
+        <div
+          class="is-hidden-desktop is-flex is-flex-grow-1 is-align-items-center is-justify-content-flex-end"
+          @click="closeBurgerMenu">
+          <img
+            v-if="isMobileNavbarOpen || showSearchOnNavbar"
+            class="mobile-nav-search-btn mr-2"
+            :src="
+              isDarkMode
+                ? '/search-mobile-navbar-dark.svg'
+                : '/search-mobile-navbar.svg'
+            "
+            alt="search"
+            @click="showMobileSearchBar" />
+
+          <div v-show="openMobileSearchBar">
+            <div
+              class="fixed-stack is-flex is-align-items-center is-justify-content-space-between p-2">
+              <Search
+                ref="mobilSearchRef"
+                hide-filter
+                class="is-flex-grow-1 mt-3" />
+              <b-button class="cancel-btn" @click="hideMobileSearchBar">
+                {{ $t('cancel') }}
+              </b-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- BURGER MENU -->
+        <a
+          role="button"
+          class="navbar-burger"
+          :class="{ 'is-active': isMobileNavbarOpen }"
+          aria-label="menu"
+          aria-expanded="false"
+          data-target="MainNavbar"
+          @click="showMobileNavbar">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+        <!-- END BURGER MENU -->
+      </div>
+      <!-- END BRAND -->
+
+      <!-- MENU -->
       <div
-        class="is-hidden-desktop is-flex is-flex-grow-1 is-align-items-center is-justify-content-flex-end"
-        @click="closeBurgerMenu">
-        <img
-          v-if="showSearchOnNavbar"
-          class="mobile-nav-search-btn mr-2"
-          :src="
-            isDarkMode
-              ? '/search-mobile-navbar-dark.svg'
-              : '/search-mobile-navbar.svg'
-          "
-          alt="search"
-          @click="showMobileSearchBar" />
-
-        <div v-show="openMobileSearchBar">
-          <div
-            class="fixed-stack is-flex is-align-items-center is-justify-content-space-between p-2">
+        id="MainNavbar"
+        class="navbar-menu"
+        :class="{ 'is-active': isMobileNavbarOpen }">
+        <!-- NAV START -->
+        <div class="navbar-start">
+          <div v-if="showSearchOnNavbar" class="navbar-item is-expanded">
             <Search
-              ref="mobilSearchRef"
+              class="search-navbar is-flex-grow-1 pb-0 is-hidden-touch"
               hide-filter
-              class="is-flex-grow-1 mt-3" />
-            <b-button class="cancel-btn" @click="hideMobileSearchBar">
-              {{ $t('cancel') }}
-            </b-button>
+              search-column-class="is-flex-grow-1" />
           </div>
         </div>
-      </div>
-    </template>
-    <template #start>
-      <div v-if="showSearchOnNavbar" class="navbar-item is-expanded">
-        <Search
-          class="search-navbar is-flex-grow-1 pb-0 is-hidden-touch"
-          hide-filter
-          search-column-class="is-flex-grow-1" />
-      </div>
-    </template>
-    <template #end>
-      <nuxt-link to="/stmn/drops" rel="nofollow">
-        <div class="navbar-item" data-cy="drops">
-          {{ $t('drops.title') }}
-
-          <NeoIcon
-            class="ml-1"
-            icon="fire-flame-curved"
-            custom-size="fa-solid"
-            pack="fa-sharp"
-            variant="primary" />
-        </div>
-      </nuxt-link>
-      <template v-if="isExploreVisible">
-        <MobileExpandableSection v-if="isMobile" :title="$t('explore')">
-          <NavbarExploreOptions />
-        </MobileExpandableSection>
-
-        <ExploreDropdown
-          v-else
-          class="navbar-explore custom-navbar-item"
-          data-cy="explore" />
-      </template>
-
-      <a
-        href="https://hello.kodadot.xyz"
-        rel="nofollow"
-        target="_blank"
-        class="navbar-item"
-        data-cy="learn">
-        {{ $t('learn') }}
-      </a>
-      <CreateDropdown
-        v-show="isCreateVisible"
-        class="navbar-create custom-navbar-item ml-0"
-        data-cy="create"
-        :is-mobile="isMobile"
-        :chain="urlPrefix" />
-
-      <!-- commenting as part of #5889-->
-      <!-- <StatsDropdown
-        class="navbar-stats custom-navbar-item"
-        data-cy="stats"
-        :is-mobile="isMobile"
-        :chain="urlPrefix" /> -->
-
-      <MobileExpandableSection
-        v-if="isMobile"
-        no-padding
-        :title="$t('chainSelect', [chainName])">
-        <NavbarChainOptions />
-      </MobileExpandableSection>
-
-      <ChainSelectDropdown
-        v-else
-        id="NavChainSelect"
-        class="navbar-chain custom-navbar-item"
-        data-cy="chain-select" />
-
-      <NotificationBoxButton
-        v-if="account"
-        :show-label="isMobile"
-        @closeBurgerMenu="closeBurgerMenu" />
-      <template v-if="isMobile">
-        <MobileLanguageOption v-if="!account" />
-        <div
-          v-if="account"
-          class="navbar-item"
-          @click.stop="openWalletConnectModal">
-          <span>
-            {{ $t('profile.page') }}
-            <NeoIcon icon="user-circle" />
-          </span>
-          <NeoIcon class="icon--right" icon="chevron-right" pack="fas" />
-        </div>
-        <ColorModeButton v-if="!account" class="navbar-item" />
-
-        <div v-if="!account" id="NavProfile">
-          <ConnectWalletButton
-            class="button-connect-wallet"
-            variant="connect"
+        <!-- END NAV START -->
+
+        <!-- NAV END -->
+        <div class="navbar-end">
+          <nuxt-link to="/stmn/drops" rel="nofollow">
+            <div class="navbar-item" data-cy="drops">
+              {{ $t('drops.title') }}
+
+              <NeoIcon
+                class="ml-1"
+                icon="fire-flame-curved"
+                custom-size="fa-solid"
+                pack="fa-sharp"
+                variant="primary" />
+            </div>
+          </nuxt-link>
+          <template v-if="isExploreVisible">
+            <MobileExpandableSection v-if="isMobile" :title="$t('explore')">
+              <NavbarExploreOptions @closeMobileNavbar="showMobileNavbar" />
+            </MobileExpandableSection>
+
+            <ExploreDropdown
+              v-else
+              class="navbar-explore custom-navbar-item"
+              data-cy="explore" />
+          </template>
+
+          <a
+            href="https://hello.kodadot.xyz"
+            rel="nofollow noopener noreferrer"
+            target="_blank"
+            class="navbar-item"
+            data-cy="learn">
+            {{ $t('learn') }}
+          </a>
+          <CreateDropdown
+            v-show="isCreateVisible"
+            class="navbar-create custom-navbar-item ml-0"
+            data-cy="create"
+            :is-mobile="isMobile"
+            :chain="urlPrefix"
+            @closeMobileNavbar="showMobileNavbar" />
+
+          <!-- commenting as part of #5889-->
+          <!-- <StatsDropdown
+          class="navbar-stats custom-navbar-item"
+          data-cy="stats"
+          :is-mobile="isMobile"
+          :chain="urlPrefix" /> -->
+
+          <MobileExpandableSection
+            v-if="isMobile"
+            no-padding
+            :title="$t('chainSelect', [chainName])">
+            <NavbarChainOptions />
+          </MobileExpandableSection>
+
+          <ChainSelectDropdown
+            v-else
+            id="NavChainSelect"
+            class="navbar-chain custom-navbar-item"
+            data-cy="chain-select" />
+
+          <NotificationBoxButton
+            v-if="account"
+            :show-label="isMobile"
+            @closeBurgerMenu="showMobileNavbar" />
+
+          <template v-if="isMobile">
+            <template v-if="!account">
+              <MobileLanguageOption @closeLanguageOption="showMobileNavbar" />
+              <ColorModeButton class="navbar-item" />
+            </template>
+            <div
+              v-else
+              class="navbar-item"
+              @click.stop="openWalletConnectModal">
+              <span>
+                {{ $t('profile.page') }}
+                <NeoIcon icon="user-circle" />
+              </span>
+              <NeoIcon class="icon--right" icon="chevron-right" pack="fas" />
+            </div>
+
+            <div v-if="!account" id="NavProfile">
+              <ConnectWalletButton
+                class="button-connect-wallet"
+                variant="connect"
+                @closeBurgerMenu="showMobileNavbar" />
+            </div>
+          </template>
+
+          <ProfileDropdown
+            v-if="!isMobile"
+            id="NavProfile"
+            :chain="urlPrefix"
+            data-cy="profileDropdown"
             @closeBurgerMenu="closeBurgerMenu" />
         </div>
-      </template>
-      <ProfileDropdown
-        v-if="!isMobile"
-        id="NavProfile"
-        :chain="urlPrefix"
-        data-cy="profileDropdown"
-        @closeBurgerMenu="closeBurgerMenu" />
-    </template>
-  </b-navbar>
+        <!-- END NAV END -->
+      </div>
+      <!-- END MENU -->
+    </div>
+  </nav>
 </template>
 
 <script lang="ts" setup>
 import { NeoIcon } from '@kodadot1/brick'
 import { BModalConfig } from 'buefy/types/components'
-import type Vue from 'vue'
 
 import KodaBeta from '@/assets/Koda_Beta.svg'
 import KodaBetaDark from '@/assets/Koda_Beta_dark.svg'
@@ -171,7 +206,7 @@ import { getChainNameByPrefix } from '@/utils/chain'
 import { createVisible, explorerVisible } from '@/utils/config/permision.config'
 
 const { $buefy, $nextTick } = useNuxtApp()
-const root = ref<Vue<Record<string, string>>>()
+const instance = getCurrentInstance()
 const showTopNavbar = ref(true)
 const openMobileSearchBar = ref(false)
 const fixedTitleNavAppearDistance = ref(85)
@@ -181,6 +216,7 @@ const isMobile = ref(window.innerWidth < 1024)
 const { urlPrefix } = usePrefix()
 const { isDarkMode } = useTheme()
 const identityStore = useIdentityStore()
+const isMobileNavbarOpen = ref(false)
 
 const mobilSearchRef = ref<{ focusInput: () => void } | null>(null)
 
@@ -199,12 +235,27 @@ const showSearchOnNavbar = computed(
 )
 
 const openWalletConnectModal = (): void => {
-  closeBurgerMenu()
+  showMobileNavbar()
 
   $buefy.modal.open({
-    parent: root?.value,
+    parent: instance?.proxy,
     ...ConnectWalletModalConfig,
   } as unknown as BModalConfig)
+
+  // close all modal
+  document.querySelectorAll('.modal').forEach((modal) => {
+    modal.__vue__?.$vnode?.context?.close()
+    modal.remove()
+  })
+}
+
+const showMobileNavbar = () => {
+  document.body.classList.toggle('is-clipped')
+  isMobileNavbarOpen.value = !isMobileNavbarOpen.value
+}
+
+const closeBurgerMenu = () => {
+  isBurgerMenuOpened.value = false
 }
 
 watch([isBurgerMenuOpened], () => {
@@ -256,10 +307,6 @@ const hideMobileSearchBar = () => {
   setBodyScroll(true)
 }
 
-const closeBurgerMenu = () => {
-  isBurgerMenuOpened.value = false
-}
-
 const handleResize = () => {
   isMobile.value = window.innerWidth < 1024
 }
@@ -269,6 +316,7 @@ const chainName = computed(() => getChainNameByPrefix(urlPrefix.value))
 onMounted(() => {
   window.addEventListener('scroll', onScroll)
   document.body.style.overflowY = 'initial'
+  document.body.className = 'has-navbar-fixed-top has-spaced-navbar-fixed-top'
   window.addEventListener('resize', handleResize)
 })