后台布局
This commit is contained in:
李琦
@@ -1,108 +1,156 @@
|
||||
<template>
|
||||
<div class="admin-layout">
|
||||
<div class="flex h-screen bg-art-admin-bg text-white overflow-hidden font-sans">
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside class="admin-sidebar" :class="{ 'collapsed': !isSidebarOpen }">
|
||||
<div class="sidebar-header">
|
||||
<h1 class="sidebar-title">管理后台</h1>
|
||||
<aside
|
||||
class="flex flex-col bg-art-admin-card border-r border-white/5 transition-all duration-300 z-20"
|
||||
:class="[isSidebarOpen ? 'w-64' : 'w-20']"
|
||||
>
|
||||
<!-- Logo Area -->
|
||||
<div class="h-16 flex items-center px-6 border-b border-white/5 shrink-0">
|
||||
<h1 class="font-serif italic text-xl tracking-wide truncate transition-all duration-300" :class="{ 'opacity-0': !isSidebarOpen }">
|
||||
Niangao<span class="text-art-accent">.Admin</span>
|
||||
</h1>
|
||||
<span v-if="!isSidebarOpen" class="absolute left-1/2 -translate-x-1/2 text-art-accent font-serif text-xl italic">N</span>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<ul>
|
||||
<li v-for="(item, index) in menuItems" :key="index">
|
||||
<!-- Parent Menu Item -->
|
||||
|
||||
<!-- Nav Menu -->
|
||||
<nav class="flex-1 overflow-y-auto py-6 px-3 space-y-1 custom-scrollbar">
|
||||
<template v-for="(item, index) in menuItems" :key="index">
|
||||
<!-- Parent Menu Item -->
|
||||
<div v-if="item.children">
|
||||
<div
|
||||
v-if="item.children"
|
||||
class="nav-item-parent"
|
||||
:class="{ 'expanded': item.isOpen }"
|
||||
class="flex items-center justify-between px-3 py-2.5 rounded-md cursor-pointer transition-colors duration-200 group mb-1"
|
||||
:class="[isParentActive(item) ? 'text-white' : 'text-art-muted hover:text-white hover:bg-white/5']"
|
||||
@click="toggleMenu(index)"
|
||||
>
|
||||
<div class="nav-link-content">
|
||||
<span class="nav-icon">{{ item.icon }}</span>
|
||||
<span class="nav-text">{{ item.title }}</span>
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<span class="text-lg shrink-0 group-hover:text-art-accent transition-colors" :class="isParentActive(item) ? 'text-art-accent' : ''">{{ item.icon }}</span>
|
||||
<span class="text-sm font-medium truncate transition-opacity duration-300" :class="{ 'opacity-0 w-0': !isSidebarOpen }">{{ item.title }}</span>
|
||||
</div>
|
||||
<span class="nav-arrow">▼</span>
|
||||
<span
|
||||
v-if="isSidebarOpen"
|
||||
class="text-[10px] transition-transform duration-200 opacity-50 group-hover:opacity-100"
|
||||
:class="{ 'rotate-180': item.isOpen }"
|
||||
>▼</span>
|
||||
</div>
|
||||
|
||||
<!-- Single Menu Item -->
|
||||
<router-link
|
||||
v-else
|
||||
:to="item.path || ''"
|
||||
class="nav-link"
|
||||
active-class="active"
|
||||
>
|
||||
<span class="nav-icon">{{ item.icon }}</span>
|
||||
<span class="nav-text">{{ item.title }}</span>
|
||||
</router-link>
|
||||
|
||||
<!-- Submenu -->
|
||||
<ul v-if="item.children" class="submenu" :style="{ maxHeight: item.isOpen ? (item.children.length * 50) + 'px' : '0px' }">
|
||||
<li v-for="(child, childIndex) in item.children" :key="childIndex">
|
||||
<router-link :to="child.path" class="nav-link sub-link" active-class="active">
|
||||
<span class="nav-icon">{{ child.icon }}</span>
|
||||
<span class="nav-text">{{ child.title }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
v-show="isSidebarOpen && item.isOpen"
|
||||
class="ml-4 pl-4 border-l border-white/5 space-y-1 mb-2 overflow-hidden transition-all duration-300"
|
||||
>
|
||||
<router-link
|
||||
v-for="(child, childIndex) in item.children"
|
||||
:key="childIndex"
|
||||
:to="child.path"
|
||||
class="flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-all duration-200 relative group"
|
||||
active-class="text-art-accent bg-art-accent/5 font-medium"
|
||||
:class="!isActive(child.path) ? 'text-art-muted hover:text-white hover:bg-white/5' : ''"
|
||||
>
|
||||
<!-- Active Indicator Line -->
|
||||
<div v-if="isActive(child.path)" class="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-4 bg-art-accent rounded-full"></div>
|
||||
|
||||
<span class="truncate">{{ child.title }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Menu Item -->
|
||||
<router-link
|
||||
v-else
|
||||
:to="item.path || ''"
|
||||
class="flex items-center gap-3 px-3 py-2.5 rounded-md mb-1 transition-all duration-200 relative group"
|
||||
active-class="text-art-accent bg-art-accent/5"
|
||||
:class="!isActive(item.path || '') ? 'text-art-muted hover:text-white hover:bg-white/5' : ''"
|
||||
>
|
||||
<div v-if="isActive(item.path || '')" class="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-art-accent rounded-full"></div>
|
||||
<span class="text-lg shrink-0 group-hover:text-art-accent transition-colors">{{ item.icon }}</span>
|
||||
<span class="text-sm font-medium truncate transition-opacity duration-300" :class="{ 'opacity-0 w-0': !isSidebarOpen }">{{ item.title }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
</nav>
|
||||
<!-- Sidebar Footer removed as per request -->
|
||||
|
||||
<!-- User Footer -->
|
||||
<div class="p-4 border-t border-white/5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-art-accent/10 flex items-center justify-center text-art-accent font-bold text-xs shrink-0">
|
||||
{{ currentUser.username?.charAt(0).toUpperCase() || 'A' }}
|
||||
</div>
|
||||
<div class="min-w-0 transition-opacity duration-300" :class="{ 'opacity-0 w-0': !isSidebarOpen }">
|
||||
<p class="text-sm font-medium text-white truncate">{{ currentUser.username }}</p>
|
||||
<p class="text-xs text-art-muted truncate">Administrator</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="admin-main">
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="admin-header">
|
||||
<div class="header-left">
|
||||
<button class="toggle-btn" @click="toggleSidebar">
|
||||
☰
|
||||
<main class="flex-1 flex flex-col min-w-0 bg-art-admin-bg relative">
|
||||
<!-- Top Header -->
|
||||
<header class="h-16 bg-art-admin-bg border-b border-white/5 flex items-center justify-between px-6 shrink-0 z-10">
|
||||
<!-- Left: Toggle & Breadcrumb (Optional) -->
|
||||
<div class="flex items-center gap-4">
|
||||
<button
|
||||
@click="toggleSidebar"
|
||||
class="p-2 -ml-2 text-art-muted hover:text-white hover:bg-white/5 rounded-md transition-colors"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||
</button>
|
||||
<h2 class="text-sm font-medium text-white/80 hidden sm:block">{{ currentRouteTitle }}</h2>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="user-dropdown relative" ref="dropdownRef">
|
||||
<button class="user-info-btn" @click="toggleUserDropdown">
|
||||
<span class="username">{{ currentUser.username }}</span>
|
||||
<span class="role">({{ currentUser.role }})</span>
|
||||
<span class="arrow" :class="{ 'rotated': isUserDropdownOpen }">▼</span>
|
||||
|
||||
<!-- Right: Actions -->
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="p-2 text-art-muted hover:text-white hover:bg-white/5 rounded-full transition-colors relative">
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-art-accent rounded-full border-2 border-art-admin-bg"></span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
|
||||
</button>
|
||||
|
||||
<div class="relative" ref="dropdownRef">
|
||||
<button
|
||||
@click="toggleUserDropdown"
|
||||
class="flex items-center gap-2 text-sm font-medium text-art-muted hover:text-white transition-colors"
|
||||
>
|
||||
<span>设置</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200" :class="{ 'rotate-180': isUserDropdownOpen }"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
</button>
|
||||
|
||||
<div v-if="isUserDropdownOpen" class="dropdown-menu">
|
||||
<div class="dropdown-header">
|
||||
<span class="user-email">管理员</span>
|
||||
</div>
|
||||
<ul class="dropdown-list">
|
||||
<li>
|
||||
<button @click="handleChangePassword" class="dropdown-item">
|
||||
<span class="icon">🔒</span>
|
||||
修改密码
|
||||
</button>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<button @click="handleLogout" class="dropdown-item text-red-400">
|
||||
<span class="icon">🚪</span>
|
||||
退出登录
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Dropdown -->
|
||||
<div
|
||||
v-if="isUserDropdownOpen"
|
||||
class="absolute right-0 mt-2 w-48 bg-art-admin-card border border-white/10 rounded-lg shadow-xl py-1 z-50 origin-top-right animate-reveal"
|
||||
>
|
||||
<button @click="handleChangePassword" class="flex items-center gap-2 w-full px-4 py-2.5 text-sm text-art-muted hover:text-white hover:bg-white/5 text-left transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
|
||||
修改密码
|
||||
</button>
|
||||
<div class="h-px bg-white/5 my-1"></div>
|
||||
<button @click="handleLogout" class="flex items-center gap-2 w-full px-4 py-2.5 text-sm text-red-400 hover:bg-red-500/10 text-left transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
||||
退出登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content Container -->
|
||||
<div class="admin-content">
|
||||
<router-view />
|
||||
<!-- Content Scroll Area -->
|
||||
<div class="flex-1 overflow-auto p-6 scroll-smooth custom-scrollbar">
|
||||
<div class="max-w-full mx-auto animate-reveal">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const toast = useToast()
|
||||
const isSidebarOpen = ref(true)
|
||||
const currentUser = ref(JSON.parse(localStorage.getItem('user') || '{}'))
|
||||
@@ -122,7 +170,6 @@ const closeDropdown = (e: MouseEvent) => {
|
||||
}
|
||||
|
||||
const handleChangePassword = () => {
|
||||
// Implement change password logic or navigate to page
|
||||
toast.showToast('功能开发中...', 'info')
|
||||
isUserDropdownOpen.value = false
|
||||
}
|
||||
@@ -197,7 +244,15 @@ const menuItems = ref<MenuItem[]>([
|
||||
])
|
||||
|
||||
const toggleMenu = (index: number) => {
|
||||
menuItems.value[index].isOpen = !menuItems.value[index].isOpen
|
||||
if (!isSidebarOpen.value) {
|
||||
isSidebarOpen.value = true
|
||||
// Wait for transition
|
||||
setTimeout(() => {
|
||||
menuItems.value[index].isOpen = !menuItems.value[index].isOpen
|
||||
}, 100)
|
||||
} else {
|
||||
menuItems.value[index].isOpen = !menuItems.value[index].isOpen
|
||||
}
|
||||
}
|
||||
|
||||
const toggleSidebar = () => {
|
||||
@@ -211,6 +266,32 @@ const handleLogout = () => {
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
// Helper to determine active state
|
||||
const isActive = (path: string) => {
|
||||
return route.path === path || route.path.startsWith(path + '/')
|
||||
}
|
||||
|
||||
const isParentActive = (item: MenuItem) => {
|
||||
if (item.path && isActive(item.path)) return true
|
||||
if (item.children) {
|
||||
return item.children.some(child => isActive(child.path))
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// Get current route title for header
|
||||
const currentRouteTitle = computed(() => {
|
||||
// Simple logic: find matching menu item title
|
||||
for (const item of menuItems.value) {
|
||||
if (item.path === route.path) return item.title
|
||||
if (item.children) {
|
||||
const child = item.children.find(c => c.path === route.path)
|
||||
if (child) return `${item.title} / ${child.title}`
|
||||
}
|
||||
}
|
||||
return '管理控制台'
|
||||
})
|
||||
|
||||
// Check if user is authenticated
|
||||
onMounted(() => {
|
||||
const token = localStorage.getItem('token')
|
||||
@@ -218,6 +299,13 @@ onMounted(() => {
|
||||
router.push('/login')
|
||||
}
|
||||
document.addEventListener('click', closeDropdown)
|
||||
|
||||
// Auto open menu based on current route
|
||||
menuItems.value.forEach(item => {
|
||||
if (item.children && item.children.some(child => isActive(child.path))) {
|
||||
item.isOpen = true
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
@@ -226,365 +314,5 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background-color: #050505;
|
||||
color: #ececec;
|
||||
}
|
||||
|
||||
/* User Dropdown Styles */
|
||||
.user-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-info-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.user-info-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 0.7rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.arrow.rotated {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 0.5rem;
|
||||
width: 200px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
animation: slideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.user-email {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-list {
|
||||
list-style: none;
|
||||
padding: 0.5rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: rgba(212, 179, 131, 0.1);
|
||||
color: #d4b383;
|
||||
}
|
||||
|
||||
.dropdown-item .icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
.admin-sidebar {
|
||||
width: 250px;
|
||||
background: rgba(5, 5, 5, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.03);
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.admin-sidebar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.admin-sidebar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #d4b383;
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.sidebar-nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-link, .nav-item-parent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
border-left: 3px solid transparent;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-item-parent {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-link-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-item-parent:hover {
|
||||
background-color: rgba(212, 179, 131, 0.1);
|
||||
color: white;
|
||||
border-left-color: rgba(212, 179, 131, 0.3);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background-color: rgba(212, 179, 131, 0.15);
|
||||
color: #d4b383;
|
||||
border-left-color: #d4b383;
|
||||
box-shadow: 0 0 15px rgba(212, 179, 131, 0.1);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
margin-right: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
min-width: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 0.95rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
font-size: 0.7rem;
|
||||
transition: transform 0.3s ease;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.nav-item-parent.expanded .nav-arrow {
|
||||
transform: rotate(180deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Submenu Styles */
|
||||
.submenu {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.sub-link {
|
||||
padding-left: 2.5rem;
|
||||
font-size: 0.9rem;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.sub-link .nav-icon {
|
||||
font-size: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: transparent;
|
||||
color: #d4b383;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
font-size: 0.95rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background-color: rgba(212, 179, 131, 0.1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(212, 179, 131, 0.1);
|
||||
}
|
||||
|
||||
/* Main Content Styles */
|
||||
.admin-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header Styles */
|
||||
.admin-header {
|
||||
background: rgba(5, 5, 5, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
|
||||
padding: 0 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
background-color: rgba(212, 179, 131, 0.1);
|
||||
color: #d4b383;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: 600;
|
||||
color: #d4b383;
|
||||
}
|
||||
|
||||
.role {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Content Area */
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Scrollbar Styles */
|
||||
.admin-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.admin-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.admin-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.admin-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #d4b383;
|
||||
box-shadow: 0 0 10px rgba(212, 179, 131, 0.4);
|
||||
}
|
||||
|
||||
.admin-content::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.admin-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
z-index: 1000;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.admin-sidebar.collapsed {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
/* Scoped styles replaced by Tailwind classes */
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user