zenn/ghost.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.23 좌측 네비 및 태그 라우트 정리

Browse Source
This commit is contained in:
zenn
2026-04-14 10:43:24 +09:00
parent f746480163
commit 615dd8968d
11 changed files with 215 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
assets/built/screen.css
View File

@@ -171,46 +171,84 @@ body.left-sidebar-collapsed .sidebar--left {
}
.menu-groups {
display: grid;
gap: 2px;
padding-top: 18px;
padding-bottom: 16px;
display: block;
}
.menu-groups__list {
display: flex;
flex-direction: column;
}
.menu-group {
border-bottom: 0;
}
.menu-group__trigger {
.menu-group--nav {
gap: 0;
}
.menu-group__trigger,
.menu-group__link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 10px;
padding: 6px 0;
border: 0;
border-radius: 15px;
border-radius: 18px;
background: none;
color: inherit;
cursor: pointer;
transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.menu-group__content {
height: 0;
padding: 2px 0 0;
transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
will-change: height;
overflow: hidden;
.menu-group__trigger {
justify-content: space-between;
}
.menu-group__link {
flex: 1 1 auto;
gap: 8px;
}
.menu-group__link:hover,
.menu-group__link--toggle:hover,
.menu-group__toggle:hover {
background: var(--surface-muted);
}
.menu-group__link:hover,
.menu-group__link--toggle:hover {
padding-left: 12px;
padding-right: 12px;
}
.menu-group__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 32px;
height: 32px;
border: 0;
background: transparent;
}
.menu-group__panel {
will-change: height, opacity;
}
.menu-group__content > * {
padding: 6px 0 12px;
padding: 3px 0 0;
}
.menu-group .nav {
margin: 0;
padding: 2px 0 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 3px;
margin-left: 14px;
margin-top: 3px;
border-left: 1px solid var(--border);
padding-left: 0;
}
.menu-group .nav li + li,
@@ -224,10 +262,12 @@ body.left-sidebar-collapsed .sidebar--left {
}
.menu-group .nav a {
display: block;
padding: 8px 14px 8px 30px;
border-radius: 13px;
transition: background-color 0.22s ease, color 0.22s ease;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0 6px 16px;
border-radius: 18px;
transition: background-color 0.22s ease, color 0.22s ease, padding 0.22s ease;
font-size: 13px;
}
@@ -235,6 +275,8 @@ body.left-sidebar-collapsed .sidebar--left {
.menu-sub-link:hover {
background: var(--surface-muted);
color: var(--text);
padding-left: 12px;
padding-right: 12px;
}
.link-list {
@@ -245,19 +287,12 @@ body.left-sidebar-collapsed .sidebar--left {
.menu-sub-link {
display: block;
padding: 8px 14px 8px 30px;
border-radius: 13px;
transition: background-color 0.22s ease, color 0.22s ease;
padding: 6px 0 6px 16px;
border-radius: 18px;
transition: background-color 0.22s ease, color 0.22s ease, padding 0.22s ease;
font-size: 13px;
}
.menu-link {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.menu-link__marker {
position: relative;
flex: 0 0 auto;
@@ -275,22 +310,15 @@ body.left-sidebar-collapsed .sidebar--left {
letter-spacing: -0.015em;
}
.menu-group__trigger:hover,
.menu-group__trigger[aria-expanded="true"] {
background: var(--surface-muted);
}
.menu-group__trigger:hover {
transform: translateX(1px);
}
.menu-group__trigger:hover .menu-link__label,
.menu-group__trigger[aria-expanded="true"] .menu-link__label {
.menu-group__trigger[aria-expanded="true"] .menu-link__label,
.menu-group__link:hover .menu-link__label {
color: var(--text);
}
.menu-group__trigger:hover .menu-link__marker,
.menu-group__trigger[aria-expanded="true"] .menu-link__marker {
.menu-group__trigger[aria-expanded="true"] .menu-link__marker,
.menu-group__link:hover .menu-link__marker {
width: 10px;
height: 10px;
border-radius: 999px;
@@ -314,20 +342,12 @@ body.left-sidebar-collapsed .sidebar--left {
display: block;
}
.menu-group__chevron-icon--up {
display: none;
}
.menu-group.is-open .menu-group__chevron {
color: var(--text-soft);
}
.menu-group.is-open .menu-group__chevron-icon--down {
display: none;
}
.menu-group.is-open .menu-group__chevron-icon--up {
display: block;
.menu-group__content--nav {
padding-top: 0;
}
.sidebar-card {