Legacy 竖排导航栏

将默认的顶部导航栏改为左侧竖排布局，类似传统应用的侧边栏风格。

效果

导航栏从水平改为垂直排列
按钮增大为正方形，适合图标展示
按钮标签隐藏，仅显示图标
内容区域添加圆角卡片样式
深色/浅色主题均适配

适用场景

适合需要简洁侧边导航栏的用户，释放顶部垂直空间。

CSS

`style.css`

app-header {
  background-color: color-mix(in oklab, var(--color-surface-variant) 30%, transparent);
}

.dark app-header {
  background-color: color-mix(in oklab, var(--color-surface-variant) 15%, transparent);
}

app-content-container {
  padding-top: 8px;
  flex-direction: row;
  align-items: stretch;
  background-color: color-mix(in oklab, var(--color-surface-variant) 30%, transparent);
}

.dark app-content-container {
  background-color: color-mix(in oklab, var(--color-surface-variant) 15%, transparent);
}

app-content {
  width: calc(100% - 16px);
  border-top-left-radius: 24px;
  background-color: var(--color-mixed-background);
}

app-navbar {
  height: auto;
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
  padding: 0px 12px 8px 12px;
  background-color: transparent;
}

navbar-button {
  width: 54px;
  height: 54px !important;
  border-radius: 20px;
}

navbar-button[data-active="true"] {
  background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
}

navbar-button:hover {
  background-color: color-mix(in oklab, var(--color-surface-variant) 15%, transparent);
}

navbar-button-icon,
navbar-button-icon svg {
  width: 24px;
  height: 24px;
}

navbar-button-label {
  display: none;
}