From 8699a52b2d1c8ca2dc45f07faf14983b6efd2d0c Mon Sep 17 00:00:00 2001
From: Roger <rogermparent@gmail.com>
Date: Tue, 7 Jul 2020 22:47:14 -0400
Subject: [PATCH] CML alert bar extra fixes (#1545)

* Add an alert box above the header to advertise CML

Not the most reusable implementation, but it does the job.

* Update index.tsx

* Update styles.module.css

* Update index.tsx

* Update index.tsx

* Update index.tsx

* Fix Alert+Nav issue

Since the nav menu isn't in the header's tree, this fix has the menu icon invoke
the header hook separately and restyle itself alongside the header.

Co-authored-by: Ivan Shcheklein <shcheklein@gmail.com>
---
 src/components/HamburgerMenu/index.tsx         | 4 +++-
 src/components/HamburgerMenu/styles.module.css | 5 +++++
 src/components/LayoutHeader/index.tsx          | 5 ++---
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/HamburgerMenu/index.tsx b/src/components/HamburgerMenu/index.tsx
index 3c7c0e1d1b..9a2a76d850 100644
--- a/src/components/HamburgerMenu/index.tsx
+++ b/src/components/HamburgerMenu/index.tsx
@@ -9,6 +9,7 @@ import { getFirstPage } from '../../utils/shared/sidebar'
 import { ReactComponent as LogoSVG } from '../../../static/img/logo-white.svg'
 import { ReactComponent as TwitterIcon } from '../SocialIcon/twitter.svg'
 import { ReactComponent as GithubIcon } from '../SocialIcon/github.svg'
+import { useHeaderIsScrolled } from '../../utils/front/scroll'
 
 import styles from './styles.module.css'
 
@@ -16,6 +17,7 @@ const docsPage = getFirstPage()
 
 const HamburgerMenu: React.FC = () => {
   const [isOpened, setOpened] = useState(false)
+  const collapsed = useHeaderIsScrolled()
 
   const toggleMobileMenu = useCallback(() => setOpened(!isOpened), [isOpened])
   const openOnEnterKey = useCallback(e => {
@@ -42,7 +44,7 @@ const HamburgerMenu: React.FC = () => {
   return (
     <div>
       <button
-        className={styles.toggleButton}
+        className={cn(styles.toggleButton, collapsed || styles.expanded)}
         onClick={toggleMobileMenu}
         onKeyDown={openOnEnterKey}
         aria-label="Toggle Mobile Menu"
diff --git a/src/components/HamburgerMenu/styles.module.css b/src/components/HamburgerMenu/styles.module.css
index 5f1ed220b3..62b16baab6 100644
--- a/src/components/HamburgerMenu/styles.module.css
+++ b/src/components/HamburgerMenu/styles.module.css
@@ -38,6 +38,11 @@
   padding: 0;
   border: none;
   background: transparent;
+  transition: 0.5s all;
+
+  &.expanded {
+    top: 55px;
+  }
 
   @media (--xs-scr) {
     display: block;
diff --git a/src/components/LayoutHeader/index.tsx b/src/components/LayoutHeader/index.tsx
index 155660d43b..a8152f9ec2 100644
--- a/src/components/LayoutHeader/index.tsx
+++ b/src/components/LayoutHeader/index.tsx
@@ -31,9 +31,8 @@ const LayoutHeader: React.FC<Required<ILayoutModifiable>> = ({ modifiers }) => {
         <div className={cn(styles.alert, collapsed && styles.collapsed)}>
           <span role="img" aria-label="rocket">
             🚀
-          </span>
-          Check out the newest tool,
-          <Link href="https://cml.dev">CML</Link>!
+          </span>{' '}
+          Check out our newest tool, <Link href="https://cml.dev">CML</Link>!
         </div>
         <LayoutWidthContainer
           className={cn(styles.container, collapsed && styles.collapsed)}