/*
Hi! This was written as a live code example for an article written for Smashing Magazine. Please read the article when it is published! The link is coming soon.

*******************
*** POP QUIZ!!! ***
*******************

There is something in this demo that could be considered a UI bug relating to the z-index. When you open the "Open Stuff" menu, the gray backdrop doesn't cover the yellow footer. Can you fix it by editing only the z-index constants?


Contents
1) Z-index values
2) Styles
3) Components and Render
4) Pop quiz Answer
5) Credits
*/


import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
import styled, { css } from "https://cdn.skypack.dev/styled-components@5.2.1";


/*
1) Z-index values

The definitions of all of the necessary z-index values.
*/

// Z-index values
const base = 0;
const above = 1; // use this for all values above the base
const below = -1; // and this for all values below the base

// Page Layout
const zLayoutNavigation = above + base;
const zLayoutFooter = above + base;
const zLayoutModal = above + zLayoutNavigation;
const zLayoutPopUpAd = above + zLayoutModal;

// NavMenu
const zNavMenuBackdrop = below + base;
const zNavMenuPopover = above + base;
const zNavMenuToggle = above + zNavMenuPopover;


/*
2) Styles

Most of this is unnecessary, but you can see in the template literals where the z-index values are used. */

// Color Constants
const colorDarkGray = '#131E30';
const colorYellow = '#FDED00';

const CSSCenterChild = css`
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
  width: 100vw;
`;

const CSSBackdrop = css`
  background-color: rgba(0, 0, 0, 0.75);
  
  @supports (backdrop-filter: blur(5px)) {
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(3px);
  }
`;

const Header = styled.header`
  background-color: ${colorDarkGray};
  display: flex;
  color: #fff;
  padding: 2rem;
  
  & svg {
    margin-right: 1rem;
  }
`;

const Nav = styled.nav`
  background-color: ${colorDarkGray};
  color: #fff;
  padding: 1rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: ${zLayoutNavigation};
`;

const Footer = styled.footer`
  background-color: ${colorYellow};
  bottom: 0;
  padding: 1rem 2rem;
  position: sticky;
  z-index: ${zLayoutFooter};
`;

const ModalRoot = styled.div`
  ${CSSCenterChild}
  ${CSSBackdrop}
  z-index: ${zLayoutModal};
`;

const PopUpRoot = styled.div`
  ${CSSCenterChild}
  ${CSSBackdrop}
  z-index: ${zLayoutPopUpAd};
`;

const NavMenuToggle = styled.button`
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font-size: inherit;
  padding: .25em .5em;
  position: relative;
  transition: background 100ms ease-out;
  vertical-align: middle;
  z-index: ${zNavMenuToggle};
  
  &:hover {
    background: ${colorYellow};
    color: ${colorDarkGray};
  }
  
  &:hover > svg {
    fill: ${colorDarkGray};
  }
  
  &[aria-expanded="true"] {
    border-color: #fff;
    border-radius: 3px 3px 0 0;
  }
`;

const NavMenuToggleCaret = styled.svg`
  fill: ${colorYellow};
  height: 1em;
  margin-left: 0.25ch;
  transform: translateY(-0.1em);
  vertical-align: middle;
  width: 1em;
`;

const NavMenuDropdown = styled.div`
  background-color: #fff;
  border: 2px solid ${colorDarkGray} 4px solid ${colorYellow};
  border-radius: 0 3px 3px 3px;
  color: ${colorDarkGray};
  padding: 0.5rem 0;
  position: absolute;
  width: 300px;
  z-index: ${zNavMenuPopover};
`;

const NavMenuItem = styled.button`
  background: none;
  border: none;
  font-size: inherit;
  padding: 0.5em 1rem;
  text-align: left;
  transition: background-color 100ms ease-out;
  width: 100%;
  
  &:hover {
    background-color: ${colorYellow};
  }
`;

const NavMenuBackdrop = styled.div`
  ${CSSBackdrop}
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: ${zNavMenuBackdrop};
`;

const Dialog = styled.div`
  background-color: #fff;
  border-radius: 3px;
  /* Leave space for 15px of the close button */
  max-width: calc(100vw - 40px);
  padding: 1rem;
  position: relative;
`;

const CornerCloseButtonBtn = styled.button`
  background: none;
  border: none;
  outline: none;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
`;

/*
3) Components

This is mainly here to show something on the page and for you to be able to mess around.
*/

const NavMenu = ({ onOpenModalClick, onOpenPopUpClick, onOpenBothClick }) => {
  const [isOpen, setIsOpen] = React.useState(false);
  const toggle = () => setIsOpen(prevIsOpen => !prevIsOpen);
  
  const handleOpenModalClick = () => {
    setIsOpen(false);
    onOpenModalClick();
  };
  const handleOpenPopUpClick = () => {
    setIsOpen(false);
    onOpenPopUpClick();
  };
  const handleOpenBothClick = () => {
    setIsOpen(false);
    onOpenBothClick();
  };
  
  return (
    <>
      <NavMenuToggle onClick={toggle} aria-haspopup="true" aria-expanded={isOpen}>
        Open Stuff
        <NavMenuToggleCaret viewBox="0 0 320 512" width="100" title="">
          <path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" />
        </NavMenuToggleCaret>
      </NavMenuToggle>
      {isOpen && (
        <div role="menu">
          <NavMenuDropdown>
            <NavMenuItem role="menuitem" onClick={handleOpenModalClick}>
              Open Modal
            </NavMenuItem>
            <NavMenuItem role="menuitem" onClick={handleOpenPopUpClick}>
              Open Pop-up Ad
            </NavMenuItem>
            <NavMenuItem role="menuitem" onClick={handleOpenBothClick}>
              Open Both
            </NavMenuItem>
          </NavMenuDropdown>
           <NavMenuBackdrop />
        </div>
      )}
    </>
  );
};

