Skip to content

Commit

Permalink
feat: mobile menu
Browse files Browse the repository at this point in the history
zstix committed Apr 27, 2020
1 parent 6ad8388 commit 6d7253b
Showing 4 changed files with 84 additions and 19 deletions.
23 changes: 20 additions & 3 deletions src/components/Sidebar.js
Original file line number Diff line number Diff line change
@@ -16,17 +16,34 @@ const renderNav = (page, index) => (
</li>
);

const Sidebar = ({ pages }) => (
<aside className="Sidebar">
<h3>Pages</h3>
const Sidebar = ({ pages, isOpen, toggle }) => (
<aside className={cx('Sidebar', { 'is-open': isOpen })}>
<div className="Sidebar-top">
<h3>Pages</h3>
<button
aria-expanded={isOpen}
className="Sidebar-toggle"
aria-label="Main Menu Toggle"
type="button"
onClick={() => toggle()}
>
{isOpen ? 'close' : 'open'}
</button>
</div>
<nav role="navigation" aria-label="Sidebar">
<ul>{pages.map(renderNav)}</ul>
</nav>
</aside>
);

Sidebar.propTypes = {
toggle: PropTypes.func.isRequired,
pages: PropTypes.arrayOf(link),
isOpen: PropTypes.bool,
};

Sidebar.defaultProps = {
isOpen: false,
};

export default Sidebar;
42 changes: 37 additions & 5 deletions src/components/Sidebar.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
.Sidebar {
padding: 1rem;

h3 {
margin: 0;
margin-bottom: 1rem;
}

ul {
margin: 0;
padding-left: 1rem;
@@ -26,4 +21,41 @@
font-weight: bold;
}
}

h3 {
margin: 0;
}

button {
background: none;
border: 0;
cursor: pointer;
width: 3rem;
display: none;

@media (max-width: 760px) {
display: block;
}
}

.Sidebar-top {
display: flex;
justify-content: space-between;
}

nav {
margin-top: 1rem;

@media (max-width: 760px) {
display: none;
}
}

&.is-open {
nav {
@media (max-width: 760px) {
display: block;
}
}
}
}
30 changes: 19 additions & 11 deletions src/pages/reference.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';

import Container from '../components/Container';
import Layout from '../components/Layout';
@@ -56,15 +56,23 @@ const pages = [
},
];

const Reference = () => (
<Layout>
<Container className="ReferenceTemplate">
<Sidebar pages={pages} />
<main className="ReferenceTemplate-content">
The main page content goes here
</main>
</Container>
</Layout>
);
const Reference = () => {
const [isOpen, setIsOpen] = useState(false);

return (
<Layout>
<Container className="ReferenceTemplate">
<Sidebar
pages={pages}
isOpen={isOpen}
toggle={() => setIsOpen(!isOpen)}
/>
<main className="ReferenceTemplate-content">
The main page content goes here
</main>
</Container>
</Layout>
);
};

export default Reference;
8 changes: 8 additions & 0 deletions src/templates/Reference.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
.ReferenceTemplate {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-areas: 'sidebar main';

@media (max-width: 760px) {
grid-template-columns: none;
grid-template-areas: 'sidebar' 'main';
}

.Sidebar {
grid-area: sidebar;
}

.ReferenceTemplate-content {
grid-area: main;
}
}

0 comments on commit 6d7253b

Please sign in to comment.