138 lines
4.0 KiB
Vue
138 lines
4.0 KiB
Vue
<template>
|
|
<div class="bottom-navigation-bar">
|
|
<div class="tf-container">
|
|
<ul class="tf-navigation-bar" :style="{ background: uiStore.darkMode ? 'transparent' : '' }">
|
|
<li>
|
|
<a class="nav-item-link" href="#" @click.prevent="navigate('Home')" @mouseenter="prefetch('Home')" @touchstart.passive="prefetch('Home')">
|
|
<i class="fas fa-home"></i>
|
|
<span>Home</span>
|
|
</a>
|
|
</li>
|
|
<li v-if="uiStore.isModuleEnabled('cart')">
|
|
<a class="nav-item-link" href="#" @click.prevent="navigate('CartProductMarket')" @mouseenter="prefetch('CartProductMarket')" @touchstart.passive="prefetch('CartProductMarket')">
|
|
<img src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/d36eb6a17e27.bin" alt="Cart" class="nav-icon">
|
|
<span>Cart</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="nav-item-link" href="#" @click.prevent="navigate('MyWallet')" @mouseenter="prefetch('MyWallet')" @touchstart.passive="prefetch('MyWallet')">
|
|
<img src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/9908be28dd8a.bin" alt="Wallet" class="nav-icon spinning-on-hover">
|
|
<span>Wallet</span>
|
|
</a>
|
|
</li>
|
|
<li v-if="['tandem','ngo'].includes(uiStore.app_mode)">
|
|
<a class="nav-item-link" href="#" @click.prevent="navigate('CooperativeHub')" @mouseenter="prefetch('CooperativeHub')" @touchstart.passive="prefetch('CooperativeHub')">
|
|
<i class="fas fa-landmark"></i>
|
|
<span>Hub</span>
|
|
</a>
|
|
</li>
|
|
<li v-if="uiStore.isModuleEnabled('properties')">
|
|
<a class="nav-item-link" href="#" @click.prevent="navigate('ListProperties')" @mouseenter="prefetch('ListProperties')" @touchstart.passive="prefetch('ListProperties')">
|
|
<img src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/53c45417d1d1.bin" alt="Properties" class="nav-icon">
|
|
<span>Properties</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useUIStore } from '../../../stores/ui';
|
|
|
|
const uiStore = useUIStore();
|
|
|
|
const navigate = (page) => {
|
|
if (window.$navigateHelper) {
|
|
window.$navigateHelper({ page });
|
|
} else {
|
|
console.warn('Global $navigate function not found.');
|
|
}
|
|
};
|
|
|
|
const prefetch = (page) => {
|
|
if (window.$prefetchPage) window.$prefetchPage(page);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bottom-navigation-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
max-width: var(--layout-max-width, 1440px);
|
|
z-index: 9999;
|
|
background-color: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px);
|
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
|
|
padding: 10px 0 env(safe-area-inset-bottom, 10px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
:global(body.is-full-width) .bottom-navigation-bar {
|
|
max-width: none !important;
|
|
}
|
|
|
|
:global(.dark-mode) .bottom-navigation-bar {
|
|
background-color: var(--header-bg);
|
|
border-top-color: var(--border-color);
|
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
:global(.dark-mode) .tf-navigation-bar {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
|
|
.tf-navigation-bar {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-item-link {
|
|
text-decoration: none;
|
|
color: #717171;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.nav-item-link:hover {
|
|
color: #533dea;
|
|
background-color: rgba(83, 61, 234, 0.05);
|
|
}
|
|
|
|
.nav-item-link i {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
:global(.dark-mode) .nav-item-link {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
:global(.dark-mode) .nav-item-link:hover {
|
|
color: #816ef0;
|
|
background-color: rgba(129, 110, 240, 0.1);
|
|
}
|
|
</style>
|