From 723f281cf74d3c40b5ce31e6368b8f155ccaa6d7 Mon Sep 17 00:00:00 2001
From: Devanshu Kumar Singh <console.uk123@gmail.com>
Date: Fri, 27 Sep 2024 00:00:21 +0530
Subject: [PATCH] solved issue #1922

---
 index.html | 18 +++++-------------
 navbar.js  | 15 +++++++++++++++
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 683be069..3cabc5c9 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,8 @@
   <link rel="stylesheet" href="./mobileView.css" />
   <link rel="stylesheet" href="./style_PetCards.css" />
   <link rel="icon" type="image/x-icon" href="logo.png" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+
 
 
   <script defer src="https://unpkg.com/alpinejs@3.2.4/dist/cdn.min.js"></script>
@@ -51,19 +53,9 @@ <h1 class="text-4xl text_2  text-center md:text-left md:ml-12 uppercase font-ser
         id="nav-button"
       >
         <span class="sr-only">Open main menu</span>
-        <svg
-          class="w-6 h-6"
-          aria-hidden="true"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-            clip-rule="evenodd"
-          ></path>
-        </svg>
+        <span class="material-symbols-outlined">
+          menu
+          </span>
       </button>
       <nav class="">
         <div class="hidden w-full lg:block z-2" id="navbar">
diff --git a/navbar.js b/navbar.js
index 97c6e583..753620e7 100644
--- a/navbar.js
+++ b/navbar.js
@@ -2,6 +2,21 @@ const navBar = document.getElementById("navbar");
 const logo = document.getElementById("logo");
 const navBtn = document.getElementById("nav-button");
 
+// Get the nav-button and the span element
+const menuSpan = navBtn.querySelector('.material-symbols-outlined');
+
+// Add an event listener to the nav-button
+navBtn.addEventListener('click', () => {
+  // Check the current text content of the span element
+  if (menuSpan.textContent === 'close') {
+    // Change the text content to 'close'
+    menuSpan.textContent = 'menu';
+  } else {
+    // Change the text content back to 'menu'
+    menuSpan.textContent = 'close';
+  }
+});
+
 let prevScrollPos =  window.pageYOffset
 
 navBtn.addEventListener("click", () => {