Skip to content

Commit 7959e20

Browse files
julhoangjulhoang
committed
refactor: fold _nav_link.html into the header subcomponent folder
1 parent bf2153b commit 7959e20

8 files changed

Lines changed: 92 additions & 95 deletions

File tree

‎static/css/v3/components.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
@import "./cards-carousel.css";
88
@import "./badge.css";
99
@import "./v3-examples-section.css";
10-
@import "./nav-link.css";
1110
@import "./header.css";
1211
@import "./heros.css";
1312
@import "./footer.css";

‎static/css/v3/header.css‎

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,62 @@
7676
display: block;
7777
}
7878

79+
/* ── Header Nav Link with default, unread, selected, and hover states. ── */
80+
81+
.header__nav-link {
82+
display: flex;
83+
align-items: center;
84+
color: var(--color-text-primary);
85+
text-decoration: none;
86+
font-size: var(--font-size-small);
87+
font-weight: 400;
88+
font-family: var(--font-sans);
89+
line-height: var(--line-height-relaxed);
90+
letter-spacing: var(--letter-spacing-tight);
91+
padding: 0 var(--space-large);
92+
height: 32px;
93+
width: fit-content;
94+
border-radius: var(--border-radius-m);
95+
transition:
96+
color 0.15s ease,
97+
background-color 0.15s ease;
98+
}
99+
100+
/* ── Hover ─────────────────────────────────────── */
101+
102+
.header__nav-link:hover, .header__nav-link[data-hover] {
103+
color: var(--color-text-primary);
104+
background: var(--color-navigation-hover);
105+
}
106+
107+
/* ── Selected ──────────────────────────────────── */
108+
109+
.header__nav-link--active {
110+
text-decoration: underline !important;
111+
}
112+
113+
/* ── Unread (notification dot) ─────────────────── */
114+
115+
.header__nav-link--unread {
116+
position: relative;
117+
}
118+
119+
.header__nav-link-sr-hint {
120+
position: absolute;
121+
width: 1px;
122+
height: 1px;
123+
overflow: hidden;
124+
clip: rect(0, 0, 0, 0);
125+
}
126+
127+
.header__nav-link-dot {
128+
width: 4px;
129+
height: 4px;
130+
border-radius: 50%;
131+
margin-left: var(--space-s);
132+
background: var(--color-surface-brand-accent-default);
133+
}
134+
79135
/* ── Search ────────────────────────────────────── */
80136

