Merge pull request #121 from haingo-raz/fix-navbar

Standardize navigation bar
codingkatty · Oct 22, 2024 · 2d10666 · 2d10666
2 parents a503a37 + b11d051
commit 2d10666
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 76 deletions.
diff --git a/about.html b/about.html
@@ -7,6 +7,7 @@
     <title>About Math 4 Python</title>
     <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="hamburger_menu.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
@@ -230,31 +231,24 @@
 </head>
 
 <body>      
-
-
-
     <div class="navbar">
-        <h1 class="title">MathPyLearn</h1>
-        <!-- Hamburger Menu for Mobile -->
-        <div class="hamburger" id="hamburger">
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-        <!-- Navbar Links -->
-        <div class="nav-links" id="nav-links">
+        <a class="logo" href="index.html"><img src="logonew.svg" width="40"></a>
+        <div class="nav-links">
             <a href="index.html">Home</a>
             <a href="about.html" class="active">About</a>
             <a href="learn.html">Learn</a>
             <a href="challenge.html">Challenge</a>
             <a href="faq.html">FAQs</a>
         </div>
-        <!-- Theme Toggle -->
         <div class="theme-toggle-wrapper">
             <button style="cursor: pointer;" id="theme-toggle">
                 <i class="fas fa-sun"></i>
                 <i class="fas fa-moon"></i>
             </button>
+            <a href="javascript:void(0);" class="icon" onclick="openMobileMenu()">
+                <i class="fa fa-bars"></i>
+                <i class="fa fa-times" style="display: none;"></i>
+            </a>
         </div>
     </div>
     <div class="container">

diff --git a/challenge.html b/challenge.html
@@ -15,27 +15,23 @@
 <body id="challenge">
 
     <div class="navbar">
-        <h1 class="title">MathPyLearn</h1>
-        <!-- Hamburger Menu for Mobile -->
-        <div class="hamburger" id="hamburger">
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-        <!-- Navbar Links -->
-        <div class="nav-links" id="nav-links">
+        <a class="logo" href="index.html"><img src="logonew.svg" width="40"></a>
+        <div class="nav-links">
             <a href="index.html">Home</a>
             <a href="about.html">About</a>
             <a href="learn.html">Learn</a>
             <a href="challenge.html" class="active">Challenge</a>
             <a href="faq.html">FAQs</a>
         </div>
-        <!-- Theme Toggle -->
         <div class="theme-toggle-wrapper">
             <button style="cursor: pointer;" id="theme-toggle">
                 <i class="fas fa-sun"></i>
                 <i class="fas fa-moon"></i>
             </button>
+            <a href="javascript:void(0);" class="icon" onclick="openMobileMenu()">
+                <i class="fa fa-bars"></i>
+                <i class="fa fa-times" style="display: none;"></i>
+            </a>
         </div>
     </div>
 

diff --git a/faq.html b/faq.html
@@ -165,27 +165,23 @@
 
 <body id="faq">
     <div class="navbar">
-        <h1 class="title">MathPyLearn</h1>
-        <!-- Hamburger Menu for Mobile -->
-        <div class="hamburger" id="hamburger">
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-        <!-- Navbar Links -->
-        <div class="nav-links" id="nav-links">
+        <a class="logo" href="index.html"><img src="logonew.svg" width="40"></a>
+        <div class="nav-links">
             <a href="index.html">Home</a>
             <a href="about.html">About</a>
             <a href="learn.html">Learn</a>
             <a href="challenge.html">Challenge</a>
             <a href="faq.html" class="active">FAQs</a>
         </div>
-        <!-- Theme Toggle -->
         <div class="theme-toggle-wrapper">
             <button style="cursor: pointer;" id="theme-toggle">
                 <i class="fas fa-sun"></i>
                 <i class="fas fa-moon"></i>
             </button>
+            <a href="javascript:void(0);" class="icon" onclick="openMobileMenu()">
+                <i class="fa fa-bars"></i>
+                <i class="fa fa-times" style="display: none;"></i>
+            </a>
         </div>
     </div>
 

diff --git a/hamburger_menu.css b/hamburger_menu.css
@@ -57,47 +57,47 @@
     background-color: #c82333;
   }
 .theme-toggle-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 10px;
     margin-right: 10px;
 }
 