const CornerCloseButton = ({ onClick }) => (
  <CornerCloseButtonBtn onClick={onClick}>
    <svg viewBox="0 0 512 512" width="30" title="window-close">
      <rect x="32" y="64" width="464" height="400" fill="#000" />
      <path fill={colorYellow} d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z" />
    </svg>
  </CornerCloseButtonBtn>
);

const Modal = ({ onDismiss }) => (
  <ModalRoot>
    <Dialog>
      <CornerCloseButton onClick={onDismiss} />
      <p>Here is the modal!!!</p>
    </Dialog>
  </ModalRoot>
);

const PopUpAd = ({ onDismiss }) => (
  <PopUpRoot>
    <Dialog>
      <CornerCloseButton onClick={onDismiss} />
      <p>Here is the pop up!!!</p>
    </Dialog>
  </PopUpRoot>
);

const Layout = () => {
  const [isModalOpen, setIsModalOpen] = React.useState(false);
  const [isPopUpOpen, setIsPopUpOpen] = React.useState(false);
  
  const openModal = () => {
    setIsModalOpen(true);
  };
  const openPopUp = () => {
    setIsPopUpOpen(true);
  };
  const openBoth = () => {
    openModal();
    openPopUp();
  };
  
  return (
    <>
      {isPopUpOpen && <PopUpAd onDismiss={() => setIsPopUpOpen(false)} />}
      {isModalOpen && <Modal onDismiss={() => setIsModalOpen(false)} />}
      <Header>
        <svg viewBox="0 0 512 512" width="100" title="layer-group" fill={colorYellow}>
          <path d="M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87 12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z" />
        </svg>
        <h1>Managing CSS Z-Index in Large Projects&nbsp;Demo</h1>
      </Header>
      <Nav>
        <NavMenu
          onOpenModalClick={openModal}
          onOpenPopUpClick={openPopUp}
          onOpenBothClick={openBoth}
        />
      </Nav>
      <main>
        <h2>Filler text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit in orci quis consequat. Suspendisse facilisis faucibus aliquam. In rhoncus risus at tellus auctor, id faucibus erat pharetra. Nunc gravida in ligula non molestie. Donec scelerisque tellus vitae velit condimentum, nec volutpat libero fringilla. In ac nibh felis. Proin sit amet massa urna. Maecenas a nibh vitae nisi commodo gravida at sed ex. Ut mollis nisl vel eros suscipit fringilla. Vestibulum enim sem, eleifend ut est in, tincidunt dignissim nunc. Ut iaculis leo malesuada enim luctus aliquet. Pellentesque ex dui, rutrum vel lectus et, posuere consequat erat. Mauris non posuere ligula.</p>

        <p>Sed eget lacinia tortor. Etiam id cursus sem. Aliquam sit amet nibh egestas, feugiat mauris nec, accumsan nulla. Nunc at orci sit amet leo imperdiet convallis. Integer vitae risus ex. Suspendisse potenti. Nullam dictum mi at ipsum efficitur bibendum. Praesent nisi sem, euismod at velit non, gravida vestibulum ligula.</p>

        <p>Ut dolor dui, interdum et urna ac, pretium suscipit eros. Ut mattis dui et lorem pretium, in interdum est fringilla. Morbi mollis consectetur est ut porttitor. Mauris a porttitor neque. Curabitur sagittis et ex ac rhoncus. Aliquam erat volutpat. Proin faucibus augue eros, at interdum metus tincidunt non. Curabitur ut nulla interdum urna pellentesque volutpat. Quisque aliquet lobortis nunc. Cras blandit ac felis sed blandit. Fusce pharetra diam sit amet lorem dictum interdum. Mauris ullamcorper neque eget ante elementum, sed mollis neque tempor. Fusce tincidunt, nibh ac bibendum aliquet, urna turpis vehicula lacus, in condimentum orci mauris id enim. Suspendisse et tortor tempus, condimentum ex sit amet, suscipit mauris. Nullam nulla neque, consectetur quis lacus sit amet, maximus accumsan est. Fusce ultrices libero id augue iaculis, sed feugiat odio condimentum.</p>

        <p>Nam ac varius mauris. Mauris et pulvinar tellus. Mauris condimentum quis nunc ac semper. Cras nibh lacus, iaculis pulvinar rutrum id, bibendum a ipsum. Quisque ut viverra risus. Suspendisse efficitur sit amet massa sit amet efficitur. Aenean justo odio, ornare quis efficitur vitae, dictum at nisl. Suspendisse laoreet purus quis lacus cursus tincidunt. Duis eu auctor nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Donec vel dictum est.</p>
      </main>
      <Footer>
        This is the footer content.
      </Footer>
    </>
  );
}

ReactDOM.render(
  <Layout />,
  document.getElementById('root')
);


/*
4) Quiz answer

The fix for the footer stacking issue can be made in the first couple of lines of the Z-index values section. They originally looked like this:

const zLayoutNavigation = above + base;
const zLayoutFooter = above + base;

The header and the footer both have the same value, and since the footer comes second in the document order, it is placed above all of the contents on the navigation. Since the "Open Stuff" menu is in the stacking context created by the of the navigation, it will never be able to be above the footer.

To fix this, you can set up the navigation to be above the footer like this:

const zLayoutFooter = above + base;
const zLayoutNavigation = above + zLayoutFooter;
*/

/*
5) Credits

All SVG icons were supplied by Font Awesome under CC BY 4.0 with color and fill alterations.
https://creativecommons.org/licenses/by/4.0/
*/