src/assets/css/appSidebar.css
/* DaisyUI侧边栏样式 - 专为MaiLauncher定制 */

/* 侧边栏基础样式 - 保留变量以便于配置 */
.sidebar {
  --sidebar-width-collapsed: 64px;
  --sidebar-width-expanded: 220px;
  --sidebar-transition: width 0.3s ease;
  --sidebar-bg-opacity: 0.85;
  --sidebar-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

  @apply fixed left-0 top-0 h-screen flex flex-col overflow-hidden z-50;
  width: var(--sidebar-width-collapsed);
  transition: var(--sidebar-transition);
  background-color: hsl(var(--b1) / var(--sidebar-bg-opacity));
  backdrop-filter: blur(10px);
  box-shadow: var(--sidebar-shadow);
  border-right: 1px solid hsl(var(--b3) / 0.2);
}

/* 展开状态 */
.sidebar-expanded {
  width: var(--sidebar-width-expanded);
}

/* 头部Logo区域 */
.sidebar-header {
  @apply p-4 flex items-center justify-center border-b border-base-300/10;
}

.sidebar-expanded .sidebar-header {
  @apply justify-start;
}

/* 菜单部分 */
.sidebar .menu {
  @apply p-2 overflow-hidden;
  height: auto; /* 自适应内容高度 */
}

/* 确保侧边栏内容可以正确布局 */
.sidebar {
  display: flex;
  flex-direction: column;
}

.sidebar .menu {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

/* 确保底部组件正确定位 */
.sidebar-footer-section {
  @apply mt-auto;
  flex-shrink: 0;
}

.sidebar-footer {
  @apply border-t border-base-300/10 p-4 flex justify-center;
  flex-shrink: 0;
}

.sidebar-expanded .sidebar-footer {
  @apply justify-start;
}

/* 完全移除侧边栏滚动条 */
.sidebar .menu::-webkit-scrollbar {
  display: none;
}

/* 强制隐藏右侧滚动条 */
.sidebar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* 控制菜单项的图标和文本对齐 - 重构版本 */
.sidebar .menu a {
  @apply flex items-center rounded-btn transition-all duration-200;
  padding: 0.75rem;
  min-height: 3rem;
  width: 100%;
  justify-content: center;
}

.sidebar-expanded .menu a {
  justify-content: flex-start;
  padding: 0.75rem 1rem;
}

/* 图标和文本的间距处理 - 改进版本 */
.sidebar .menu a .iconify,
.sidebar .menu a svg,
.sidebar .menu a .icon {
  @apply flex-shrink-0;
  font-size: 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-expanded .menu a .iconify,
.sidebar-expanded .menu a svg,
.sidebar-expanded .menu a .icon {
  margin-right: 0.75rem;
}

/* 激活状态 */
.sidebar .menu a.active {
  @apply bg-primary/20 text-primary-content;
}

/* 悬停状态 */
.sidebar .menu a:hover {
  @apply bg-primary/10 text-primary-content;
}

/* 文本显示控制 */
.sidebar-text {
  @apply opacity-0 w-0 whitespace-nowrap overflow-hidden transition-opacity duration-300;
}

.sidebar-expanded .sidebar-text {
  @apply opacity-100 w-auto;
}

/* 底部控制区域 */
.sidebar-footer {
  @apply mt-auto p-4 border-t border-base-300/10;
}

/* 深色模式调整 - 自动利用DaisyUI主题系统 */
[data-theme="dark"] .sidebar,
[data-theme="night"] .sidebar,
[data-theme="black"] .sidebar,
[data-theme="dracula"] .sidebar {
  --sidebar-bg-opacity: 0.75;
  --sidebar-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .sidebar,
  .sidebar.sidebar-expanded {
    width: var(--sidebar-width-collapsed);
  }

  .sidebar-text,
  .sidebar-title {
    @apply hidden !important;
  }
}

/* 确保菜单项是可点击的 */
.menu li a {
  @apply cursor-pointer select-none;
}

/* 点击菜单项时的反馈效果 */
.menu li a:active {
  @apply scale-[0.98] opacity-90 transition-transform duration-100;
}

/* 确保菜单项有足够的垂直间距 */
.menu li {
  @apply mb-1;
}

/* 确保图标总是显示 */
.menu a .iconify,
.menu a .icon,
.menu a svg {
  @apply flex-shrink-0 inline-flex items-center justify-center;
}

/* Iconify图标专用样式增强 */
.sidebar .iconify {
  font-size: 18px; /* 统一减小图标大小 */
  width: 18px;
  height: 18px;
}

/* 添加切换按钮过渡效果 */
.sidebar-footer .btn {
  @apply transition-all duration-200;
  border-radius: 6px; /* 与实例按钮保持一致的圆角 */
  background: transparent !important;
  border: none !important;
}

.sidebar-footer .btn:hover {
  background: var(--glass-bg) !important;
  border: 1px solid oklch(var(--p) / 0.2) !important;
}

/* 确保折叠/展开按钮效果良好 */
.sidebar-footer .btn .iconify {
  @apply transition-transform duration-300;
  font-size: 18px; /* 统一减小图标大小 */
  width: 18px;
  height: 18px;
}

.sidebar-expanded .sidebar-footer .btn .iconify[icon*="chevron-left"] {
  @apply -rotate-180;
}

/* 侧边栏底部组件样式改进 */
.sidebar-footer {
  @apply border-t border-base-300/10 p-4 flex justify-center;
}

.sidebar-expanded .sidebar-footer {
  @apply justify-start;
}

/* 确保展开按钮在两种状态下都对齐 - 改进版本 */
.sidebar-footer .btn {
  @apply flex items-center transition-all duration-200;
  justify-content: center;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
}

.sidebar-expanded .sidebar-footer .btn {
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
}

/* 保持图标和文字之间的间距 - 改进版本 */
.sidebar-footer .btn .iconify {
  @apply transition-transform duration-300;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-expanded .sidebar-footer .btn .iconify {
  margin-right: 0;
}

/* 收起按钮文本控制 */
.sidebar-footer .btn .sidebar-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.sidebar-expanded .sidebar-footer .btn .sidebar-text {
  opacity: 1;
  width: auto;
  margin-left: 0.5rem;
}
