feat: advances in header

package.json

@@ -10,7 +10,8 @@
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/App/App.component.jsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect } from 'react';
+import React from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
 import AuthProvider from '../../providers/Auth';
@@ -9,30 +9,32 @@ import SecretPage from '../../pages/Secret';
 import Private from '../Private';
 import Fortune from '../Fortune';
 import Layout from '../Layout';
-import { random } from '../../utils/fns';
+import Header from '../Header';
+// import { random } from '../../utils/fns';
 
 function App() {
-  useLayoutEffect(() => {
-    const { body } = document;
+  // useLayoutEffect(() => {
+  //   const { body } = document;
 
-    function rotateBackground() {
-      const xPercent = random(100);
-      const yPercent = random(100);
-      body.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`);
-    }
+  //   function rotateBackground() {
+  //     const xPercent = random(100);
+  //     const yPercent = random(100);
+  //     body.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`);
+  //   }
 
-    const intervalId = setInterval(rotateBackground, 3000);
-    body.addEventListener('click', rotateBackground);
+  //   const intervalId = setInterval(rotateBackground, 3000);
+  //   body.addEventListener('click', rotateBackground);
 
-    return () => {
-      clearInterval(intervalId);
-      body.removeEventListener('click', rotateBackground);
-    };
-  }, []);
+  //   return () => {
+  //     clearInterval(intervalId);
+  //     body.removeEventListener('click', rotateBackground);
+  //   };
+  // }, []);
 
   return (
     <BrowserRouter>
       <AuthProvider>
+        <Header />
         <Layout>
           <Switch>
             <Route exact path="/">

src/components/Button/index.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StyledButton } from './styled';
+
+const Button = ({ children }) => {
+  return <StyledButton>{children}</StyledButton>;
+};
+
+Button.propTypes = {};
+
+export default Button;

src/components/Button/styled.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+  margin-right: 16px;
+  color: inherit;
+  margin-left: -12px;
+  flex: 0 0 auto;
+  padding: 12px;
+  overflow: visible;
+  font-size: 1.5rem;
+  text-align: center;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 50%;
+  border: 0;
+  cursor: pointer;
+  margin: 0;
+  display: inline-flex;
+  outline: 0;
+  position: relative;
+  align-items: center;
+  user-select: none;
+  vertical-align: middle;
+  justify-content: center;
+  text-decoration: none;
+  background-color: transparent;
+  -webkit-tap-highlight-color: transparent;
+`;
+
+export { StyledButton };

src/components/Header/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Button from '../Button';
+import Toolbar from '../Toolbar';
+import IconButton from '../IconButton';
+import { Menu } from '../Icons';
+
+import { StyledHeader } from './styled';
+
+const Header = () => {
+  return (
+    <StyledHeader>
+      <Toolbar>
+        <Button>
+          <IconButton>
+            <Menu width="24px" color="white" />
+          </IconButton>
+        </Button>
+      </Toolbar>
+    </StyledHeader>
+  );
+};
+
+export default Header;

src/components/Header/styled.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const StyledHeader = styled.header`
+  color: #fff;
+  background-color: #1c5476;
+  position: static;
+  width: 100%;
+  display: flex;
+  z-index: 1100;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  flex-direction: column;
+  box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%),
+    0px 1px 10px 0px rgb(0 0 0 / 12%);
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+`;
+
+export { StyledHeader };

src/components/IconButton/index.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyledIconButton } from './styled';
+
+const IconButton = ({ children }) => {
+  return <StyledIconButton>{children}</StyledIconButton>;
+};
+
+export default IconButton;

src/components/IconButton/styled.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const StyledIconButton = styled.span`
+  width: 100%;
+  display: flex;
+  align-items: inherit;
+  justify-content: inherit;
+`;
+
+export { StyledIconButton };

src/components/Icons/Menu.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Menu = (props) => {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
+      <path fill="currentColor" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
+    </svg>
+  );
+};
+
+export default Menu;

src/components/Icons/index.js

@@ -0,0 +1 @@
+export { default as Menu } from './Menu';

src/components/Toolbar/index.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StyledToolbar } from './styled';
+
+const Toolbar = ({ children }) => {
+  return <StyledToolbar>{children}</StyledToolbar>;
+};
+
+Toolbar.propTypes = {};
+
+export default Toolbar;

src/components/Toolbar/styled.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const StyledToolbar = styled.div`
+  min-height: 64px;
+  padding-left: 24px;
+  padding-right: 24px;
+  display: flex;
+  position: relative;
+  align-items: center;
+  color: #fff;
+`;
+
+export { StyledToolbar };