ai-char/ai-service-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Redesign sidebar to a horizontal top navigation bar and enhance assets view with asset upload, refined filters, and a new grid layout.

Browse Source
This commit is contained in:
xds
2026-02-09 01:52:20 +03:00
parent c73bffc9f4
commit 27337e0ccf
4 changed files with 341 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/AppSidebar.vue
View File

@@ -23,10 +23,9 @@ const isActive = (path) => {
const navItems = computed(() => {
const items = [
{ path: '/', icon: '🏠', tooltip: 'Home' },
{ path: '/assets', icon: '📂', tooltip: 'Assets' },
{ path: '/albums', icon: '🖼️', tooltip: 'Albums' },
// { path: '/generation', icon: '🎨', tooltip: 'Image Generation' },
{ path: '/flexible', icon: '🖌️', tooltip: 'Flexible Generation' },
{ path: '/albums', icon: '🖼️', tooltip: 'Albums' },
{ path: '/assets', icon: '📂', tooltip: 'Assets' },
{ path: '/characters', icon: '👥', tooltip: 'Characters' },
{ path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
]
@@ -41,31 +40,34 @@ const navItems = computed(() => {
<template>
<div class="contents">
<!-- Sidebar (Desktop) -->
<!-- Sidebar (Desktop -> Top Bar) -->
<nav
class="hidden md:flex glass-panel w-20 m-4 flex-col items-center py-6 rounded-3xl z-40 border border-white/5 bg-slate-900/50 backdrop-blur-md h-[calc(100vh-2rem)]">
<div class="mb-12">
<div
class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20">
AI
</div>
class="hidden md:flex glass-panel w-[calc(100%-2rem)] mx-4 mt-4 mb-2 flex-row items-center px-8 py-3 rounded-2xl z-40 border border-white/5 bg-slate-900/50 backdrop-blur-md shrink-0 justify-between">
<!-- Logo -->
<div
class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20 shrink-0">
AI
</div>
<div class="flex-1 flex flex-col gap-6 w-full items-center">
<!-- Nav Items -->
<div class="flex flex-row gap-2 items-center justify-center flex-1 mx-8">
<div v-for="item in navItems" :key="item.path" :class="[
'w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300',
'px-4 py-2 flex items-center gap-2 rounded-xl cursor-pointer transition-all duration-300',
isActive(item.path)
? 'bg-white/10 text-slate-50 shadow-inner'
: 'text-slate-400 hover:bg-white/10 hover:text-slate-50'
]" @click="router.push(item.path)" v-tooltip.right="item.tooltip">
<span class="text-2xl">{{ item.icon }}</span>
: 'text-slate-400 hover:bg-white/5 hover:text-slate-50'
]" @click="router.push(item.path)" v-tooltip.bottom="item.tooltip">
<span class="text-xl">{{ item.icon }}</span>
<span class="text-sm font-medium hidden lg:block">{{ item.tooltip }}</span>
</div>
</div>
<div class="mt-auto flex flex-col items-center gap-4">
<!-- Right Actions -->
<div class="flex items-center gap-4 shrink-0">
<div @click="handleLogout"
class="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold"
v-tooltip.right="'Logout'">
v-tooltip.bottom="'Logout'">
<i class="pi pi-power-off"></i>
</div>
<!-- Profile Avatar Placeholder -->