fix: responsiveness, and, hamburger

JordanMooree · Jul 8, 2022 · 8484e1b · 8484e1b
1 parent d197240
commit 8484e1b
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
-# Welcome to Front End Junior Workflow Template!
+# Welcome to Front End Template!
 
-Here you will find the following workflows with common solutions to:
+Here you will find the following workflows with solutions to:
 
 - Building a website from scratch
 - Navigation for mobile and desktop for responsive design
-- Sass 7-1 Architecture
+- Sass 7-1 Architecture (Credit to [KittyGiraudel's Sass Boilerplate](https://github.com/KittyGiraudel/sass-boilerplate))
 - Common mixins that help simplify your CSS code for common breakpoints in different screen sizes
 
 _Note:_ **Ensure your IDE can watch your main.scss file as you work through your Sass code! The index.html file is hooked in with main.css file. I prefer using VSCode along with the Live Sass Compiler.**

diff --git a/images/icon-hamburger.svg b/images/icon-hamburger.svg
diff --git a/index.html b/index.html
@@ -1,24 +1,68 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <!-- Meta -->
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="YOUR DESCRIPTION OF WEBSITE" />
+
+    <!-- Title -->
     <title>Document</title>
-    <script src="./scripts/script.js"></script>
+
+    <!-- Favicon, Fonts, CDN Links, etc. -->
     <link rel="stylesheet" href="./styles/main.css" />
+
+    <!-- Scripts -->
+    <script src="./scripts/script.js"></script>
   </head>
   <body>
-    <!---->
+    <!-- Semantics in HTML found here: https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html -->
+
+    <!-- Header and navigation-->
     <header class="header">
       <nav class="nav">
-        <img src="{IMG-SOURCE}" class="logo" alt="logo" />
-        <!--Hamburger menu-->
-        <img
-          src="./images/icon-hamburger.svg"
-          id="hamburger"
-          class="hamburger"
-        />
+        <img src="{IMG-SOURCE}" class="logo" alt="Your logo" />
+        <!--
+        Hamburger menu or you can use styled <span> tags and animate them on click(recommended). Example in *React*:
+        <span
+            className="line"
+            style={
+              isClicked
+                ? { transform: "translateY(5px) rotate(45deg)" }
+                : { transform: "none" }
+            }
+          ></span>
+          <span
+            className="line"
+            style={isClicked ? { opacity: 0 } : { opacity: 1 }}
+          ></span>
+          <span
+            className="line"
+            style={
+              isClicked
+                ? { transform: "translateY(-5px) rotate(-45deg)" }
+                : { transform: "none" }
+            }
+          ></span>  
+
+          NOTE: You must add the class "line" to each span tag with height, color, and width in your CSS.
+
+          EXAMPLE OF CSS applied to the span tags:
+          .line {
+            background-color: var(--color-primary);
+            display: block;
+            height: 2px;
+            margin-bottom: 3px;
+            transition: transform 250ms, opacity 250ms;
+            width: 18px;
+          }
+        -->
+        <div class="hamburger" id="hamburger">
+          <span class="line"></span>
+          <span class="line"></span>
+          <span class="line"></span>
+        </div>
         <!--Navigation menu-->
         <ul class="nav-ul" id="nav-ul">
           <li><a href="#about">About</a></li>

diff --git a/scripts/script.js b/scripts/script.js
@@ -1,10 +1,13 @@
 document.addEventListener("DOMContentLoaded", () => {
   const hamburger = document.getElementById("hamburger");
   const navUL = document.getElementById("nav-ul");
-
+  const hamburgerChildren = hamburger.children;
+  console.log(hamburgerChildren);
   // Triggers the nav list to show on hamburger click
   hamburger.addEventListener("click", () => {
-    hamburger.classList.toggle("open");
+    hamburgerChildren[0].classList.toggle("show-1");
+    hamburgerChildren[1].classList.toggle("hide");
+    hamburgerChildren[2].classList.toggle("show-2");
     navUL.classList.toggle("show");
   });
 });
diff --git a/styles/abstracts/_mixins.scss b/styles/abstracts/_mixins.scss
@@ -43,7 +43,7 @@
   // then media queries are applied as the viewport width or display resolution increases
 
   // VIEWPORT SIZES
-  $bp-phone: "screen and (max-width: 480px)"; // phone vertically & up
+  $bp-phone: "screen and (max-width: 599px)"; // phone vertically & up
   $bp-tablet: "screen and (max-width: 768px)"; // tablet vertically & up
   $bp-laptop: "screen and (min-width: 1024px)"; // laptop & up
   $bp-monitor: "screen and (min-width: 1440px)"; // monitor & up

diff --git a/styles/components/_hamburger.scss b/styles/components/_hamburger.scss
@@ -0,0 +1,20 @@
+.hamburger {
+  .line {
+    background-color: $light-grey;
+    display: block;
+    height: 2px;
+    margin-bottom: 3px;
+    transition: transform 250ms, opacity 250ms;
+    width: 18px;
+  }
+
+  .hide {
+    opacity: 0;
+  }
+  .show-1 {
+    transform: translateY(5px) rotate(45deg);
+  }
+  .show-2 {
+    transform: translateY(-5px) rotate(-45deg);
+  }
+}
diff --git a/styles/main.css b/styles/main.css