左侧垂直响应式导航菜单实现方法

原代码缺陷：未启用Flex布局导致布局偏差

原代码里，.mobile-na v虽然设定了position: fixed并占满全宽，但内部列表根本没启用Flex布局。于是.na v-item还是按文档流往下排——这看似“也对”，但实际上和期望的图标+文字垂直居中、等宽分栏式侧边菜单差距不小。

修复关键：启用Flex容器并合理分配空间

修复的关键，说到底在于两件事：一是为导航容器启用Flex，二是合理分配空间。直接看修正后的CSS：

.mobile-na v {  
  position: fixed;  
  bottom: 0;  
  left: 0;  
  width: 100%;  
  height: 100vh; /* 替换原错误语法：(var(--vh, 1vh) * 100) → 应为 calc(100vh) 或直接 100vh */  
  background-color: var(--primary-container);  
  color: var(--on-background-variant);  
  padding-block: 12px 16px;  
  z-index: 4;  
  box-shadow: var(--shadow-1);  
}  

/* 启用水平主轴布局，使菜单项横向排列（适用于底部横栏）*/  
/* 但若需「左侧垂直菜单」，应改为： */  
.mobile-na v .na vbar-list {  
  display: flex;  
  flex-direction: column; /* 垂直排列菜单项 */  
  height: 100%;           /* 占满父容器高度 */  
  justify-content: center; /* 垂直居中（可选） */  
  gap: 8px;               /* 项目间间距 */  
}  

.mobile-na v .na vbar-list .na v-item {  
  width: 100%;            /* 确保每项宽度撑满 */  
}  

.mobile-na v .na vbar-list .na v-item .na v-link {  
  display: flex;  
  flex-direction: row;    /* 图标在左，文字在右 */  
  align-items: center;  
  gap: 12px;  
  padding: 10px 16px;  
  border-radius: 8px;  
  text-decoration: none;  
  color: inherit;  
  transition: background-color 0.2s;  
}  

.mobile-na v .na vbar-list .na v-item .na v-link:hover,  
.mobile-na v .na vbar-list .na v-item .na v-link[aria-current="true"] {  
  background-color: rgba(255, 255, 255, 0.1);  
}

注意事项与常见陷阱

• 原代码里height: (var(--vh, 1vh) * 100)是无效语法——CSS里直接用*做运算是不行的。如果真想用变量，得写成height: calc(var(--vh, 1vh) * 100)，同时确保--vh已经正确定义。
• 如果目标是左侧垂直菜单，那.mobile-na v的定位就不能再是bottom: 0; left: 0;了，得改成top: 0; left: 0;，宽度也要收紧——比如窄栏用80px，带文字的菜单用240px，同时把width: 100%去掉。
• Material Symbols图标需要引入Google Fonts CDN或者本地字体文件，否则图标不会显示。
• 建议给.na v-link加上text-decoration: none和color: inherit，这样默认链接样式就不会干扰整体设计了。

最终效果与适用场景

最后看最终的效果：菜单纵向贴靠页面左侧，每个导航项里图标和文字水平对齐、等距分布，悬停时有反馈，当前页有高亮。这套方案既保留了语义化的HTML结构，又用上了现代CSS的布局能力，不管是桌面端的侧边导航，还是移动端的抽屉菜单，都能拿来当基础框架。