90c55883f2
- Added custom fonts 'Blade Knight' and 'Coligra' for a unique aesthetic - Updated background color and styling for body and app components - Improved content card design with glass morphism effects and hover states - Enhanced mobile navigation with a floating glass effect and updated button styles - Adjusted header layout for better responsiveness and visual appeal Co-authored-by: Cursor <cursoragent@cursor.com>
116 lines
3.3 KiB
Vue
116 lines
3.3 KiB
Vue
<template>
|
|
<nav class="mobile-nav fixed bottom-0 left-0 right-0 z-50 md:hidden pb-4 px-6">
|
|
<div class="floating-glass-nav px-4 py-3 rounded-2xl">
|
|
<div class="flex items-center justify-around">
|
|
<button
|
|
v-for="item in navItems"
|
|
:key="item.name"
|
|
@click="navigate(item.path)"
|
|
class="flex flex-col items-center gap-1 nav-tab"
|
|
:class="{ 'nav-tab-active': isActive(item.path) }"
|
|
>
|
|
<component :is="item.icon" class="w-6 h-6" />
|
|
<span class="text-xs font-medium">{{ item.name }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { h } from 'vue'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const navItems = [
|
|
{
|
|
name: 'Home',
|
|
path: '/',
|
|
icon: () => h('svg', { class: 'w-6 h-6', fill: 'currentColor', viewBox: '0 0 24 24' },
|
|
h('path', { d: 'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z' })
|
|
)
|
|
},
|
|
{
|
|
name: 'Search',
|
|
path: '/search',
|
|
icon: () => h('svg', { class: 'w-6 h-6', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' })
|
|
)
|
|
},
|
|
{
|
|
name: 'My List',
|
|
path: '/mylist',
|
|
icon: () => h('svg', { class: 'w-6 h-6', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z' })
|
|
)
|
|
},
|
|
{
|
|
name: 'Creators',
|
|
path: '/creators',
|
|
icon: () => h('svg', { class: 'w-6 h-6', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z' })
|
|
)
|
|
},
|
|
{
|
|
name: 'Profile',
|
|
path: '/profile',
|
|
icon: () => h('svg', { class: 'w-6 h-6', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
|
|
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z' })
|
|
)
|
|
}
|
|
]
|
|
|
|
const navigate = (path: string) => {
|
|
router.push(path)
|
|
}
|
|
|
|
const isActive = (path: string) => {
|
|
return route.path === path
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mobile-nav {
|
|
/* Safe area for iPhone notch/home indicator */
|
|
padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
|
|
}
|
|
|
|
.floating-glass-nav {
|
|
background: rgba(0, 0, 0, 0.65);
|
|
backdrop-filter: blur(40px);
|
|
-webkit-backdrop-filter: blur(40px);
|
|
border-radius: 24px;
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
box-shadow:
|
|
0 20px 60px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.nav-tab {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
padding: 8px 12px;
|
|
border-radius: 12px;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-tab:active {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.nav-tab-active {
|
|
color: rgba(255, 255, 255, 1);
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
padding: 8px 12px;
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
font-weight: 600;
|
|
}
|
|
</style>
|