[#2155] Make navigation sticky in desktop

app/assets/stylesheets/dashboard/dashboard_content.scss

@@ -4,9 +4,11 @@
  padding: $size-0 25px 50px 25px;
  display: flex;
  flex-direction: row;
+ margin-top: 86px;
 
  @media screen and (max-width: $medium) {
  flex-direction: column;
  padding: 0;
+ margin-top: 0;
  }
 }

app/assets/stylesheets/static/static_content.scss

@@ -5,10 +5,11 @@
  box-sizing: border-box;
  padding: $size-40 34px;
  scroll-behavior: smooth;
- margin: 0 auto;
+ margin: 86px auto 0 auto;
 
  @media screen and (max-width: $medium) {
  padding: $size-20;
+ margin: 0 auto;
  }
 
  @media screen and (max-width: $small) {

app/views/layouts/application.html.erb

@@ -52,8 +52,8 @@
  <%= react_component('SkipToContent', props: { id: 'mainContent' })%>
  <%= react_component('Header', props: header_props) %>
  <main>
- <%= react_component('Toast', props: { 
- notice: notice.present? ? notice : '', 
+ <%= react_component('Toast', props: {
+ notice: notice.present? ? notice : '',
  alert: alert.present? ? alert : '' ,
  appendDashboardClass: (user_signed_in? && !static_page?) || secret_share_path? }) %>
  <% if user_signed_in? && !static_page? %>

client/app/components/Header/Header.scss

@@ -57,6 +57,14 @@
  }
  }
 
+ &Scroll {
+ background-color: $black-80;
+
+ @media screen and (max-width: $medium) {
+ background-color: unset;
+ }
+ }
+
  &Mobile {
  background: transparent;
  position: static;
@@ -105,9 +113,12 @@
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
+ position: fixed;
+ z-index: $z-index-front;
 
  @media screen and (max-width: $medium) {
  padding: 15px $size-10;
+ position: static;
  }
 
  &Home {

client/app/components/Header/index.jsx

@@ -1,5 +1,7 @@
 // @flow
-import React, { useState, useRef, type Node } from 'react';
+import React, {
+ useState, useRef, useEffect, type Node,
+} from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
 import renderHTML from 'react-render-html';
@@ -25,6 +27,7 @@ export const Header = ({
  home, links, mobileOnly, profile,
 }: Props): Node => {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+ const [scrolled, setScrolled] = useState(false);
  const navigationRef = useRef(null);
 
  useFocusTrap(navigationRef, mobileNavOpen);
@@ -73,7 +76,7 @@ export const Header = ({
 
  const displayDesktop = (): Node => (
  <div
- className={css.headerDesktop}
+ className={`${css.headerDesktop} ${scrolled ? css.headerScroll : ''}`}
  aria-label={I18n.t('navigation.main_menu')}
  role="navigation"
  >
@@ -109,6 +112,22 @@ export const Header = ({
  </div>
  );
 
+ useEffect(() => {
+ const handleScroll = (event) => {
+ if (event.currentTarget.scrollY > 0) {
+ setScrolled(true);
+ } else {
+ setScrolled(false);
+ }
+ };
+ if (!mobileNavOpen) {
+ window.addEventListener('scroll', handleScroll);
+ }
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, [mobileNavOpen]);
+
  return (
  <header
  id="header"

client/app/components/Modal/index.jsx

@@ -68,10 +68,13 @@ export const Modal = (props: Props): Node => {
 
  useFocusTrap(modalEl, open);
 
- useEffect(() => () => {
- const documentBody = ((document.body: any): HTMLBodyElement);
- documentBody.classList.remove('bodyModalOpen');
- }, []);
+ useEffect(
+ () => () => {
+ const documentBody = ((document.body: any): HTMLBodyElement);
+ documentBody.classList.remove('bodyModalOpen');
+ },
+ [],
+ );
 
  const handleKeyPress = (
  event: SyntheticKeyboardEvent<HTMLDivElement>,