-.logo img {
-    width: 40px;
+.icon {
+  color: #fff;
+  display: none;
 }
 
-/* Hamburger Menu Styles */
-.hamburger {
-    display: none;
-    flex-direction: column;
-    gap: 4px;
-    cursor: pointer;
-}
 
-.hamburger div {
-    width: 25px;
-    height: 3px;
-    background-color: white;
+.logo img {
+    width: 40px;
 }
 
 /* Responsive Styles */
-@media (max-width: 768px) {
+@media (max-width: 992px) {
     .nav-links {
-        display: none;
+        width: 40vw;
         flex-direction: column;
-        gap: 10px;
         position: absolute;
-        top: 60px;
-        left: 20px;
-        background-color: #333;
+        top: 65px;
+        left: 0;
+        background-color: #2c3e50;
         padding: 10px;
         border-radius: 8px;
+        transition-property: width;
+        transition-duration: 1s;
+    }
+
+    .nav-links a {
+      width: unset !important;
     }
 
     .navbar {
         position: relative;
     }
 
-    .hamburger {
-        display: flex;
+    .icon {
+      display: block;
     }
 
     .nav-links.show {

diff --git a/index.html b/index.html
@@ -9,11 +9,13 @@
     <link rel="icon" href="Untitled design1.ico" type="image/svg+xml">
     <!-- <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">-->
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="hamburger_menu.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
 </head>
 <body id="home">
     <div class="navbar">
+        <a class="logo" href="index.html"><img src="logonew.svg" width="40"></a>
         <div class="nav-links">
             <a href="index.html" class="active">Home</a>
             <a href="about.html">About</a>
@@ -26,8 +28,11 @@
                 <i class="fas fa-sun"></i>
                 <i class="fas fa-moon"></i>
             </button>
+            <a href="javascript:void(0);" class="icon" onclick="openMobileMenu()">
+                <i class="fa fa-bars"></i>
+                <i class="fa fa-times" style="display: none;"></i>
+            </a>
         </div>
-        <a class="logo" href="index.html"><img src="logonew.svg" width="40"></a>
     </div>
 
     <div class="content">

diff --git a/learn.html b/learn.html
@@ -171,27 +171,23 @@
 
 <body id="learn" onload="showEditor('Untitled')">
     <div class="navbar">
-        <h1 class="title">MathPyLearn</h1>
-        <!-- Hamburger Menu for Mobile -->
-        <div class="hamburger" id="hamburger">
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-        <!-- Navbar Links -->
-        <div class="nav-links" id="nav-links">
+        <a class="logo" href="index.html"><img src="logonew.svg" width="40"></a>
+        <div class="nav-links">
             <a href="index.html">Home</a>
             <a href="about.html">About</a>
             <a href="learn.html" class="active">Learn</a>
             <a href="challenge.html">Challenge</a>
             <a href="faq.html">FAQs</a>
         </div>
-        <!-- Theme Toggle -->
         <div class="theme-toggle-wrapper">
             <button style="cursor: pointer;" id="theme-toggle">
                 <i class="fas fa-sun"></i>
                 <i class="fas fa-moon"></i>
             </button>
+            <a href="javascript:void(0);" class="icon" onclick="openMobileMenu()">
+                <i class="fa fa-bars"></i>
+                <i class="fa fa-times" style="display: none;"></i>
+            </a>
         </div>
     </div>
 

diff --git a/script.js b/script.js
@@ -659,14 +659,6 @@ document.addEventListener('DOMContentLoaded', function () {
 
 
 document.addEventListener("DOMContentLoaded", () => {
-    const hamburger = document.getElementById("hamburger");
-    const navLinks = document.getElementById("nav-links");
-
-
-    hamburger.addEventListener("click", () => {
-        navLinks.classList.toggle("show");
-    });
-
     const lessonResetBtn = document.getElementById('lesson-reset-btn');
     const challengeResetBtn = document.getElementById('challenge-reset-btn');
 
@@ -681,6 +673,38 @@ document.addEventListener("DOMContentLoaded", () => {
     updateProgressBar();
 });
 
+function checkWindowSize() {
+    const navLinks = document.querySelector('.nav-links');
+    const icon = document.querySelector('.icon');
+
+    if (window.innerWidth > 992) {
+        navLinks.style.display = 'flex';
+        icon.style.display = 'none';
+    } else {
+        navLinks.style.display = 'none';
+        icon.style.display = 'block';
+    }
+}
+
+window.addEventListener('resize', checkWindowSize);
+// window.addEventListener('load', checkWindowSize);
+
+function openMobileMenu() {
+    const navLinks = document.querySelector('.nav-links');
+    const menuIcon = document.querySelector(".fa-bars");
+    const closeIcon = document.querySelector(".fa-times");
+
+    if (navLinks.style.display === "flex") {
+        navLinks.style.display = "none";
+        menuIcon.style.display = 'inline-block';
+        closeIcon.style.display = 'none';
+    } else {
+        navLinks.style.display = "flex";
+        menuIcon.style.display = 'none';
+        closeIcon.style.display = 'inline-block';
+    }
+}
+
 //This function should check currentContentType to decide how to reset the editor.
 function resetEditor() {
     // Check the type of content currently loaded

diff --git a/styles.css b/styles.css
@@ -23,6 +23,7 @@ body {
     position: sticky;
     top: 0;
     z-index: 1000;
+    gap: 10px;
 }
 
 .navbar .nav-links {
@@ -54,10 +55,10 @@ body {
     margin-right: 7px;
 }
 
-.navbar a {
-    width: 7em;
+.navbar .nav-links a {
+    width: 5.5em;
     position: relative;
-    height: 3.5em;
+    height: 2.2em;
     border: 3px ridge #149CEA;
     outline: none;
     background-color: transparent;