93 lines
2.6 KiB
Vue
93 lines
2.6 KiB
Vue
<!-- src/layouts/NavbarLayout.vue -->
|
|
<template>
|
|
<NavbarHeader></NavbarHeader>
|
|
<SlideoutPanel v-model="showPanel">
|
|
<ConnectWallet></ConnectWallet>
|
|
<!-- <f-footer :dark="true"></f-footer> -->
|
|
</SlideoutPanel>
|
|
<div class="navbar-layout">
|
|
<main>
|
|
<slot></slot>
|
|
</main>
|
|
<StackVersionFooter class="navbar-layout__footer" />
|
|
</div>
|
|
<div class="mobile-navigation-bar" v-if="isMobile">
|
|
<div class="mobile-navigation-tab" @click="router.push('/')">
|
|
<div class="mobile-navigation-tab__icon">
|
|
<IconHome />
|
|
</div>
|
|
<div class="mobile-navigation-tab__title">Stake</div>
|
|
</div>
|
|
<div class="mobile-navigation-tab" @click="openDocs">
|
|
<div class="mobile-navigation-tab__icon">
|
|
<IconDocs />
|
|
</div>
|
|
<div class="mobile-navigation-tab__title">Docs</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import NavbarHeader from '@/components/layouts/NavbarHeader.vue';
|
|
import SlideoutPanel from '@/components/layouts/SlideoutPanel.vue';
|
|
import ConnectWallet from '@/components/layouts/ConnectWallet.vue';
|
|
import StackVersionFooter from '@/components/layouts/StackVersionFooter.vue';
|
|
import { useMobile } from '@/composables/useMobile';
|
|
import IconHome from '@/components/icons/IconHome.vue';
|
|
import IconDocs from '@/components/icons/IconDocs.vue';
|
|
import { ref, provide } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
const showPanel = ref(false);
|
|
|
|
const router = useRouter();
|
|
|
|
const isMobile = useMobile();
|
|
provide('isMobile', isMobile);
|
|
provide('showPanel', showPanel);
|
|
|
|
function openDocs() {
|
|
window.open('https://emberspirit007.github.io/KraikenLanding/#/docs/Introduction');
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.navbar-layout
|
|
padding-top: 100px
|
|
padding-bottom: 120px
|
|
min-height: 100vh
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
.navbar-layout > main
|
|
flex: 1 1 auto
|
|
|
|
.navbar-layout__footer
|
|
margin-top: auto
|
|
|
|
.mobile-navigation-bar
|
|
height: 72px
|
|
z-index: 1
|
|
width: 100%
|
|
padding: 16px 48px
|
|
box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.25)
|
|
background: var(--midnight-black, #0F0F0F)
|
|
bottom: -1px
|
|
position: fixed
|
|
display: flex
|
|
align-items: center
|
|
.mobile-navigation-tab
|
|
font-size: 40px
|
|
cursor: pointer
|
|
flex: 1 1 50%
|
|
text-align: center
|
|
color: white
|
|
-webkit-tap-highlight-color: transparent
|
|
.mobile-navigation-tab__icon
|
|
svg
|
|
width: 20px
|
|
height: 20px
|
|
path
|
|
fill: white
|
|
.mobile-navigation-tab__title
|
|
font-size: 12px
|
|
</style>
|