Improve menu (#8)

diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
index e7a6d9b882cc17122c0f629f7760016761fd6b08..b6f93f6d06d95d4b71ad00e43bb406a36fa6fbef 100644 (file)
--- a/src/components/Menu.jsx
+++ b/src/components/Menu.jsx
@@ -1,6 +1,6 @@
 const React = require('react');
 
-module.exports = ({ links }) => {
+module.exports = ({ links, externalLinks }) => {
   const navActions = {
     open: () => document.body.classList.add('isNavOpen'),
     close: () => document.body.classList.remove('isNavOpen'),
@@ -18,11 +18,26 @@ module.exports = ({ links }) => {
         className="Menu-Button"
         onMouseOver={navActions.open}
         onClick={navActions.toggle}
+        children={'\u2717'}
       />
       <div className="Menu-Body">
         <h3>Menu</h3>
         <ul>
           {links.map((link, i) => (
+            <li key={i}>
+              <a
+                href={link.url}
+                onClick={navActions.close}
+                style={{ color: 'inherit' }}
+              >
+                {link.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+        <hr />
+        <ul>
+          {externalLinks.map((link, i) => (
             <li key={i}>
               <a href={link.url}>{link.text}</a>
             </li>

diff --git a/src/components/MusicalInterests.jsx b/src/components/MusicalInterests.jsx
index a37979b10756fe43d5365c4e9976b98791c9d6c7..1a21ce81efd8d9351d62a78e41232158a24313a6 100644 (file)
--- a/src/components/MusicalInterests.jsx
+++ b/src/components/MusicalInterests.jsx
@@ -5,7 +5,7 @@ const AlbumCard = require('./AlbumCard');
 
 module.exports = (props) => {
   return (
-    <div className="MusicalInterests">
+    <div className="MusicalInterests" id="music-i-like">
       <h2>Music I like</h2>
       <HorizontalScroller>
         <AlbumCard

diff --git a/src/components/menu.css b/src/components/menu.css
index 72f47e75a04bf0f76a2c31af2cd79f447785f76b..1caca149962fe4073871602a3c29803991cded7c 100644 (file)
--- a/src/components/menu.css
+++ b/src/components/menu.css
@@ -1,15 +1,15 @@
 .Menu {
   color: #333;
-  width: 20em;
+  width: 30em;
   height: 100vh;
   max-width: 100%;
-  right: -20em;
+  right: -30em;
   position: fixed;
   transition: right 0.2s cubic-bezier(0.16, 0.7, 0.53, 1.18);
 }
 
 .isNavOpen .Menu {
-  right: 0;
+  right: -10em;
 }
 
 .Menu-Closer {
@@ -28,20 +28,32 @@
 .Menu-Button {
   z-index: 10;
   position: fixed;
+  color: transparent;
+  cursor: pointer;
   top: 2em;
   right: 2em;
-  padding: 0.75em;
+  width: 1.5em;
+  height: 1.5em;
+  line-height: 1.5em;
+  text-align: center;
   box-shadow: 0 0 0 0.5em rgba(0, 0, 0, 0.5) inset;
   border-radius: 100%;
+  transition: box-shadow 0.2s, color 0.2s;
+}
+
+.isNavOpen .Menu-Button {
+  color: inherit;
+  box-shadow: 0 0 0 0.2em #333 inset;
 }
 
 .Menu-Body {
   z-index: 9;
   position: fixed;
-  width: 100%;
+  width: 30em;
   height: 100%;
   box-sizing: border-box;
   border-radius: 1em 0 0 1em;
+  border-right: 10em solid #fff;
   padding: 2em;
   background-color: #fff;
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);

diff --git a/src/index.jsx b/src/index.jsx
index 8cce53a3eaf2934e15abdb1f1c1925d7dc120b07..9aab1875f9ae3153e4c1cee36e80818242138b60 100644 (file)
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -9,6 +9,16 @@ ReactDom.render(
   <>
     <Menu
       links={[
+        {
+          url: '#',
+          text: 'Top \u2191',
+        },
+        {
+          url: '#music-i-like',
+          text: 'Music I like',
+        },
+      ]}
+      externalLinks={[
         {
           url: 'https://github.com/ben-larson/',
           text: 'Check out my GitHub \u2197',

diff --git a/src/main.css b/src/main.css
index 54c075807b4ac6f7202d91f61ce2805829fdb1bc..dac03eef92280b203968064bc9fc8663a30c1c43 100644 (file)
--- a/src/main.css
+++ b/src/main.css
@@ -20,6 +20,11 @@ a {
   color: #46f;
 }
 
+hr {
+  border: 0;
+  border-top: 1px solid #ccc;
+}
+
 @media (max-width: 45em) {
   body {
     font-size: 1em;