feat(frontend): add style for hamburger menu and its components

functionality is still a WIP

client/src/App.css

@@ -23,6 +23,10 @@ html {
   background-color: var(--bg-main);
 }
 
+ul {
+  list-style: none;
+}
+
 .app {
   height: 100vh;
   display: grid;

client/src/App.tsx

@@ -1,6 +1,12 @@
 import { ReactElement, useContext, useEffect } from "react";
 import { GlobalContext } from "./context/GlobalState";
-import { Loader, Conditions, NavBar, CurrentWeather } from "./components";
+import {
+  Loader,
+  Conditions,
+  Header,
+  HamburgerMenu,
+  CurrentWeather,
+} from "./components";
 import "./App.css";
 
 function App(): ReactElement {
@@ -32,7 +38,8 @@ function App(): ReactElement {
       <section className="app">
         {forecast && geocoding ? (
           <>
-            <NavBar />
+            <Header />
+            <HamburgerMenu />
             <CurrentWeather />
 
             <Conditions />

client/src/components/HamburgerMenu/HamburgerMenu.css

@@ -0,0 +1,134 @@
+.hamburger-container {
+  grid-row: 2 / 3;
+  grid-column: 2;
+  margin-top: 2em;
+
+  height: 22px;
+  width: 20px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+  z-index: 10;
+}
+
+.hamburger-line {
+  min-width: 100%;
+  height: 1px;
+
+  border: 1px solid var(--text-primary);
+}
+
+.menu {
+  position: absolute;
+  top: 4em;
+  left: -320px;
+  z-index: 9;
+
+  width: 300px;
+  height: 400px;
+  padding-top: 1em;
+
+  display: grid;
+  justify-items: center;
+  align-items: center;
+
+  border: 2px solid var(--text-primary);
+  border-radius: 0 15px 15px 0;
+  border-left: none;
+
+  background-color: var(--bg-secondary);
+  transition: left 0.35s linear;
+}
+
+.menu.open {
+  left: 0;
+  box-shadow: 5px 5px 5px black;
+}
+
+/* .toggles-container { */
+/*   display: flex; */
+/*   flex-direction: column; */
+/*   align-items: center; */
+/*   justify-content: space-evenly; */
+/* } */
+
+.unit-toggle {
+  position: relative;
+  display: block;
+}
+
+.unit-toggle:first-of-type {
+  margin-bottom: 2em;
+}
+
+.unit-toggle > label {
+  display: block;
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+}
+
+.unit-toggle input {
+  position: absolute;
+  left: 0;
+  opacity: 0;
+}
+
+.unit-toggle > label > span {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  min-height: 2em;
+  text-align: left;
+  line-height: 2em;
+
+  color: var(--bg-main);
+  font-weight: bold;
+  background-color: var(--text-primary);
+  border-radius: 15px;
+}
+
+.unit-toggle span span {
+  position: relative;
+  display: block;
+  float: left;
+  width: 50%;
+  text-align: center;
+}
+
+.unit-toggle > label > span > span:last-child {
+  border-radius: 3px;
+  background-color: var(--bg-main);
+  position: absolute;
+  right: 50%;
+  top: 0;
+  display: block;
+  width: 50%;
+  height: 100%;
+  transition: all 0.2s ease-out;
+}
+
+.unit-toggle > label input:checked ~ span > span:last-child {
+  right: 0;
+}
+
+.search-box-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.125em;
+}
+
+.search-box {
+  min-width: 200px;
+  height: 2.5em;
+  background-color: white;
+  border-radius: 15px;
+  padding: 0.5em;
+  font-size: 1rem;
+}

client/src/components/HamburgerMenu/HamburgerMenu.tsx

@@ -0,0 +1,60 @@
+import { MouseEvent, ReactElement, useRef } from "react";
+import "./HamburgerMenu.css";
+
+function HamburgerMenu(): ReactElement {
+  const menuElement = useRef<HTMLDivElement>(null);
+
+  function clickHandler(
+    e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>
+  ) {
+    menuElement.current?.classList.toggle("open");
+    e.currentTarget.classList.toggle("toggled");
+  }
+
+  return (
+    <>
+      <button className="hamburger-container" onClick={(e) => clickHandler(e)}>
+        <span className="hamburger-line"></span>
+        <span className="hamburger-line"></span>
+        <span className="hamburger-line"></span>
+      </button>
+      <div className="menu" ref={menuElement}>
+        <ul className="toggles-container">
+          <li className="unit-toggle">
+            <label htmlFor="speed-units">
+              <input id="speed-units" type="checkbox" />
+              <strong>Speed units</strong>
+              <span>
+                <span>km/h</span>
+                <span>mph</span>
+                <span></span>
+              </span>
+            </label>
+          </li>
+          <li className="unit-toggle">
+            <label htmlFor="temp-units">
+              <input id="temp-units" type="checkbox" />
+              <strong>Temperature and units</strong>
+              <span>
+                <span>°C</span>
+                <span>°F</span>
+                <span></span>
+              </span>
+            </label>
+          </li>
+        </ul>
+        <div className="search-box-container">
+          <label htmlFor="search-box">Search by city</label>
+          <input
+            id="search-box"
+            className="search-box"
+            type="search"
+            placeholder="London"
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export { HamburgerMenu };

client/src/components/NavBar/NavBar.css → client/src/components/Header/Header.css

@@ -1,18 +1,10 @@
 @import url("https://fonts.googleapis.com/css2?family=Sanchez&display=swap");
 
-nav {
+.location-and-date {
   grid-row: 2 / 3;
   grid-column: 2 / 7;
   max-height: 5em;
 
-  position: relative;
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
-  justify-content: center;
-}
-
-.location-and-date {
   display: flex;
   flex-direction: column;
   align-items: center;

client/src/components/NavBar/NavBar.tsx → client/src/components/Header/Header.tsx

@@ -1,7 +1,7 @@
 import { ReactElement, useContext } from "react";
 import { GlobalContext } from "../../context/GlobalState";
-import { HamburgerMenu } from "./HamburgerMenu/HamburgerMenu";
-import "./NavBar.css";
+// import { HamburgerMenu } from "./HamburgerMenu/HamburgerMenu";
+import "./Header.css";
 
 function validateAddress(address: string | undefined): string {
   if (address) {
@@ -41,18 +41,15 @@ function getTodayString(): string {
   return `${weekdays[today.getDay()]}, ${todayString}`;
 }
 
-function NavBar(): ReactElement {
+function Header(): ReactElement {
   const { geocoding } = useContext(GlobalContext);
 
   return (
-    <nav>
-      <header className="location-and-date">
-        <h1>{validateAddress(geocoding?.formatted_address)}</h1>
-        <p>{getTodayString()}</p>
-      </header>
-      <HamburgerMenu />
-    </nav>
+    <header className="location-and-date">
+      <h1>{validateAddress(geocoding?.formatted_address)}</h1>
+      <p>{getTodayString()}</p>
+    </header>
   );
 }
 
-export { NavBar };
+export { Header };

client/src/components/index.ts

@@ -1,6 +1,7 @@
 import { Loader } from "./Loader/Loader";
 import { Conditions } from "./Conditions/Conditions";
-import { NavBar } from "./NavBar/NavBar";
+import { Header } from "./Header/Header";
+import { HamburgerMenu } from "./HamburgerMenu/HamburgerMenu";
 import { CurrentWeather } from "./CurrentWeather/CurrentWeather";
 
-export { Loader, Conditions, NavBar, CurrentWeather };
+export { Loader, Conditions, Header, HamburgerMenu, CurrentWeather };