Skip to content

Commit 22a2316

Browse files
talbstalbs
committed
revise drawer-based products nav
* use tab pattern/metaphor * refactor CSS
1 parent 614e525 commit 22a2316

File tree

4 files changed

+93
-58
lines changed

4 files changed

+93
-58
lines changed

‎packages/webawesome/docs/_includes/base.njk‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,7 @@
8787
{# Sidebar - Mobile Selectors #}
8888
{% if hasSidebar %}
8989
<div class="wa-mobile-only" slot="navigation-header">
90-
<div class="wa-split">
91-
{% include "nav-products-drawer.njk" %}
92-
93-
<div class="wa-cluster wa-gap-0 wa-flex-nowrap">
94-
{% include "theme-selector.njk" %}
95-
{% include "color-scheme-selector.njk" %}
96-
{% include "github-icon-buttons.njk" %}
97-
</div>
98-
</div>
90+
{% include "nav-products-drawer.njk" %}
9991
</div>
10092
{% endif %}
10193
{% endblock %}
@@ -104,9 +96,14 @@
10496
{% block pageNavigation %}
10597
{# Sidebar - Navigation #}
10698
{% if hasSidebar %}
107-
<div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
108-
{% include "sidebar.njk" %}
109-
</div>
99+
<div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
100+
<div class="wa-cluster wa-gap-0 wa-flex-nowrap">
101+
{% include "theme-selector.njk" %}
102+
{% include "color-scheme-selector.njk" %}
103+
</div>
104+
105+
{% include "sidebar.njk" %}
106+
</div>
110107
{% endif %}
111108
{% endblock %}
112109

‎packages/webawesome/docs/_includes/nav-products-drawer.njk‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
<div class="wa-cluster wa-gap-0 wa-flex-nowrap nav-products-simple">
2-
<wa-button appearance="plain" href="/" aria-label="Web Awesome" class="product product-web-awesome product-active" data-track-event="navigation:product_link_click" data-track-destination="web-awesome" data-track-context="mobile">
3-
<wa-icon name="web-awesome" family="brands" class="icon-embiggen logo-web-awesome"></wa-icon>
4-
</wa-button>
5-
<wa-button appearance="plain" href="https://fontawesome.com" aria-label="Font Awesome" class="product product-font-awesome" data-track-event="navigation:product_link_click" data-track-destination="font-awesome" data-track-context="mobile">
6-
<wa-icon name="font-awesome" family="brands" class="icon-embiggen logo-font-awesome"></wa-icon>
7-
</wa-button>
8-
<wa-button appearance="plain" href="https://eleventy.dev" aria-label="Eleventy" class="product product-eleventy" data-track-event="navigation:product_link_click" data-track-destination="eleventy" data-track-context="mobile">
9-
<wa-icon src="/assets/images/logo-eleventy-icon.svg" class="icon-embiggen logo-eleventy"></wa-icon>
10-
</wa-button>
1+
<div class="wa-cluster wa-gap-0 wa-flex-nowrap nav-products nav-products-drawer">
2+
<a href="/" class="wa-stack wa-justify-content-center product product-web-awesome product-active" aria-label="Web Awesome" data-track-event="navigation:product_link_click" data-track-destination="web-awesome" data-track-context="products_drawer_nav" id="product-drawer-web-awesome">
3+
<wa-icon name="web-awesome" family="brands" class="logo-icon logo-web-awesome"></wa-icon>
4+
</a>
5+
<wa-tooltip for="product-drawer-web-awesome">Web Awesome</wa-tooltip>
6+
<a href="https://fontawesome.com" class="wa-stack wa-justify-content-center product product-font-awesome" data-track-event="navigation:product_link_click" data-track-destination="font-awesome" data-track-context="products_drawer_nav" id="product-drawer-font-awesome">
7+
<wa-icon name="font-awesome" family="brands" class="logo-icon logo-font-awesome"></wa-icon>
8+
</a>
9+
<wa-tooltip for="product-drawer-font-awesome">Font Awesome</wa-tooltip>
10+
<a href="https://eleventy.dev" class="wa-stack wa-justify-content-center product product-eleventy" aria-label="Eleventy" data-track-event="navigation:product_link_click" data-track-destination="eleventy" data-track-context="products_drawer_nav" id="product-drawer-eleventy">
11+
<wa-icon src="/assets/images/logo-eleventy-icon.svg" class="logo-icon logo-eleventy"></wa-icon>
12+
</a>
13+
<wa-tooltip for="product-drawer-eleventy">Eleventy</wa-tooltip>
1114
</div>

‎packages/webawesome/docs/_includes/nav-products.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="wrapper-nav-products">
2-
<nav class="nav-products" aria-label="Awesomeverse Products + Links">
2+
<nav class="nav-products nav-products-full" aria-label="Awesomeverse Products + Links">
33
<div class="nav-products-primary wa-split wa-align-items-stretch">
44
<div class="wa-cluster wa-align-items-stretch wa-gap-0">
55
<a href="/" class="product product-web-awesome product-active" aria-label="Web Awesome" data-track-event="navigation:product_link_click" data-track-destination="web-awesome" data-track-context="products_nav">

‎packages/webawesome/docs/assets/styles/utils.css‎

Lines changed: 70 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -92,54 +92,75 @@
9292
}
9393

9494
/* products nav */
95-
wa-page > [slot='header'] {
96-
/* reset default page component-based header styles */
97-
padding: 0;
98-
gap: 0;
95+
.nav-products .product {
96+
border-radius: var(--wa-border-radius-s) var(--wa-border-radius-s) 0 0;
97+
line-height: 1;
98+
99+
&.product-active {
100+
background-color: var(--wa-color-surface-default);
101+
/* nudge the non-first/second products to account for extra inline-start padding */
102+
margin-inline-start: var(--nudge-inline-start, calc(var(--wa-form-control-padding-inline) * -1));
103+
}
104+
}
99105

100-
container-type: inline-size;
101-
container-name: header;
106+
/* full sized */
107+
.wrapper-nav-products {
108+
background-color: var(--wa-color-surface-lowered);
109+
padding-block-start: var(--wa-space-xs);
110+
padding-inline: var(--content-padding-inline);
111+
inline-size: 100%;
112+
}
102113

103-
.wrapper-nav-products {
104-
background-color: var(--wa-color-surface-lowered);
105-
padding-block-start: var(--wa-space-xs);
106-
padding-inline: var(--content-padding-inline);
107-
inline-size: 100%;
114+
.nav-products-full {
115+
.product {
116+
padding-block: var(--wa-space-m);
117+
padding-inline: var(--wa-space-xl);
118+
119+
/* nudge the non-first/second products to account for extra inline-start padding */
120+
&:nth-child(n + 3) {
121+
margin-inline-start: calc(-1 * var(--wa-space-xl));
122+
}
108123
}
109124

110-
.nav-products {
111-
.product {
112-
padding-block: var(--wa-space-m);
113-
padding-inline: var(--wa-space-xl);
114-
border-radius: var(--wa-border-radius-s) var(--wa-border-radius-s) 0 0;
115-
line-height: 1;
125+
.logo-icon {
126+
font-size: 1.5rem; /* ~ 24px to match .logo-svg height */
127+
}
116128

117-
&.product-active {
118-
background-color: var(--wa-color-surface-default);
129+
.logo-svg {
130+
width: auto;
131+
height: var(--awesome-logo-height, 1.5rem);
132+
}
133+
}
119134

120-
/* nudge the active product so that logo aligns with button labels in lower nav */
121-
margin-inline-start: calc(var(--wa-form-control-padding-inline) * -1);
122-
}
135+
.nav-products-secondary .pseudo-product wa-icon {
136+
font-size: var(--wa-font-size-l);
137+
}
123138

124-
/* nudge the non-first/second products to account for extra inline-start padding */
125-
&:nth-child(n + 3) {
126-
margin-inline-start: calc(-1 * var(--wa-space-xl));
127-
}
128-
}
139+
/* drawer-based */
140+
.nav-products-drawer {
141+
.product {
142+
/* match dimensions of drawer's close-button */
143+
padding-inline: var(--wa-form-control-padding-inline);
144+
height: var(--wa-form-control-height);
129145

130-
.logo-icon {
131-
font-size: 1.5rem; /* ~ 24px to match .logo-svg height */
146+
&.product-active {
147+
--nudge-inline-start: calc(var(--wa-form-control-padding-inline) * -1.5);
132148
}
133149

134-
.logo-svg {
135-
width: auto;
136-
height: var(--awesome-logo-height, 1.5rem);
150+
/* nudge the non-first/second products to account for extra inline-start padding */
151+
&:nth-child(n + 4) {
152+
margin-inline-start: calc(-1 * var(--wa-form-control-padding-inline));
137153
}
138154
}
155+
}
139156

140-
.nav-products-secondary .pseudo-product wa-icon {
141-
font-size: var(--wa-font-size-l);
142-
}
157+
/* header */
158+
wa-page > [slot='header'] {
159+
/* reset default page component-based header styles */
160+
padding: 0;
161+
gap: 0;
162+
container-type: inline-size;
163+
container-name: header;
143164

144165
@container header (inline-size <= 80ch) {
145166
.header-nav,
@@ -172,6 +193,20 @@
172193
--size: auto;
173194
}
174195

196+
/* drawer-based products nav */
197+
wa-page::part(drawer__header) {
198+
background-color: var(--wa-color-surface-lowered);
199+
padding-block-start: 0;
200+
}
201+
202+
wa-page::part(drawer__header-actions) {
203+
align-self: center;
204+
}
205+
206+
wa-page > [slot='navigation-header'] {
207+
background-color: transparent;
208+
}
209+
175210
/* pro badge */
176211
wa-badge.pro {
177212
color: var(--wa-color-brand-on-loud);

0 commit comments

Comments
 (0)