From 18cdbd531df6efd8137909da93395860a257e9b9 Mon Sep 17 00:00:00 2001
From: Jason Rundell <jason.rundell@gmail.com>
Date: Tue, 27 Oct 2020 23:37:51 -0400
Subject: [PATCH 1/4] Disabling animation for users who disable web animations

---
 src/components/MegaList/index.module.scss | 18 ++++++++++++++++--
 src/components/Nav/index.module.scss      | 18 ++++++++++++++++--
 src/components/NavList/index.module.scss  | 18 ++++++++++++++++--
 src/styles/animations.scss                |  4 ++--
 src/styles/mixins.scss                    | 14 ++++++++++----
 5 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/src/components/MegaList/index.module.scss b/src/components/MegaList/index.module.scss
index 1887e14..15ee632 100644
--- a/src/components/MegaList/index.module.scss
+++ b/src/components/MegaList/index.module.scss
@@ -37,21 +37,35 @@
 }
 
 .open {
-  @include open;
+  @include slideOpen;
+
+  @media (prefers-reduced-motion: reduce) {
+    transform: translate3d(100%, 0, 0);
+  }
 
   @include respond-to('large') {
     animation: none;
     display: flex;
     opacity: 1;
+    @media (prefers-reduced-motion: reduce) {
+      transform: none;
+    }
   }
 }
 
 .closed {
-  @include closed;
+  @include slideClosed;
+
+  @media (prefers-reduced-motion: reduce) {
+    transform: translate3d(-100%, 0, 0);
+  }
 
   @include respond-to('large') {
     animation: none;
     display: none;
     opacity: 0;
+    @media (prefers-reduced-motion: reduce) {
+      transform: none;
+    }
   }
 }
diff --git a/src/components/Nav/index.module.scss b/src/components/Nav/index.module.scss
index 8a804ee..7bfaecf 100644
--- a/src/components/Nav/index.module.scss
+++ b/src/components/Nav/index.module.scss
@@ -44,21 +44,35 @@
 }
 
 .open {
-  @include open;
+  @include slideOpen;
+
+  @media (prefers-reduced-motion: reduce) {
+    transform: translate3d(100%, 0, 0);
+  }
 
   @include respond-to('large') {
     animation: none;
     display: flex;
     opacity: 1;
+    @media (prefers-reduced-motion: reduce) {
+      transform: none;
+    }
   }
 }
 
 .closed {
-  @include closed;
+  @include slideClosed;
+
+  @media (prefers-reduced-motion: reduce) {
+    transform: translate3d(-100%, 0, 0);
+  }
 
   @include respond-to('large') {
     animation: none;
     display: none;
     opacity: 0;
+    @media (prefers-reduced-motion: reduce) {
+      transform: none;
+    }
   }
 }
diff --git a/src/components/NavList/index.module.scss b/src/components/NavList/index.module.scss
index 91dca78..4e7673a 100644
--- a/src/components/NavList/index.module.scss
+++ b/src/components/NavList/index.module.scss
@@ -67,17 +67,31 @@
 }
 
 .open {
-  @include open;
+  @include slideOpen;
+
+  @media (prefers-reduced-motion: reduce) {
+    transform: translate3d(100%, 0, 0);
+  }
 
   @include respond-to('large') {
     animation: none;
+    @media (prefers-reduced-motion: reduce) {
+      transform: none;
+    }
   }
 }
 
 .closed {
-  @include closed;
+  @include slideClosed;
+
+  @media (prefers-reduced-motion: reduce) {
+    transform: translate3d(-100%, 0, 0);
+  }
 
   @include respond-to('large') {
     animation: none;
+    @media (prefers-reduced-motion: reduce) {
+      transform: none;
+    }
   }
 }
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index e10824e..6d9490b 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -1,6 +1,6 @@
 $slideDuration: 0.75s;
 $slideOpenFillAnimationMode: both;
