Skip to content

Commit f4fca61

Browse files
author
Alban Bailly
committed
mobile menu
1 parent eb2d5e4 commit f4fca61

File tree

10 files changed

+109
-151
lines changed

10 files changed

+109
-151
lines changed

‎themes/linode-hugo-base-theme/gulpfile.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@ gulp.task('compile', () => {
4747
.pipe(postcss(plugins))
4848
.pipe(
4949
purgecss({
50-
content: [html]
50+
content: [html],
51+
whitelist: ['mobile-nav']
5152
})
5253
)
5354
.pipe(gulp.dest(output));

‎themes/linode-hugo-base-theme/layouts/_default/baseof.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66

77
<div class="content">
88
<div class="header-wrapper bg-light-black">
9-
<header class="header container mx-auto lg p-4 flex flex-wrap items-center justify-between">
9+
<header class="header max-w-4xl mx-auto p-4 flex flex-wrap items-center justify-between">
1010
{{ block "header" . }}
1111
{{ partial "3_organisms/header.html" . }}
1212
{{ end }}
1313
</header>
1414
</div>
1515

16-
<div class="main-wrapper container mx-auto lg p-4">
16+
<div class="main-wrapper max-w-4xl mx-auto p-4">
1717
<main class="main">
1818
{{ block "main" . }}
1919
{{ partial "3_organisms/content.html" . }}
@@ -23,7 +23,7 @@
2323
</div>
2424

2525
<div class="footer-wrapper bg-black">
26-
<footer class="footer container mx-auto lg py-8 px-4 text-white">
26+
<footer class="footer max-w-4xl mx-auto py-8 px-4 text-white">
2727
{{ block "footer" . }}
2828
{{ partial "3_organisms/footer.html" . }}
2929
{{ end }}

‎themes/linode-hugo-base-theme/layouts/partials/0_utilities/scripts.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
2-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
3-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
1+
<script src={{ "/assets/js/main.js" | relURL }} type="text/javascript"></script>

‎themes/linode-hugo-base-theme/layouts/partials/2_molecules/nav.html

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,3 @@
1-
<a
2-
href="#main-menu-toggle"
3-
role="button"
4-
class="nav-close"
5-
aria-expanded="false"
6-
aria-controls="main-menu"
7-
aria-label="Close main menu"
8-
>
9-
<span class="visually-hidden">Close main menu</span>
10-
<img src='{{ "/img/menu.svg" | relURL }}' />
11-
</a>
12-
13-
<ul>
141
{{ range .Site.Menus.main }}
15-
<li><a class="mx-2" href="{{ .URL }}">{{ .Name }}</a></li>
2+
<a href="{{ .URL }}">{{ .Name }}</a>
163
{{ end }}
17-
</ul>

‎themes/linode-hugo-base-theme/layouts/partials/3_organisms/header.html

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,17 @@
22
<a href="/">{{ partial "1_atoms/logo.html" }}</a>
33
</div>
44

5-
<a
6-
href="#main-menu"
7-
role="button"
8-
class="nav-toggle"
9-
aria-expanded="false"
10-
aria-controls="main-menu"
11-
aria-label="Open main menu"
12-
>
13-
<span class="visually-hidden">Open main menu</span>
14-
<img src='{{ "/img/menu.svg" | relURL }}' />
15-
</a>
16-
175
<nav
186
id="main-menu"
197
role="navigation"
208
class="main-nav"
219
aria-expanded="false"
2210
>
23-
2411
{{ partial "2_molecules/nav.html" . }}
25-
2612
</nav>
27-
<a
28-
href="#main-menu-toggle"
29-
class="backdrop"
30-
tabindex="-1"
31-
aria-hidden="true" hidden
32-
>
13+
14+
<a id="menu-icon" class="menu-icon" href="javascript:;" onClick="toggleNav()">
15+
<span class="bar top"></span>
16+
<span class="bar middle"></span>
17+
<span class="bar bottom"></span>
3318
</a>

‎themes/linode-hugo-base-theme/srcCSS/components/0_utilities/_variables.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
:root {
2+
--l-green: #1AB15C;
23
}

‎themes/linode-hugo-base-theme/srcCSS/components/2_molecules/mobile-nav.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
.menu-icon {
2+
position: absolute;
3+
right: 2rem;
4+
display: block;
5+
transition: background-color .7s ease, transform .7s ease;;
6+
}
7+
8+
.menu-icon.open .top {
9+
transform: translateY(9px) rotateZ(45deg);
10+
}
11+
12+
.menu-icon.open .bottom {
13+
transform: translateY(-9px) rotateZ(-45deg);
14+
}
15+
16+
.menu-icon.open .middle {
17+
width: 0;
18+
}
19+
20+
.menu-icon:hover .bar {
21+
background-color: var(--l-green);
22+
}
23+
24+
@screen md {
25+
.menu-icon {
26+
display: none;
27+
}
28+
}
29+
30+
.bar {
31+
display: block;
32+
height: 3px;
33+
width: 30px;
34+
background-color: #fff;
35+
margin: 6px auto;
36+
transition: transform .5s ease, width .5s ease;
37+
}
38+
39+
.main-nav {
40+
@apply bg-light-black;
41+
position: fixed;
42+
right: calc(-1 * var(--mobile-menu-width));
43+
top: 0;
44+
display: flex;
45+
flex-direction: column;
46+
width: var(--mobile-menu-width);
47+
padding: 8rem 2rem 2rem 2rem;
48+
height: 100%;
49+
text-align: right;
50+
overflow-y: auto;
51+
transition: right .5s ease;
52+
}
53+
54+
@screen md {
55+
.main-nav {
56+
width: auto;
57+
background: none;
58+
position: relative;
59+
display: block;
60+
padding: 0;
61+
box-shadow: none;
62+
text-align: initial;
63+
height: auto;
64+
right: 0;
65+
}
66+
67+
.main-nav a {
68+
@apply mx-2;
69+
}
70+
}
71+
72+
.main-nav.open {
73+
right: 0;
74+
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0 , .5);
75+
}
76+
77+
:root {
78+
--mobile-menu-width: 300px;
79+
}

‎themes/linode-hugo-base-theme/srcCSS/components/2_molecules/nav.css

Lines changed: 0 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,3 @@
11
.main-nav a {
22
@apply text-l-nav-grey;
33
}
4-
5-
.main-nav a:last-child {
6-
margin-right: 0;
7-
}
8-
9-
.nav-toggle,
10-
.nav-close {
11-
width: 30px;
12-
display: inline-block;
13-
}
14-
15-
.main-nav {
16-
position: absolute;
17-
left: -200px;
18-
top: 0;
19-
height: 100%;
20-
overflow-y: scroll;
21-
overflow-x: visible;
22-
transition: left 0.3s ease,
23-
box-shadow 0.3s ease;
24-
z-index: 999;
25-
}
26-
27-
.main-nav ul {
28-
list-style: none;
29-
margin: 0;
30-
padding: 2.5em 0 0;
31-
/* Hide shadow w/ -8px while 'closed' */
32-
-webkit-box-shadow: -8px 0 8px rgba(0,0,0,.5);
33-
-moz-box-shadow: -8px 0 8px rgba(0,0,0,.5);
34-
box-shadow: -8px 0 8px rgba(0,0,0,.5);
35-
min-height: 100%;
36-
width: 200px;
37-
background: #1a1a1a;
38-
}
39-
40-
.main-nav:target,
41-
.main-nav[aria-expanded="true"] {
42-
left: 0;
43-
outline: none;
44-
-moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
45-
-webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
46-
box-shadow: 3px 0 12px rgba(0,0,0,.25);
47-
}
48-
49-
.main-nav:target .menu-close,
50-
.main-nav[aria-expanded="true"] .menu-close {
51-
z-index: 1001;
52-
}
53-
54-
.main-nav:target ul,
55-
.main-nav[aria-expanded="true"] ul {
56-
position: relative;
57-
z-index: 1000;
58-
}
59-
60-
.main-nav:target + .backdrop,
61-
.main-nav[aria-expanded="true"] + .backdrop {
62-
position: absolute;
63-
display: block;
64-
content: "";
65-
left: 0;
66-
top: 0;
67-
width: 100%;
68-
height: 100%;
69-
z-index: 998;
70-
background: #000;
71-
background: rgba(0,0,0,.85);
72-
cursor: default;
73-
}
74-
75-
.main-nav,
76-
.main-nav:target + .backdrop,
77-
.main-nav[aria-expanded="true"] + .backdrop {
78-
position: fixed;
79-
}
80-
81-
/*
82-
Larger screen styling
83-
Horizontal menu
84-
*/
85-
@media (min-width: 768px) {
86-
.nav-toggle,
87-
.nav-close {
88-
display: none;
89-
}
90-
91-
/* Undo positioning of off-canvas menu */
92-
.main-nav {
93-
position: relative;
94-
left: auto;
95-
top: auto;
96-
height: auto;
97-
}
98-
99-
.main-nav ul {
100-
display: flex;
101-
102-
/* Undo off-canvas styling */
103-
padding: 0;
104-
-webkit-box-shadow: none;
105-
-moz-box-shadow: none;
106-
box-shadow: none;
107-
height: auto;
108-
width: auto;
109-
background: none;
110-
}
111-
}

‎themes/linode-hugo-base-theme/static/assets/css/main.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎themes/linode-hugo-base-theme/static/assets/js/main.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Navigation Toggle
2+
3+
const mainMenu = document.getElementById('main-menu');
4+
const menuIcon = document.getElementById('menu-icon');
5+
const mobileClass = 'open';
6+
7+
function toggleNav() {
8+
if (!mainMenu.classList.contains(mobileClass)) {
9+
mainMenu.classList.add(mobileClass);
10+
menuIcon.classList.add(mobileClass);
11+
}
12+
else {
13+
mainMenu.classList.remove(mobileClass);
14+
menuIcon.classList.remove(mobileClass);
15+
}
16+
}

0 commit comments

Comments
 (0)