Skip to content

Commit bc055da

Browse files
devbatterydevbattery
committed
feat: UX 개선
1 parent 22637b9 commit bc055da

4 files changed

Lines changed: 259 additions & 11 deletions

File tree

‎_includes/nav_list‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
11
{% assign navigation = site.data.navigation[include.nav] %}
22
{% assign sum = site.posts | size %}
3+
{% assign all_posts_url = site.category_archive.path | default: "/categories/" %}
34

4-
<nav class="nav__list">
5-
{% if page.sidebar.title %}<h3 class="nav__title" style="padding-left: 0;">{{ page.sidebar.title }}</h3>{% endif %}
5+
<nav class="nav__list nav__list--categories">
6+
{% if page.sidebar.title %}<h3 class="nav__title nav__title--sidebar">{{ page.sidebar.title }}</h3>{% endif %}
67
<input id="ac-toc" name="accordion-toc" type="checkbox" />
7-
<label for="ac-toc">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle Menu" }}</label>
8-
<li> All Posts (<span style="font-weight: bold;">{{sum}}</span>) </li>
9-
<ul class="nav__items">
8+
<label for="ac-toc">Browse categories</label>
9+
10+
<a
11+
href="{{ all_posts_url | relative_url }}"
12+
class="nav__all-posts-link{% if page.url == all_posts_url %} is-active{% endif %}"
13+
>
14+
<span class="nav__all-posts-title">All Posts</span>
15+
<span class="nav__all-posts-count">{{ sum }}</span>
16+
</a>
17+
18+
<ul class="nav__items nav__items--category-groups">
1019
{% for nav in navigation %}
11-
<li>
20+
<li class="nav__group">
1221
{% if nav.url %}
13-
<a href="{{ nav.url | relative_url }}"><span class="nav__sub-title">{{ nav.title }}</span></a>
22+
<a class="nav__group-title-link" href="{{ nav.url | relative_url }}">
23+
<span class="nav__sub-title nav__sub-title--group">{{ nav.title }}</span>
24+
</a>
1425
{% else %}
15-
<span class="nav__sub-title">{{ nav.title }}</span>
26+
<span class="nav__sub-title nav__sub-title--group">{{ nav.title }}</span>
1627
{% endif %}
1728

1829
{% if nav.children != null %}
19-
<ul>
30+
<ul class="nav__group-links">
2031
{% for child in nav.children %}
2132

2233
{% comment %}
@@ -28,11 +39,16 @@
2839
{% endif %}
2940
{% endfor %}
3041

31-
<li><a href="{{ child.url | relative_url }}"{% if child.url == page.url %} class="active"{% endif %}>{{ child.title }} ({{ post_cnt }})</a></li>
42+
<li>
43+
<a href="{{ child.url | relative_url }}"{% if child.url == page.url %} class="nav__child-link active"{% else %} class="nav__child-link"{% endif %}>
44+
<span class="nav__child-title">{{ child.title }}</span>
45+
<span class="nav__child-count">{{ post_cnt }}</span>
46+
</a>
47+
</li>
3248
{% endfor %}
3349
</ul>
3450
{% endif %}
3551
</li>
3652
{% endfor %}
3753
</ul>
38-
</nav>
54+
</nav>

