fix: center sidebar footer divider and correct Apps arrow
Use equal-width Apps and Settings buttons so the divider stays centered. Increase divider visibility and point the Apps arrow upward to match the menu opening direction. Release note: Make the sidebar footer divider clearer and centered, and align the Apps arrow with its upward-opening menu.
This commit is contained in:
@@ -179,7 +179,7 @@ Main 继续校验可信 sender、Zod 输入,复用 `ApplicationSettingsStore`
|
||||
<button className="nav-item" onClick={toggleApplicationMenu} aria-haspopup="menu" aria-expanded={applicationMenuOpen} ...>
|
||||
<Grid2X2 aria-hidden="true" />
|
||||
<span>{t('applications.menuLabel')}</span>
|
||||
<ChevronDown aria-hidden="true" />
|
||||
<ChevronUp aria-hidden="true" />
|
||||
</button>
|
||||
<div className="sidebar-footer__divider" aria-hidden="true" />
|
||||
<button className="nav-item" aria-label={t('navigation.settings')} ...>
|
||||
|
||||
@@ -41,15 +41,15 @@
|
||||
|
||||
## 2. 底部应用中心入口
|
||||
|
||||
底部使用连续平整表面和顶部分隔线,“应用”在前,“设置”靠右,二者为横向排列的等高 `nav-item` 独立按钮,中间使用弱竖分隔线:
|
||||
底部使用连续平整表面和顶部分隔线,“应用”在前,“设置”靠右,二者为横向排列的等宽、等高 `nav-item` 独立按钮,内容各自居中,竖分隔线位于底部入口区域的正中间:
|
||||
|
||||
| 位置 | 图标 | 可见文字 | 点击结果 |
|
||||
| --- | --- | --- | --- |
|
||||
| 1 | `Grid2X2` + `ChevronDown` | 应用 / Apps | 向上展开已启用应用菜单,底部“管理应用”进入管理 Modal |
|
||||
| 1 | `Grid2X2` + `ChevronUp` | 应用 / Apps | 向上展开已启用应用菜单,底部“管理应用”进入管理 Modal |
|
||||
| 末位 | `Settings` | 设置 / Settings | 在当前工作区上打开设置 Modal |
|
||||
|
||||
图标使用项目现有 Lucide 库。两个按钮均保留可见文字,沿用主导航的高度、间距和焦点样式;
|
||||
“应用”文字后显示向下箭头,菜单仍向上展开。不得把整个容器做成设置按钮。
|
||||
“应用”文字后显示向上箭头,与菜单展开方向一致。竖分隔线宽 1px、高 `--space-6`,使用 `--border-control`,确保在侧栏背景上可辨。不得把整个容器做成设置按钮。
|
||||
|
||||
### 2.1 状态
|
||||
|
||||
|
||||
@@ -31,6 +31,7 @@ import {
|
||||
Check,
|
||||
CheckCircle2,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
ChevronRight,
|
||||
CircleAlert,
|
||||
CircleHelp,
|
||||
@@ -9350,7 +9351,7 @@ function App(): React.JSX.Element {
|
||||
>
|
||||
<Grid2X2 size={17} aria-hidden="true" />
|
||||
<span>{t("applications.menuLabel")}</span>
|
||||
<ChevronDown size={16} aria-hidden="true" />
|
||||
<ChevronUp size={16} aria-hidden="true" />
|
||||
</button>
|
||||
<div className="sidebar-footer__divider" aria-hidden="true" />
|
||||
<button
|
||||
|
||||
@@ -205,7 +205,8 @@
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.sidebar-footer--applications > .nav-item {
|
||||
flex: 1 0 auto;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
gap: var(--space-2);
|
||||
padding-inline: var(--space-2);
|
||||
justify-content: center;
|
||||
@@ -216,6 +217,6 @@
|
||||
}
|
||||
.sidebar-footer__divider {
|
||||
flex: 0 0 1px;
|
||||
height: var(--space-4);
|
||||
background: var(--border-subtle);
|
||||
height: var(--space-6);
|
||||
background: var(--border-control);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user