81137
.header__search-bar {
@@ -297,7 +353,7 @@ html.dark .header__icon--theme-moon {
297353
z-index: 1000;
298354
}
299355

300-
.header__user-dropdown .nav-link {
356+
.header__user-dropdown .header__nav-link {
301357
padding: 0 var(--space-s);
302358
width: 100%;
303359
}
@@ -370,7 +426,7 @@ html.dark .header__icon--theme-moon {
370426
border-radius: var(--header-radius);
371427
}
372428

373-
.header__nav--desktop > .nav-link,
429+
.header__nav--desktop > .header__nav-link,
374430
.header__right,
375431
.header__search-kbd {
376432
display: none;

‎static/css/v3/nav-link.css‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎templates/v3/examples/_v3_example_section.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -808,14 +808,14 @@ <h3>{{ section_title }}</h3>
808808
</div>
809809
{% endwith %}
810810

811-
{% with section_title="Nav Link" %}
811+
{% with section_title="Header Nav Link" %}
812812
<div class="v3-examples-section__block" id="{{ section_title|slugify }}">
813813
<h3>{{ section_title }}</h3>
814814
<div class="v3-examples-section__example-box">
815815
<div style="display: flex; flex-direction: column; gap: var(--space-default); max-width: 200px;">
816-
{% include "v3/includes/_nav_link.html" with url="#" label="Default" %}
817-
{% include "v3/includes/_nav_link.html" with url="#" label="Unread" is_unread=True %}
818-
{% include "v3/includes/_nav_link.html" with url="#" label="Selected" is_active=True %}
816+
{% include "v3/includes/header/_header_nav_link.html" with url="#" label="Default" %}
817+
{% include "v3/includes/header/_header_nav_link.html" with url="#" label="Unread" is_unread=True %}
818+
{% include "v3/includes/header/_header_nav_link.html" with url="#" label="Selected" is_active=True %}
819819
</div>
820820
</div>
821821
</div>

‎templates/v3/includes/_header_v3.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
request (HttpRequest, required) — Django request object (for auth state)
1212

1313
Note: Subcomponents inherit the full parent context. Specifically:
14-
_nav_link.html uses: url, label, nav_id, is_unread, active_nav_item
14+
_header_nav_link.html uses: url, label, nav_id, is_unread, active_nav_item
1515
_header_utilities.html uses: releases_url, disable_theme_switcher, request, avatar_id
1616

1717
Usage:
@@ -30,7 +30,7 @@
3030
</a>
3131
{% comment %} Nav links {% endcomment %}
3232
{% for item in nav_links %}
33-
{% include "v3/includes/_nav_link.html" with url=item.url label=item.label nav_id=item.nav_id is_unread=item.is_unread %}
33+
{% include "v3/includes/header/_header_nav_link.html" with url=item.url label=item.label nav_id=item.nav_id is_unread=item.is_unread %}
3434
{% endfor %}
3535
</nav>
3636

@@ -57,7 +57,7 @@
5757
<div class="header__drawer" id="header-drawer">
5858
<nav class="header__drawer-nav" aria-label="Mobile navigation">
5959
{% for item in nav_links %}
60-
{% include "v3/includes/_nav_link.html" with url=item.url label=item.label nav_id=item.nav_id is_unread=item.is_unread %}
60+
{% include "v3/includes/header/_header_nav_link.html" with url=item.url label=item.label nav_id=item.nav_id is_unread=item.is_unread %}
6161
{% endfor %}
6262
</nav>
6363
{% include "v3/includes/header/_header_utilities.html" with avatar_id="mobile-user-menu" %}

‎templates/v3/includes/_nav_link.html‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎templates/v3/includes/header/_header_avatar.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
aria-orientation="vertical"
2222
aria-labelledby="{{ avatar_id }}-toggle"
2323
class="header__user-dropdown">
24-
{% include "v3/includes/_nav_link.html" with url=logout_url label="Logout" %}
25-
{% include "v3/includes/_nav_link.html" with url=profile_url label="My Profile" %}
26-
{% include "v3/includes/_nav_link.html" with url=profile_url label="Edit Profile" %}
24+
{% include "v3/includes/header/_header_nav_link.html" with url=logout_url label="Logout" %}
25+
{% include "v3/includes/header/_header_nav_link.html" with url=profile_url label="My Profile" %}
26+
{% include "v3/includes/header/_header_nav_link.html" with url=profile_url label="Edit Profile" %}
2727
</div>
2828
</div>

‎templates/v3/includes/header/_header_nav_link.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{% comment %}
2+
Header Nav Link — a single primary navigation link with four visual states.
3+
4+
States:
5+
default — base appearance
6+
unread — displays a notification dot after the label
7+
selected — highlights the currently active page
8+
hover — handled via CSS
9+
10+
Variables:
11+
url (string, required) — link href
12+
label (string, required) — link text
13+
nav_id (string, optional, default unset) — if set, compared to `active_nav_item` context to apply selected state
14+
is_active (bool, optional, default false) — explicitly applies selected state (overrides nav_id check)
15+
is_unread (bool, optional, default false) — shows notification dot
16+
17+
Usage:
18+
{% include "v3/includes/header/_header_nav_link.html" with url="/libraries/" label="Libraries" nav_id="libraries" %}
19+
{% include "v3/includes/header/_header_nav_link.html" with url="/news/" label="Posts" nav_id="news" is_unread=True %}
20+
{% include "v3/includes/header/_header_nav_link.html" with url="#" label="Selected" is_active=True %}
21+
{% endcomment %}
22+
<a href="{{ url }}" class="header__nav-link{% if is_active or nav_id and active_nav_item == nav_id %} header__nav-link--active{% endif %}{% if is_unread %} header__nav-link--unread{% endif %}"{% if is_active or nav_id and active_nav_item == nav_id %} aria-current="page"{% endif %}>
23+
{{ label }}{% if is_unread %}<span class="header__nav-link-sr-hint"> (new)</span><span class="header__nav-link-dot" aria-hidden="true"></span>{% endif %}
24+
</a>

0 commit comments

Comments
 (0)