Skip to content

Commit 991754d

Browse files
sarmsteadsarmstead
authored
feat(navigation): create top nav and footer
* 2025 Refresh - Footer (#29) * 2025 Refresh - Top Navigation (#30)
1 parent c96bc9d commit 991754d

20 files changed

+555
-562
lines changed

‎assets/images/full-logo.png‎

44.1 KB
Loading

‎assets/images/gem-logo--badge.svg‎

Lines changed: 54 additions & 0 deletions
Loading

‎assets/images/icon__burger.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎assets/images/icon__close.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎default.hbs‎

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -18,36 +18,30 @@
1818
</head>
1919

2020
<body class="{{body_class}}">
21-
22-
<div class="grid">
23-
{{> "navbar" }}
24-
</div>
21+
{{> "navigation-top" }}
2522

2623
<main>
2724
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
2825
{{{body}}}
2926
</main>
3027

31-
<div class="grid">
32-
{{!-- Navbar partial --}}
33-
{{> "footer"}}
34-
</div>
28+
{{> "footer"}}
3529

36-
<script>
37-
let sections = document.querySelectorAll('.section-header');
38-
function handleClick(event) {
39-
const isActive = event.currentTarget.parentNode.classList.contains("active");
40-
if (!isActive) {
41-
event.currentTarget.parentNode.classList.add("active");
42-
} else {
43-
event.currentTarget.parentNode.classList.remove("active");
44-
}
30+
<script>
31+
let sections = document.querySelectorAll('.section-header');
32+
function handleClick(event) {
33+
const isActive = event.currentTarget.parentNode.classList.contains("active");
34+
if (!isActive) {
35+
event.currentTarget.parentNode.classList.add("active");
36+
} else {
37+
event.currentTarget.parentNode.classList.remove("active");
4538
}
46-
sections.forEach(function(section) {
47-
section.addEventListener("click", handleClick);
48-
});
49-
</script>
50-
{{!-- Outputs important scripts - should always be included before closing body tag --}}
51-
{{ghost_foot}}
52-
</body>
39+
}
40+
sections.forEach(function(section) {
41+
section.addEventListener("click", handleClick);
42+
});
43+
</script>
44+
{{!-- Outputs important scripts - should always be included before closing body tag --}}
45+
{{ghost_foot}}
46+
</body>
5347
</html>

‎partials/footer.hbs‎

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,42 @@
1-
<footer>
2-
{{navigation type="secondary"}}
3-
</footer>
1+
<footer class='footer'>
2+
<div class='footer__inner'>
3+
<section class='footer__top'>
4+
<img class='footer__logo' src={{asset 'images/full-logo.png'}} />
5+
<div class='kg-button-card'>
6+
<a class='kg-btn' href='#/portal/signup'>Membership</a>
7+
</div>
8+
</section>
9+
<section class='footer__links'>
10+
{{navigation type='secondary'}}
11+
</section>
12+
<section class='footer__bottom'>
13+
<form class='footer__form' data-members-form='subscribe'>
14+
<div class='footer__form__row'>
15+
<input
16+
data-members-email
17+
name='email'
18+
id='get-involved-email'
19+
placeholder='Enter your email...'
20+
required='true'
21+
type='email'
22+
/>
23+
<div class='kg-button-card'>
24+
<button class='kg-btn' type='submit'>Sign Up</button>
25+
</div>
26+
</div>
27+
<span data-members-error></span>
28+
<span data-members-success></span>
29+
</form>
30+
<div class='footer__bottom__socials'>
31+
<div class='footer__bottom__socials__links'>
32+
{{#get 'pages' filter="title:'Footer - Socials'" limit='1'}}
33+
{{#foreach pages}}
34+
{{content}}
35+
{{/foreach}}
36+
{{/get}}
37+
</div>
38+
<small>©{{date format='YYYY'}} Ruby Central. All Rights Reserved.</small>
39+
</div>
40+
</section>
41+
</div>
42+
</footer>

‎partials/navbar.hbs‎

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

‎partials/navigation-top.hbs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<nav class='navigation--top'>
2+
<div class='navigation__inner'>
3+
<a class='navigation__logo' href='/'>
4+
<img src={{asset 'images/gem-logo--badge.svg'}} />
5+
</a>
6+
<div class='navigation__list__wrapper'>
7+
<button
8+
aria-controls='navigation__mobile-menu-trigger'
9+
aria-haspopup='true'
10+
class='navigation__mobile-menu-trigger closed'
11+
id='navigation__mobile-menu-trigger'
12+
>
13+
</button>
14+
{{navigation}}
15+
</div>
16+
<div class='navigation__membership kg-button-card'>
17+
<a class='kg-btn' href='#/portal/signup'>Membership</a>
18+
</div>
19+
</div>
20+
</nav>

‎partials/navigation.hbs‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
{{#if isSecondary}}{{else}}<a href="/" class="logo-circle"><span class="visually-hidden">Home</span></a>{{/if}}
2-
<ul class="nav">
3-
{{#foreach navigation}}
4-
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}">
5-
<a href="{{url absolute="true"}}"><span>{{label}}</span></a>
6-
</li>
7-
{{/foreach}}
8-
</ul>
1+
<ul class='navigation__list'>
2+
{{#foreach navigation}}
3+
<li class='navigation__item'>
4+
<a href="{{url absolute='true'}}">{{label}}</a>
5+
</li>
6+
{{/foreach}}
7+
</ul>

‎src/css/app.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,10 @@
1313

1414
/* Layout */
1515
@import './layout/reset.css';
16-
@import './layout/navigation.css';
1716
@import './layout/dropdown.css';
1817
@import './layout/container.css';
19-
/* @import './layout/header.css'; */
20-
/* @import './layout/footer.css'; */
18+
@import './layout/navigation-top.css';
19+
@import './layout/footer.css';
2120

2221
/* Pages */
2322
@import './pages/post.css';

0 commit comments

Comments
 (0)