Skip to content

Commit a0aa42d

Browse files
lamATnginxnginx-jack
lamATnginx
and
nginx-jack
authored
Sidebar implementation (#116)
* Add mockupsidebar and product selector * reduced width of selector * removed duplicate css * feat: added working sidebar * added lines for the sidebar nav * removed hardcoding and put values into variables * changed size of icons to be larger --------- Co-authored-by: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
1 parent 0c29107 commit a0aa42d

File tree

7 files changed

+446
-10
lines changed

7 files changed

+446
-10
lines changed

‎assets/css/v2/style.css

Lines changed: 306 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,12 @@
1616
--color-background: #FFFFFF;
1717
--color-foreground: #000000;
1818
--color-shadow: #D2D2D2;
19+
--color-product-title: #8D8D8D;
1920

21+
--sidebar-margin: 3rem;
22+
--sidebar-line-box-side-length: 0.5rem;
23+
--sidebar-line-box-top: 0.375rem;
24+
--sidebar-line-box-left: 0.75rem;
2025
--sidebar-width: 24rem;
2126
--side-gutter-width: 20rem;
2227
--text-content-width-iphone-13: 30rem;
@@ -30,7 +35,6 @@
3035
@supports (font-variation-settings: normal) {
3136
:root {
3237
font-family: InterVariable, sans-serif;
33-
font-variation-settings: 'wght' 350;
3438
}
3539

3640
h1, h2, h3, h4, h5, h6, .breadcrumb {
@@ -43,6 +47,11 @@ h1, h2, h3, h4, h5, h6, .breadcrumb {
4347
}
4448

4549
/* header */
50+
p {
51+
font-weight: 400;
52+
}
53+
54+
/* layout */
4655
header {
4756
margin: 2rem 2rem;
4857

@@ -110,6 +119,90 @@ nav {
110119
}
111120
}
112121

122+
/* main content */
123+
.docs-container * {
124+
box-sizing: border-box;
125+
}
126+
127+
.content-layout {
128+
display: grid;
129+
grid-template-columns: var(--text-content-width-iphone-13) var(--side-gutter-width);
130+
column-gap: var(--component-gap);
131+
}
132+
133+
.docs-container {
134+
min-width: 100%;
135+
}
136+
137+
.main-layout {
138+
display: grid;
139+
grid-template-columns: 1fr;
140+
}
141+
142+
.sidebar-layout {
143+
display: flex;
144+
flex-direction: column;
145+
z-index: 9999;
146+
}
147+
148+
@media (max-width: 1512px){
149+
.sidebar-layout {
150+
display: none;
151+
}
152+
}
153+
154+
.text-content {
155+
grid-column-start: 1;
156+
}
157+
158+
@media (min-width: 1512px) { /* Macbook Pro 14 */
159+
.main-layout {
160+
display: grid;
161+
grid-template-columns: var(--sidebar-width) 1fr;
162+
column-gap: var(--component-gap);
163+
}
164+
165+
.content-layout {
166+
display: grid;
167+
grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width);
168+
column-gap: var(--component-gap);
169+
}
170+
171+
.content-layout .side-gutter {
172+
grid-column-start: 2;
173+
}
174+
175+
.base-layout {
176+
display: grid;
177+
grid-template-rows: repeat(2, auto);
178+
column-gap: var(--component-gap);
179+
}
180+
181+
.breadcrumb-layout {
182+
display: grid;
183+
grid-template-columns: var(--sidebar-width) 1fr;
184+
column-gap: var(--component-gap);
185+
align-items: center;
186+
margin: 0 2rem;
187+
}
188+
}
189+
190+
@media (min-width: 1728px) { /* Macbook Pro 16 */
191+
.content-layout {
192+
display: grid;
193+
grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width);
194+
column-gap: var(--component-gap);
195+
}
196+
}
197+
198+
@media (min-width: 2560px) { /* 4k Desktop */
199+
.content-layout {
200+
display: grid;
201+
grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width);
202+
column-gap: var(--component-gap);
203+
}
204+
}
205+
113206
#searchbox {
114207
width: 24rem;
115208
display:none;
@@ -201,9 +294,204 @@ nav {
201294
}
202295

