dodan js za odpiranje in zapiranje hamburger menija

index.html

@@ -23,7 +23,7 @@
         </ul>
         <button class="hamburger_meni" type="button" aria-label="Odpri meni" aria-expanded="false">
             <i class="fa-solid fa-bars"></i>
-        </button>
+        </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

@@ -0,0 +1,10 @@
+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 */
+
+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) */
+    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 */
+});
+