From e4ebbccada7c926ef30f51475bf17c78fb5316d3 Mon Sep 17 00:00:00 2001
From: Ben Larson <10101828+ben-larson@users.noreply.github.com>
Date: Fri, 10 Apr 2020 16:53:41 -0500
Subject: [PATCH] Improve menu (#8)

---
 src/components/Menu.jsx             | 17 ++++++++++++++++-
 src/components/MusicalInterests.jsx |  2 +-
 src/components/menu.css             | 22 +++++++++++++++++-----
 src/index.jsx                       | 10 ++++++++++
 src/main.css                        |  5 +++++
 5 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
index e7a6d9b..b6f93f6 100644
--- 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 a37979b..1a21ce8 100644
--- 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 72f47e7..1caca14 100644
--- 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 8cce53a..9aab187 100644
--- 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 54c0758..dac03ee 100644
--- 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;
-- 
2.45.2