203296
.sidebar {
204-
flex-basis: 1;
205-
width: 20rem;
206-
margin: 2rem 0;
297+
display: flex;
298+
flex-direction: column;
299+
width: 24rem;
300+
position: sticky;
301+
top: 0;
302+
}
303+
304+
.sidebar .product-selector-button {
305+
display: flex;
306+
align-items: center;
307+
justify-content: space-between;
308+
background-color: var(--color-brand);
309+
color: var(--color-brand-100);
310+
border: none;
311+
font-weight: 500;
312+
font-size: 1.25rem;
313+
width: 100%;
314+
padding: 0.5rem;
315+
cursor: pointer;
316+
}
317+
318+
.sidebar .product-selector-button .selector-icon {
319+
height:24px;
320+
width: 24px;
321+
}
322+
323+
.product-selector {
324+
display: none;
325+
position: absolute;
326+
top: 0;
327+
min-width: 80%;
328+
margin-left: 46rem;
329+
padding: 0.75rem;
330+
background-color: white;
331+
border: black 1px solid;
332+
box-shadow: 3px 3px 0px var(--color-shadow);
333+
}
334+
335+
.product-selector p {
336+
font-size: 0.75rem;
337+
color: var(--color-product-title);
338+
display: inline;
339+
}
340+
341+
.product-selector ul {
342+
padding-left: 0;
343+
margin-top: 0;
344+
list-style-type: none;
345+
}
346+
347+
.product-selector a {
348+
text-decoration: none;
349+
color: black;
350+
font-size: 1rem;
351+
}
352+
353+
.sidebar .sidebar-navigation {
354+
width: 100%;
355+
font-weight: 500;
356+
margin-left: var(--sidebar-margin);
357+
}
358+
359+
/* removes the built in ul padding/margin */
360+
.sidebar .sidebar-navigation ul {
361+
margin-left: 0;
362+
padding-left: 0;
363+
list-style-type: none;
364+
}
365+
366+
.sidebar ul :not(.sidebar-navigation) ul {
367+
padding-left: 1rem;
368+
}
369+
370+
.sidebar .sidebar-navigation li {
371+
margin-bottom: 1rem;
372+
}
373+
374+
.sidebar .sidebar-navigation a {
375+
text-decoration: none;
376+
color: black;
377+
}
378+
379+
.sidebar .sidebar-navigation .collapsible-header {
380+
cursor: pointer;
381+
}
382+
383+
.sidebar .sidebar-navigation .collapsible-content {
384+
display: none;
385+
position: relative;
386+
}
387+
388+
.sidebar .sidebar-navigation .box.opened {
389+
display: none;
390+
}
391+
392+
.toggle-checkbox:checked ~ .collapsible-header .box.expand {
393+
display: none;
394+
}
395+
396+
.toggle-checkbox:checked ~ .collapsible-content {
397+
display: block;
398+
}
399+
400+
.toggle-checkbox:checked ~ .collapsible-header .box.opened {
401+
display: block;
402+
}
403+
404+
/* Every other Sidebar Partial Vertical Line */
405+
.toggle-checkbox:checked ~ .collapsible-content::before {
406+
content: '';
407+
position: absolute;
408+
border-left: black 1px solid;
409+
left: -0.525rem;
410+
top: -1.33rem;
411+
height: calc(100% + 0.78rem);
412+
}
413+
414+
/* Every other Sidebar Partial Horizontal Lines */
415+
.toggle-checkbox:checked ~ .collapsible-content li {
416+
position: relative;
417+
}
418+
419+
.toggle-checkbox:checked ~ .collapsible-content li::after {
420+
content: '';
421+
position: absolute;
422+
border-top: black 1px solid;
423+
left: -1.5rem;
424+
width: 0.75rem;
425+
top: 0.6rem;
426+
}
427+
428+
.selected {
429+
font-weight: 800;
430+
}
431+
432+
.sidebar .sidebar-navigation li:first-child {
433+
margin-top: 1rem;
434+
}
435+
436+
.sidebar .sidebar-navigation ul li .box-link {
437+
content: '';
438+
background-color: black;
439+
position: absolute;
440+
width: 0.1rem;
441+
height: var(--sidebar-line-box-side-length);
442+
margin-top: var(--sidebar-line-box-top);
443+
left: var(--sidebar-line-box-left);
444+
}
445+
446+
.sidebar .sidebar-navigation ul li .box {
447+
content: '';
448+
position: absolute;
449+
width: var(--sidebar-line-box-side-length);
450+
height: var(--sidebar-line-box-side-length);
451+
margin-top: var(--sidebar-line-box-top);
452+
left: var(--sidebar-line-box-left);
453+
}
454+
455+
.sidebar .sidebar-navigation ul li .expand {
456+
background-color: black;
457+
}
458+
459+
.sidebar .sidebar-navigation ul li .opened {
460+
border: black 1px solid;
461+
}
462+
463+
.sidebar .sidebar-navigation ul li .current {
464+
background-color: var(--color-brand);
465+
z-index: 999;
466+
}
467+
468+
.sidebar .sidebar-navigation ul li .partial-box {
469+
margin-left: -1.5rem;
470+
}
471+
472+
.sidebar .sidebar-navigation ul li .partial {
473+
left: -0.8125rem;
474+
}
475+
476+
/* First Sidebar Nav Vertical Line */
477+
.sidebar .sidebar-navigation .parent-collapsible-content::before{
478+
content: '';
479+
position: absolute;
480+
border-left: black 1px solid;
481+
left: 0;
482+
bottom: 1.55rem;
483+
height: calc(100% - 5.65rem);
484+
}
485+
486+
/* First Sidebar Nav Horizontal Lines */
487+
.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::before,
488+
.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::after {
489+
content: '';
490+
position: absolute;
491+
border-top: black 1px solid;
492+
left: 0;
493+
margin-top: 0.6rem;
494+
width: 0.75rem;
207495
}
208496