‎_sass/minimal-mistakes/_sidebar-nav-modern.scss‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
/* ==========================================================================
2+
Sidebar Navigation (Modern)
3+
========================================================================== */
4+
5+
.nav__list--categories {
6+
margin-top: 0.5rem;
7+
padding: 0.9rem;
8+
border: 1px solid mix($border-color, $primary-color, 82%);
9+
border-radius: 16px;
10+
background:
11+
radial-gradient(
12+
circle at 100% 0%,
13+
rgba($primary-color, 0.14) 0,
14+
rgba($primary-color, 0) 50%
15+
),
16+
linear-gradient(
17+
165deg,
18+
mix($background-color, #fff, 95%) 0%,
19+
mix($background-color, $primary-color, 94%) 100%
20+
);
21+
box-shadow: 0 20px 28px -28px rgba(#000, 0.7);
22+
}
23+
24+
.nav__list--categories .nav__title--sidebar {
25+
padding-left: 0;
26+
margin-bottom: 0.65rem;
27+
}
28+
29+
.nav__list--categories .nav__all-posts-link {
30+
display: flex;
31+
align-items: center;
32+
justify-content: space-between;
33+
gap: 0.75rem;
34+
margin-bottom: 0.75rem;
35+
padding: 0.6rem 0.75rem;
36+
border: 1px solid rgba($primary-color, 0.26);
37+
border-radius: 12px;
38+
color: $text-color;
39+
text-decoration: none;
40+
background: linear-gradient(
41+
130deg,
42+
rgba($primary-color, 0.18),
43+
rgba($primary-color, 0.06)
44+
);
45+
transition:
46+
transform 0.2s ease,
47+
box-shadow 0.2s ease,
48+
border-color 0.2s ease;
49+
}
50+
51+
.nav__list--categories .nav__all-posts-link:hover {
52+
transform: translateY(-1px);
53+
border-color: rgba($primary-color, 0.34);
54+
box-shadow: 0 12px 20px -18px rgba(#000, 0.8);
55+
}
56+
57+
.nav__list--categories .nav__all-posts-link.is-active {
58+
border-color: rgba($primary-color, 0.42);
59+
box-shadow: 0 12px 20px -18px rgba($primary-color, 0.6);
60+
}
61+
62+
.nav__list--categories .nav__all-posts-title {
63+
font-weight: bold;
64+
letter-spacing: 0.01em;
65+
}
66+
67+
.nav__list--categories .nav__all-posts-count {
68+
min-width: 2.1rem;
69+
height: 1.5rem;
70+
padding: 0 0.55rem;
71+
border-radius: 999px;
72+
font-family: $sans-serif;
73+
font-size: $type-size-8;
74+
font-weight: bold;
75+
line-height: 1.5rem;
76+
color: #fff;
77+
text-align: center;
78+
background: $primary-color;
79+
box-shadow: 0 6px 12px -9px rgba(#000, 0.9);
80+
}
81+
82+
.nav__list--categories .nav__items--category-groups {
83+
display: flex;
84+
flex-direction: column;
85+
gap: 0.65rem;
86+
margin-top: 0.45rem;
87+
font-size: $type-size-7;
88+
}
89+
90+
.nav__list--categories .nav__group {
91+
padding: 0.5rem;
92+
border: 1px solid mix($border-color, $primary-color, 88%);
93+
border-radius: 12px;
94+
background-color: rgba($primary-color, 0.04);
95+
animation: sidebar-nav-group-in 0.35s ease both;
96+
}
97+
98+
.nav__list--categories .nav__group:nth-child(2) {
99+
animation-delay: 0.04s;
100+
}
101+
102+
.nav__list--categories .nav__group:nth-child(3) {
103+
animation-delay: 0.08s;
104+
}
105+
106+
.nav__list--categories .nav__group:nth-child(4) {
107+
animation-delay: 0.12s;
108+
}
109+
110+
.nav__list--categories .nav__group:nth-child(5) {
111+
animation-delay: 0.16s;
112+
}
113+
114+
.nav__list--categories .nav__group-title-link {
115+
text-decoration: none;
116+
}
117+
118+
.nav__list--categories .nav__sub-title--group {
119+
margin: 0;
120+
padding: 0.2rem 0.3rem 0.4rem;
121+
border-bottom: none;
122+
font-size: $type-size-7;
123+
font-weight: bold;
124+
text-transform: none;
125+
letter-spacing: 0.01em;
126+
color: mix($text-color, $primary-color, 72%);
127+
}
128+
129+
.nav__list--categories .nav__group-links {
130+
margin: 0;
131+
padding: 0;
132+
list-style: none;
133+
}
134+
135+
.nav__list--categories .nav__child-link {
136+
display: flex;
137+
align-items: center;
138+
justify-content: space-between;
139+
gap: 0.6rem;
140+
margin: 0.18rem 0;
141+
padding: 0.42rem 0.56rem;
142+
border: 1px solid transparent;
143+
border-radius: 10px;
144+
color: inherit;
145+
text-decoration: none;
146+
transition:
147+
transform 0.18s ease,
148+
border-color 0.18s ease,
149+
background-color 0.18s ease;
150+
}
151+
152+
.nav__list--categories .nav__child-link:hover {
153+
transform: translateX(2px);
154+
border-color: rgba($primary-color, 0.26);
155+
background-color: rgba($primary-color, 0.1);
156+
}
157+
158+
.nav__list--categories .nav__items .active {
159+
margin-left: 0;
160+
padding-left: 0;
161+
padding-right: 0;
162+
}
163+
164+
.nav__list--categories .nav__child-link.active {
165+
padding-left: 0.56rem;
166+
padding-right: 0.56rem;
167+
font-weight: bold;
168+
color: #fff;
169+
background-color: mix($primary-color, #000, 88%);
170+
box-shadow: 0 10px 14px -12px rgba(#000, 0.9);
171+
}
172+
173+
.nav__list--categories .nav__child-title {
174+
overflow: hidden;
175+
text-overflow: ellipsis;
176+
white-space: nowrap;
177+
}
178+
179+
.nav__list--categories .nav__child-count {
180+
min-width: 1.65rem;
181+
height: 1.3rem;
182+
padding: 0 0.4rem;
183+
border-radius: 999px;
184+
font-size: $type-size-8;
185+
font-weight: bold;
186+
line-height: 1.3rem;
187+
color: mix($text-color, $primary-color, 65%);
188+
text-align: center;
189+
background-color: rgba($primary-color, 0.12);
190+
}
191+
192+
.nav__list--categories .nav__child-link.active .nav__child-count {
193+
color: #fff;
194+
background-color: rgba(#fff, 0.22);
195+
}
196+
197+
@include breakpoint(max-width $large - 1px) {
198+
.nav__list--categories {
199+
border-radius: 14px;
200+
}
201+
202+
.nav__list--categories label {
203+
width: 100%;
204+
border-radius: 10px;
205+
margin-bottom: 0.6rem;
206+
background-color: mix($background-color, $primary-color, 92%);
207+
}
208+
}
209+
210+
@keyframes sidebar-nav-group-in {
211+
from {
212+
opacity: 0;
213+
transform: translateY(8px);
214+
}
215+
216+
to {
217+
opacity: 1;
218+
transform: translateY(0);
219+
}
220+
}
221+
222+
@media (prefers-reduced-motion: reduce) {
223+
.nav__list--categories .nav__all-posts-link,
224+
.nav__list--categories .nav__group,
225+
.nav__list--categories .nav__child-link {
226+
transition: none;
227+
animation: none;
228+
transform: none;
229+
}
230+
}

‎assets/css/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ search: false
1010
@import "minimal-mistakes/skins/default"; // 변경
1111
@import "minimal-mistakes";
1212
@import "minimal-mistakes/nav-enhancements";
13+
@import "minimal-mistakes/sidebar-nav-modern";
1314

1415
@import url("//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css");
1516

‎assets/css/main_dark.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ search: false
1010
@import "minimal-mistakes/skins/dark"; // 변경
1111
@import "minimal-mistakes";
1212
@import "minimal-mistakes/nav-enhancements";
13+
@import "minimal-mistakes/sidebar-nav-modern";
1314

1415
@import url('//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css');
1516

0 commit comments

Comments
 (0)