ko je hamburger meni odprt je prikazan x

index.html

@@ -14,6 +14,9 @@
             <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
+        <button class="hamburger_meni" type="button" aria-label="Odpri meni" aria-expanded="false">
+            <i class="fa-solid fa-bars"></i>
+        </button> <! aria-expanded nam bo povedal ali je meni odprt ali zaprt, zdej po defultu mam ob nalozitvi strani meni zaprt, zato =false, ostlao urejamo v js >
         <ul class="main_menu">
             <li><a class="active" href="index.html"><i class="fa-solid fa-house"></i>Domov</a></li>
             <li><a href="jedilnik.html"><i class="fa-solid fa-utensils"></i>Jedilnik</a></li>
@@ -21,9 +24,6 @@
             <li><a href="rezervacija.html"><i class="fa-solid fa-calendar-check"></i>Rezervacija</a></li>
             <li><a href="o_nas.html"><i class="fa-solid fa-circle-info"></i>O nas</a></li>
         </ul>
-        <button class="hamburger_meni" type="button" aria-label="Odpri meni" aria-expanded="false">
-            <i class="fa-solid fa-bars"></i>
-        </button> <! aria-expanded nam bo povedal ali je meni odprt ali zaprt, zdej po defultu mam ob nalozitvi strani meni zaprt, zato =false, ostlao urejamo v js >
     </nav>
 </header>
     <main class="home_page">

js/navigacija.js

@@ -1,9 +1,12 @@
 const hamburger = document.querySelector (".hamburger_meni"); /* naredim spremenljivko hamburger, preišve celoten dokument HRML in poisce prvi item z razredom .hamburger_meni, shrani referenco na prvi element v html ki ima ta razred */
 const meni = document.querySelector (".main_menu"); /*enako kot hamburger le da tukaj iscem prvi element s classom main_menu */
+const ikona = hamburger.querySelector("i"); /*tole bomo pa dodali da se bo spremenila ikona v x */
 
 hamburger.addEventListener ("click", function (){ /*addEventListener je metoda za poslušanje dogodka, click je pa dogodek */
     meni.classList.toggle ("odprt"); /*classList predstavlja elemente CSS razreda, toglle pa ta element (odprt) dodaja/odstranja */
     const odprt = meni.classList.contains ("odprt"); /*spet nardimo spremenljivko, ki ji dodamo vrednost true ali false glede na to ali je meni odprt/zaprt (preverja ali je dodan pri classu main_meni odprt) */
+    ikona.classList.toggle("fa-bars", !odprt); /*zdaj pa ko je odprt je prikazan x, zaprt (!odprt) pa tri crtice */
+    ikona.classList.toggle("fa-xmark", odprt);
     hamburger.setAttribute ("aria-expanded", String(odprt)); /*setAtribute spremeni vrednost HTML atributa, v tem primeru arial-expanded iz false v true in obratno, string pa pretvori true/false v besedilo "true"/"false" in posodobi atribut.*/
     hamburger.setAttribute ("aria-label", odprt ? "Zapri meni" : "Odpri meni"); /*gledr na to ali je odprt true ali false se bo spremenil zapis (za tiste ki imajo ne morejo videti treh crtic) v odprt meni ali zaprt meni */
 });