209497
.row {
@@ -214,6 +502,7 @@ nav {
214502

215503
/* content */
216504
main {
505+
flex: 1;
217506
max-width: 50rem;
218507
min-width: 40rem;
219508
margin: 2rem 2rem;
@@ -313,6 +602,16 @@ pre.chroma {
313602
width: 156px;
314603
}
315604

605+
.f5-logo-footer {
606+
height: 32px;
607+
width: 32px;
608+
}
609+
610+
.nginx-logo-footer {
611+
height: 72x;
612+
width: 156px;
613+
}
614+
316615
/* FILTHY HACKS BEGIN */
317616

318617
/* Override logo with black text version */
@@ -326,6 +625,9 @@ pre.chroma {
326625
background-size: contain;
327626
background-position: left center;
328627
width: 200px; /* Adjust the width as needed to fit the logo */
628+
background-size: contain;
629+
background-position: left center;
630+
width: 200px; /* Adjust the width as needed to fit the logo */
329631

330632
img {
331633
display: none;

‎assets/js/product-selector.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
$(document).ready(function () {
2+
const productSelectorContent = document.getElementById("product-selector");
3+
4+
$("#product-selector-button").on("click", () => {
5+
if (productSelectorContent.style.display === "block") {
6+
productSelectorContent.style.display = "none";
7+
} else {
8+
productSelectorContent.style.display = "block";
9+
}
10+
});
11+
12+
window.onclick = function(event) {
13+
if (!event.target.matches('#product-selector-button') && !event.target.matches('#product-selector-button-icon')) {
14+
productSelectorContent.style.display = "none"
15+
}
16+
}
17+
})

‎assets/js/product-dropdown.js renamed to ‎assets/js/site-dropdown.js

File renamed without changes.

0 commit comments

Comments
 (0)