-$slideRightToLeftFillAnimationMode: both;
+$slideClosedFillAnimationMode: both;
 
 @keyframes slideOpen {
   from {
@@ -12,7 +12,7 @@ $slideRightToLeftFillAnimationMode: both;
   }
 }
 
-@keyframes slideRightToLeft {
+@keyframes slideClosed {
   from {
     transform: translate3d(100%, 0, 0);
   }
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index de16a09..b8ef291 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -1,16 +1,22 @@
 @import './animations.scss';
 @import './breakpoints.scss';
 
-@mixin open {
+@mixin slideOpen {
   animation-duration: $slideDuration;
   animation-fill-mode: $slideOpenFillAnimationMode;
   animation-name: slideOpen;
   animation-iteration-count: 1;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }
 
-@mixin closed {
+@mixin slideClosed {
   animation-duration: $slideDuration;
-  animation-fill-mode: $slideRightToLeftFillAnimationMode;
-  animation-name: slideRightToLeft;
+  animation-fill-mode: $slideClosedFillAnimationMode;
+  animation-name: slideClosed;
   animation-iteration-count: 1;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }

From b46264e1b447b8ce91e50481bbd6713f0068f5cc Mon Sep 17 00:00:00 2001
From: Jason Rundell <jason.rundell@gmail.com>
Date: Tue, 27 Oct 2020 23:46:27 -0400
Subject: [PATCH 2/4] Optimized scss

---
 src/components/NavItem/index.module.scss | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/NavItem/index.module.scss b/src/components/NavItem/index.module.scss
index ce37ff1..b451579 100644
--- a/src/components/NavItem/index.module.scss
+++ b/src/components/NavItem/index.module.scss
@@ -7,26 +7,20 @@
   margin-bottom: 1rem;
   margin-left: 0;
   padding: 0;
+
   @include respond-to('large') {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
     height: auto;
     margin-top: 0;
     margin-right: 0;
     margin-bottom: 0;
-    margin-left: 2rem;
-    align-items: center;
-  }
-
-  @include respond-to('large') {
-    display: block;
+    margin-left: 0;
     padding-left: 1rem;
     padding-right: 1rem;
   }
-
-  @include respond-to('large') {
-    margin-left: 0;
-  }
 }
 
 .heading {

From 733e6129ebf34481bc5a8db4625517998dd54746 Mon Sep 17 00:00:00 2001
From: Jason Rundell <jason.rundell@gmail.com>
Date: Tue, 27 Oct 2020 23:46:43 -0400
Subject: [PATCH 3/4] Links in menu reload page

---
 src/components/GlobalTopNav/index.jsx | 38 +++++++++++++--------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/GlobalTopNav/index.jsx b/src/components/GlobalTopNav/index.jsx
index 34d10d3..d389d61 100644
--- a/src/components/GlobalTopNav/index.jsx
+++ b/src/components/GlobalTopNav/index.jsx
@@ -174,7 +174,7 @@ const GlobalTopNav = () => {
       >
         <MainList id="menubar-main" ariaLabel="Main Menu">
           <MainNavItem role="none" id="nav-home">
-            <MainNavItemLink id="menuitem-home" role="menuitem" href="/#home">
+            <MainNavItemLink id="menuitem-home" role="menuitem" href="/">
               Home
             </MainNavItemLink>
           </MainNavItem>
@@ -183,7 +183,7 @@ const GlobalTopNav = () => {
             <MainNavItemLink
               role="menuitem"
               id="menuitem-Mega-Menu"
-              href="/#mega-menu"
+              href="/?page=mega-menu"
               isForward
               isActive={activeMenus.includes('menu-Mega-Menu') ? true : false}
               onClick={(e) => toggleSubMenu(e, 'menu-Mega-Menu')}
@@ -204,7 +204,7 @@ const GlobalTopNav = () => {
               <NavItem id="nav-Mega-Menu-back" isHeading={true}>
                 <NavItemLink
                   id="menuitem-Mega-Menu-back"
-                  href="/#mega-menu"
+                  href="/?page=mega-menu"
                   onClick={(e) => toggleSubMenu(e, 'menu-Mega-Menu')}
                   onKeyDown={(e) =>
                     a11yClick(e) && toggleSubMenu(e, 'menu-Mega-Menu')
@@ -219,7 +219,7 @@ const GlobalTopNav = () => {
                 <NavItemLink
                   id="menuitem-Mega-Menu-Sub-menu-item-1"
                   role="menuitem"
-                  href="/#sub-menu-item-1"
+                  href="/?page=sub-menu-item-1"
                 >
                   Sub menu item 1
                 </NavItemLink>
@@ -231,7 +231,7 @@ const GlobalTopNav = () => {
                 <NavItemLink
                   id="menuitem-Mega-Menu-Sub-menu-item-2"
                   role="menuitem"
-                  href="/#sub-menu-item-2"
+                  href="/?page=sub-menu-item-2"
                 >
                   Sub menu item 2
                 </NavItemLink>
@@ -244,7 +244,7 @@ const GlobalTopNav = () => {
                 <NavItemLink
                   id="menuitem-Mega-Menu-Sub-menu-item-3"
                   role="menuitem"
-                  href="/#sub-menu-item-3"
+                  href="/?page=sub-menu-item-3"
                   isForward
                   onClick={(e) =>
                     toggleSubSubMenu(e, 'menu-Mega-Menu-Sub-menu-item-3')
@@ -283,7 +283,7 @@ const GlobalTopNav = () => {
                     <NavItemLink
                       id="menuitem-Mega-Menu-Sub-menu-item-3-back"
                       role="menuitem"
-                      href="/#sub-menu-item-3"
+                      href="/?page=sub-menu-item-3"
                       isBack
                       onClick={(e) =>
                         toggleSubSubMenu(e, 'menu-Mega-Menu-Sub-menu-item-3')
@@ -302,7 +302,7 @@ const GlobalTopNav = () => {
                     <NavItemLink
                       id="menuitem-Mega-Menu-Sub-menu-item-3.1"
                       role="menuitem"
-                      href="/#sub-menu-item-3.1"
+                      href="/?page=sub-menu-item-3.1"
                     >
                       Sub menu item 3.1
                     </NavItemLink>
@@ -314,7 +314,7 @@ const GlobalTopNav = () => {
                     <NavItemLink
                       id="menuitem-Mega-Menu-Sub-menu-item-3.2"
                       role="menuitem"
-                      href="/#sub-menu-item-3.2"
+                      href="/?page=sub-menu-item-3.2"
                     >
                       Sub menu item 3.2
                     </NavItemLink>
@@ -327,7 +327,7 @@ const GlobalTopNav = () => {
                     <NavItemLink
                       id="menuitem-Mega-Menu-Sub-menu-item-3.3"
                       role="menuitem"
-                      href="/#sub-menu-item-3.3"
+                      href="/?page=sub-menu-item-3.3"
                     >
                       Sub menu item 3.3
                     </NavItemLink>
@@ -344,7 +344,7 @@ const GlobalTopNav = () => {
                 <NavItemLink
                   id="menuitem-Mega-Menu-Sub-menu-item-4"
                   role="menuitem"
-                  href="/#sub-menu-item-4"
+                  href="/?page=sub-menu-item-4"
                   isForward
                   onClick={(e) =>
                     toggleSubSubMenu(e, 'menu-Mega-Menu-Sub-menu-item-4')
@@ -383,7 +383,7 @@ const GlobalTopNav = () => {
                     <NavItemLink
                       id="menuitem-Mega-Menu-Sub-menu-item-4-back"
                       role="menuitem"
-                      href="/#sub-menu-item-4"
+                      href="/?page=sub-menu-item-4"
                       isBack
                       onClick={(e) =>
                         toggleSubSubMenu(e, 'menu-Mega-Menu-Sub-menu-item-4')
@@ -402,7 +402,7 @@ const GlobalTopNav = () => {
                     <NavItemLink
                       id="menuitem-Mega-Menu-Sub-menu-item-4.1"
                       role="menuitem"
-                      href="/#sub-menu-item-4.1"
+                      href="/?page=sub-menu-item-4.1"
                     >
                       Sub menu item 4.1
                     </NavItemLink>
@@ -411,7 +411,7 @@ const GlobalTopNav = () => {
                     <NavItemLink
                       id="menuitem-Mega-Menu-Sub-menu-item-4.2"
                       role="menuitem"
-                      href="/#sub-menu-item-4.2"
+                      href="/?page=sub-menu-item-4.2"
                     >
                       Sub menu item 4.2
                     </NavItemLink>
@@ -420,7 +420,7 @@ const GlobalTopNav = () => {
                     <NavItemLink
                       id="menuitem-Mega-Menu-Sub-menu-item-4.3"
                       role="menuitem"
-                      href="/#sub-menu-item-4.3"
+                      href="/?page=sub-menu-item-4.3"
                     >
                       Sub menu item 4.3
                     </NavItemLink>
@@ -429,7 +429,7 @@ const GlobalTopNav = () => {
                     <NavItemLink
                       id="menuitem-Mega-Menu-Sub-menu-item-4.4"
                       role="menuitem"
-                      href="/#sub-menu-item-4.4"
+                      href="/?page=sub-menu-item-4.4"
                     >
                       Sub menu item 4.4
                     </NavItemLink>
@@ -438,7 +438,7 @@ const GlobalTopNav = () => {
                     <NavItemLink
                       id="menuitem-Mega-Menu-Sub-menu-item-4.5"
                       role="menuitem"
-                      href="/#sub-menu-item-4.5"
+                      href="/?page=sub-menu-item-4.5"
                     >
                       Sub menu item 4.5
                     </NavItemLink>
@@ -447,7 +447,7 @@ const GlobalTopNav = () => {
                     <NavItemLink
                       id="menuitem-Mega-Menu-Sub-menu-item-4.6"
                       role="menuitem"
-                      href="/#sub-menu-item-4.6"
+                      href="/?page=sub-menu-item-4.6"
                     >
                       Sub menu item 4.6
                     </NavItemLink>
@@ -460,7 +460,7 @@ const GlobalTopNav = () => {
             <MainNavItemLink
               id="menuitem-contact"
               role="menuitem"
-              href="/#contact"
+              href="/?page=contact"
             >
               Contact
             </MainNavItemLink>

From 1145822aba7d4159a9e461abf9b850a382b33c5d Mon Sep 17 00:00:00 2001
From: Jason Rundell <jason.rundell@gmail.com>
Date: Wed, 28 Oct 2020 00:11:42 -0400
Subject: [PATCH 4/4] Styling refinements

---
 src/components/GlobalTopNav/index.jsx               | 4 ++++
 src/components/NavItem/index.module.scss            | 1 -
 src/components/NavItemDescription/index.module.scss | 5 +----
 src/components/NavItemLink/index.jsx                | 4 ++++
 src/components/NavItemLink/index.module.scss        | 8 ++++++--
 src/components/NavList/index.module.scss            | 1 +
 6 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/GlobalTopNav/index.jsx b/src/components/GlobalTopNav/index.jsx
index d389d61..983d0c6 100644
--- a/src/components/GlobalTopNav/index.jsx
+++ b/src/components/GlobalTopNav/index.jsx
@@ -220,6 +220,7 @@ const GlobalTopNav = () => {
                   id="menuitem-Mega-Menu-Sub-menu-item-1"
                   role="menuitem"
                   href="/?page=sub-menu-item-1"
+                  isHeading
                 >
                   Sub menu item 1
                 </NavItemLink>
@@ -232,6 +233,7 @@ const GlobalTopNav = () => {
                   id="menuitem-Mega-Menu-Sub-menu-item-2"
                   role="menuitem"
                   href="/?page=sub-menu-item-2"
+                  isHeading
                 >
                   Sub menu item 2
                 </NavItemLink>
@@ -245,6 +247,7 @@ const GlobalTopNav = () => {
                   id="menuitem-Mega-Menu-Sub-menu-item-3"
                   role="menuitem"
                   href="/?page=sub-menu-item-3"
+                  isHeading
                   isForward
                   onClick={(e) =>
                     toggleSubSubMenu(e, 'menu-Mega-Menu-Sub-menu-item-3')
@@ -345,6 +348,7 @@ const GlobalTopNav = () => {
                   id="menuitem-Mega-Menu-Sub-menu-item-4"
                   role="menuitem"
                   href="/?page=sub-menu-item-4"
+                  isHeading
                   isForward
                   onClick={(e) =>
                     toggleSubSubMenu(e, 'menu-Mega-Menu-Sub-menu-item-4')
diff --git a/src/components/NavItem/index.module.scss b/src/components/NavItem/index.module.scss
index b451579..ffd18ad 100644
--- a/src/components/NavItem/index.module.scss
+++ b/src/components/NavItem/index.module.scss
@@ -6,7 +6,6 @@
   margin-right: 0;
   margin-bottom: 1rem;
   margin-left: 0;
-  padding: 0;
 
   @include respond-to('large') {
     display: flex;
diff --git a/src/components/NavItemDescription/index.module.scss b/src/components/NavItemDescription/index.module.scss
index dd2c78d..76ab3a9 100644
--- a/src/components/NavItemDescription/index.module.scss
+++ b/src/components/NavItemDescription/index.module.scss
@@ -3,8 +3,5 @@
 .root {
   color: #000;
   font-size: 0.75rem;
-  @include respond-to('large') {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
+  margin-bottom: 1rem;
 }
diff --git a/src/components/NavItemLink/index.jsx b/src/components/NavItemLink/index.jsx
index 5d8389e..4fc2680 100644
--- a/src/components/NavItemLink/index.jsx
+++ b/src/components/NavItemLink/index.jsx
@@ -12,6 +12,7 @@ const NavItemLink = ({
   role,
   href,
   isBack,
+  isHeading,
   isForward,
   isActive,
   className,
@@ -24,6 +25,7 @@ const NavItemLink = ({
   const rootClasses = classNames(
     styles['root'],
     isBack && styles['back'],
+    isHeading && styles['heading'],
     isForward && styles['forward'],
     isActive && styles['active'],
     className && className
@@ -47,6 +49,7 @@ const NavItemLink = ({
 NavItemLink.defaultProps = {
   role: 'menuitem',
   isBack: false,
+  isHeading: false,
   isForward: false,
   isActive: false,
 }
@@ -56,6 +59,7 @@ NavItemLink.propTypes = {
   role: PropTypes.string,
   href: PropTypes.string.isRequired,
   isBack: PropTypes.bool,
+  isHeading: PropTypes.bool,
   isForward: PropTypes.bool,
   isActive: PropTypes.bool,
   className: PropTypes.string,
diff --git a/src/components/NavItemLink/index.module.scss b/src/components/NavItemLink/index.module.scss
index 84b64ec..9579d53 100644
--- a/src/components/NavItemLink/index.module.scss
+++ b/src/components/NavItemLink/index.module.scss
@@ -3,10 +3,14 @@
 .root {
   width: 100%;
   display: flex;
+  flex-direction: row;
   position: relative;
+  margin-bottom: 1rem;
+}
+
+.heading {
   @include respond-to('large') {
-    align-items: center;
-    height: 4rem;
+    height: 1rem;
   }
 }
 
diff --git a/src/components/NavList/index.module.scss b/src/components/NavList/index.module.scss
index 4e7673a..b1897e7 100644
--- a/src/components/NavList/index.module.scss
+++ b/src/components/NavList/index.module.scss
@@ -22,6 +22,7 @@
   z-index: 1;
 
   @include respond-to('large') {
+    padding-top: 0;
     flex-direction: row;
     height: 4rem;
   }