Skip to content

Commit

Permalink
Merge pull request #6382 from roiLeo/chore/Buefy/b-navbar
Browse files Browse the repository at this point in the history 
🔧 migrate b-navbar
  • Loading branch information
@roiLeo
roiLeo authored Jul 6, 2023
2 parents cdcb6b2 + 72bd5db commit f39aaff
Show file tree
Hide file tree
Showing 4 changed files with 219 additions and 166 deletions.
334 changes: 188 additions & 146 deletions components/Navbar.vue
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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)
Expand All @@ -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)
Expand All @@ -199,14 +235,23 @@ const showSearchOnNavbar = computed(
)
const openWalletConnectModal = (): void => {
closeBurgerMenu()
showMobileNavbar()
$buefy.modal.open({
parent: root?.value,
parent: instance?.proxy,
...ConnectWalletModalConfig,
} as unknown as BModalConfig)
}
const showMobileNavbar = () => {
document.body.classList.toggle('is-clipped')
isMobileNavbarOpen.value = !isMobileNavbarOpen.value
}
const closeBurgerMenu = () => {
isBurgerMenuOpened.value = false
}
watch([isBurgerMenuOpened], () => {
setBodyScroll(!isBurgerMenuOpened.value)
})
Expand Down Expand Up @@ -256,10 +301,6 @@ const hideMobileSearchBar = () => {
setBodyScroll(true)
}
const closeBurgerMenu = () => {
isBurgerMenuOpened.value = false
}
const handleResize = () => {
isMobile.value = window.innerWidth < 1024
}
Expand All @@ -269,6 +310,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)
})
Expand Down
Loading

0 comments on commit f39aaff

Please sign in to comment.