Skip to content

Commit 5408209

Browse files
phiro56phiro56
authored
feat(ui): restyle top nav and implement responsive navigation with mobile menu (#237)
- Add mobile-friendly navigation with hamburger menu - Style dropdown menus for desktop and mobile views - Include New Valkey logo in header - Add navigation menu logic in dedicated nav.js file <img width="1728" alt="Screenshot 2025-04-16 at 5 44 02 PM" src="https://github.com/user-attachments/assets/d7ef43b0-40f2-469c-a5b7-784228889129" /> <img width="513" alt="Screenshot 2025-04-16 at 5 44 11 PM" src="https://github.com/user-attachments/assets/13964566-fb32-45e9-8736-13f1d21700c5" /> --------- Signed-off-by: Daniel Phillips <[email protected]>
1 parent d1da33a commit 5408209

File tree

5 files changed

+266
-67
lines changed

5 files changed

+266
-67
lines changed

‎sass/_valkey.scss

Lines changed: 163 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -104,20 +104,24 @@ p {
104104
}
105105

106106
.header {
107-
border-bottom: 1px solid $grey-lt-000;
108-
color: $lf-dark-blue;
109-
padding: 10px 0;
107+
position: relative;
108+
width: 100%;
109+
margin: 0 auto;
110+
border-bottom: 1px solid #ddd;
110111

111112
.width-limiter {
112-
display: flex;
113-
gap: 2rem;
114-
flex-flow: row nowrap;
113+
flex-direction: row;
114+
align-items: center;
115+
max-width: var(--max-width);
116+
min-height: 80px;
115117
justify-content: space-between;
116-
align-items: baseline;
118+
color: #6983ff;
119+
width: 100%;
120+
padding: 10px;
121+
padding: 0 20px;
117122

118-
@media all and (max-width: 768px) {
119-
flex-flow: column;
120-
align-items: center;
123+
@include respond-min(768px) {
124+
padding: 0 20px;
121125
}
122126
}
123127

@@ -127,50 +131,177 @@ p {
127131
align-items: center;
128132

129133
img {
130-
width: 6rem;
131-
height: 6rem;
132-
display: block;
134+
width: 130px;
135+
height: 46px;
136+
display: block;
133137
}
134138

135139
span {
136-
@include sans-serif;
137-
font-weight: 400;
138-
font-size: 6rem;
139-
line-height: 5.75rem;
140-
color: inherit;
141-
text-decoration: none;
142-
letter-spacing: -0.2rem;
143-
color: $lf-dark-blue;
140+
@include sans-serif;
141+
font-weight: 400;
142+
font-size: 6rem;
143+
line-height: 5.75rem;
144+
color: inherit;
145+
text-decoration: none;
146+
letter-spacing: -0.2rem;
147+
color: $lf-dark-blue;
144148
}
145149
}
146150

147151
nav {
148152
display: flex;
149153
flex-flow: row nowrap;
150-
gap: 2rem;
154+
gap: 3rem;
151155
@include sans-serif;
152-
font-size: 1.5rem;
153-
font-weight: 400;
154156

155-
@media all and (max-width: 480px) {
156-
gap: 1rem;
157-
display: grid;
158-
text-align: center;
159-
}
157+
font-size: 1.6rem;
158+
font-weight: 600;
160159

161160
a {
162161
white-space: nowrap;
163162
color: inherit;
164163
cursor: pointer;
164+
padding: .5rem 0;
165+
border-bottom: none;
166+
167+
@include respond-min(768px) {
168+
border-bottom: 3px solid;
169+
padding: 1rem 0;
170+
border-color: transparent;
171+
}
172+
}
165173

174+
>a {
166175
&:hover {
167-
color: #04202a;
176+
border-color: inherit;
168177
text-decoration: underline;
169-
text-decoration-thickness: 2px;
170-
text-underline-offset: 4px;
178+
179+
@include respond-min(768px) {
180+
text-decoration: none;
181+
}
182+
}
183+
}
184+
185+
@media (max-width: 768px) {
186+
display: none;
187+
gap: 1rem;
188+
189+
&.active {
190+
display: flex;
191+
flex-direction: column;
192+
position: absolute;
193+
top: 100%;
194+
margin-top: 1px;
195+
left: 0;
196+
right: 0;
197+
background: white;
198+
padding: 1.5rem;
199+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
200+
z-index: 1000;
201+
202+
a, .has-submenu > span {
203+
padding: .75rem 0;
204+
display: block;
205+
width: 100%;
206+
}
207+
208+
.submenu {
209+
position: static;
210+
box-shadow: none;
211+
padding-left: 1rem;
212+
}
171213
}
172214
}
173215
}
216+
.btn-menu {
217+
display: none;
218+
padding: 20px 0;
219+
cursor: pointer;
220+
background: none;
221+
gap: 0.625rem;
222+
justify-content: center;
223+
flex-direction: column;
224+
225+
&:before {
226+
content: "";
227+
display: block;
228+
height: 2px;
229+
width: 2.5rem;
230+
background-color: #6983ff;
231+
transition-duration: .2s;
232+
}
233+
234+
&:after {
235+
content: "";
236+
display: block;
237+
height: 2px;
238+
width: 2.5rem;
239+
background-color: #6983ff;
240+
transition-duration: .2s;
241+
}
242+
243+
@media (max-width: 768px) {
244+
display: flex;
245+
}
246+
}
247+
}
248+
249+
.has-submenu {
250+
position: relative;
251+
display: block;
252+
align-items: center;
253+
254+
@include respond-min(768px) {
255+
display: flex;
256+
}
257+
258+
&:hover {
259+
> span {
260+
color: #04202a;
261+
}
262+
263+
.submenu {
264+
display: flex;
265+
}
266+
}
267+
268+
> span {
269+
cursor: pointer;
270+
}
271+
272+
>a {
273+
&:hover {
274+
text-decoration: underline;
275+
276+
@include respond-min(768px) {
277+
text-decoration: none;
278+
}
279+
}
280+
}
281+
282+
.submenu {
283+
position: absolute;
284+
top: 100%;
285+
z-index: 9;
286+
display: block;
287+
flex-flow: column nowrap;
288+
background: #fff;
289+
min-width: 100%;
290+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
291+
padding: .25rem 0;
292+
293+
@include respond-min(768px) {
294+
display: none;
295+
}
296+
297+
> a {
298+
padding: .5rem 1rem;
299+
300+
&:hover {
301+
text-decoration: underline;
302+
}
303+
}
304+
}
174305
}
175306

176307
.body {
@@ -561,39 +692,6 @@ aside {
561692
}
562693
}
563694

564-
.has-submenu {
565-
position: relative;
566-
567-
&:hover {
568-
> span {
569-
color: #04202a;
570-
}
571-
572-
.submenu {
573-
display: flex;
574-
}
575-
}
576-
577-
> span {
578-
cursor: pointer;
579-
}
580-
581-
.submenu {
582-
position: absolute;
583-
z-index: 9;
584-
display: none;
585-
flex-flow: column nowrap;
586-
background: #fff;
587-
min-width: 100%;
588-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
589-
padding: .25rem 0;
590-
591-
> a {
592-
padding: .5rem 1rem;
593-
}
594-
}
595-
}
596-
597695
/* zola based on recommended code highlight snippet from docs: https://www.getzola.org/documentation/content/syntax-highlighting/ */
598696
pre {
599697
padding: 2rem;

‎static/assets/js/nav.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Global function for toggling header menu
2+
window.toggleHeaderMenu = function() {
3+
const nav = document.querySelector('.header nav');
4+
if (nav) {
5+
nav.classList.toggle('active');
6+
}
7+
};
8+
9+
// Class detection function that checks if an element with a given class name exists
10+
// This provides backwards compatibility for older browsers (IE6-8) that don't support getElementsByClassName
11+
// Used by the navigation menu to detect presence of certain UI elements
12+
function hasClass(className) {
13+
if (!document.getElementsByClassName) { //class name function in old IE
14+
document.getElementsByClassName = function(search) {
15+
var d = document, elements, pattern, i, results = [];
16+
if (d.querySelectorAll) { // IE8
17+
return d.querySelectorAll("." + search);
18+
}
19+
if (d.evaluate) { // IE6, IE7
20+
pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
21+
elements = d.evaluate(pattern, d, null, 0, null);
22+
while ((i = elements.iterateNext())) {
23+
results.push(i);
24+
}
25+
} else {
26+
elements = d.getElementsByTagName("*");
27+
pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
28+
for (i = 0; i < elements.length; i++) {
29+
if ( pattern.test(elements[i].className) ) {
30+
results.push(elements[i]);
31+
}
32+
}
33+
}
34+
return results;
35+
};
36+
}
37+
return !!document.getElementsByClassName(className).length; //return a boolean
38+
}

‎static/img/valkey-horizontal.svg

Lines changed: 58 additions & 0 deletions
Loading

‎templates/default.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,12 @@
1616
<div class="header">
1717
<div class="width-limiter">
1818
<a href="/" class="logo">
19-
<img src="/img/Valkey-logo.svg" alt="Valkey Logo" width="60" height="60"/>
20-
<span>Valkey</span>
19+
<img src="/img/valkey-horizontal.svg" alt="Valkey Logo" width="130" height="46"/>
2120
</a>
21+
<div role="button"
22+
class="btn-menu"
23+
onclick="window.toggleHeaderMenu();"
24+
></div>
2225
<nav role="navigation" aria-label="Main">
2326
<a role="menuitem" href="/download/">Download</a>
2427
<div class="has-submenu">

‎templates/includes/head.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@
3838
<link rel="stylesheet" href="/css/styles.css">
3939
<link rel="alternate" type="application/atom+xml" title="Atom feed" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" />
4040

41+
<!-- Nav JS -->
42+
<script src="/assets/js/nav.js"></script>
4143

4244
<!-- Fathom - beautiful, simple website analytics -->
4345
<script src="https://cdn.usefathom.com/script.js" data-site="FRZJYDAH" defer></script>

0 commit comments

Comments
 (0)