From c1094898b7651f79b33039fe16be4cf8d5e1beb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mark=20Poljan=C5=A1ek?= <mark.poljansek@sos-sw.com>
Date: Thu, 4 Sep 2025 16:14:35 +0200
Subject: [PATCH] Popravljen mobilni meni

---
 code_export.txt                               | 44 ++++-----
 css/base/_base.css                            |  4 +-
 css/layout/_header.css                        | 92 ++++++++++++-------
 en/about-us/index.html                        |  2 +-
 en/about-us/index.html.bak                    |  6 +-
 en/index.html                                 |  1 -
 en/projects/index.html                        |  2 -
 en/projects/index.html.bak                    |  6 +-
 .../index.html                                |  2 +-
 .../index.html.bak                            |  2 +-
 en/projects/testproject/index.html            |  2 +-
 en/projects/testproject/index.html.bak        |  2 +-
 main.js                                       | 41 ++++++---
 mk/projects/index.html                        |  2 +-
 mk/projects/index.html.bak                    |  6 +-
 si/projects/index.html                        |  2 +-
 si/projects/index.html.bak                    |  6 +-
 si/projects/testproject/index.html            |  2 +-
 si/projects/testproject/index.html.bak        |  2 +-
 19 files changed, 130 insertions(+), 96 deletions(-)

diff --git a/code_export.txt b/code_export.txt
index 5ef8039..3b53c35 100644
--- a/code_export.txt
+++ b/code_export.txt
@@ -3157,11 +3157,11 @@ footer hr {
             </div>
         </div>
     </div>
-    <script src="../../main.js"></script>
+    
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
@@ -3538,11 +3538,11 @@ footer hr {
             </div>
         </div>
     </div>
-    <script src="../../main.js"></script>
+    
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
@@ -5783,12 +5783,12 @@ footer hr {
             </div>
         </div>
     </div>
-    <script src="../../main.js"></script>
+    
 </footer>
 <!-- END_FOOTER -->
 
     <!-- Link to the main JS file -->
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
@@ -6120,12 +6120,12 @@ footer hr {
             </div>
         </div>
     </div>
-    <script src="../../main.js"></script>
+    
 </footer>
 <!-- END_FOOTER -->
 
     <!-- Link to the main JS file -->
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
@@ -7159,7 +7159,7 @@ footer hr {
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
@@ -7503,7 +7503,7 @@ footer hr {
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
@@ -9959,7 +9959,7 @@ footer hr {
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
@@ -10303,7 +10303,7 @@ footer hr {
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
@@ -11534,12 +11534,12 @@ document.addEventListener('DOMContentLoaded', function() {
             </div>
         </div>
     </div>
-    <script src="../../main.js"></script>
+    
 </footer>
 <!-- END_FOOTER -->
 
     <!-- Поврзување до главната JS-датотека -->
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
@@ -11791,12 +11791,12 @@ document.addEventListener('DOMContentLoaded', function() {
             </div>
         </div>
     </div>
-    <script src="../../main.js"></script>
+    
 </footer>
 <!-- END_FOOTER -->
 
     <!-- Поврзување до главната JS-датотека -->
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
@@ -15293,12 +15293,12 @@ msos spletna stran
             </div>
         </div>
     </div>
-    <script src="../../main.js"></script>
+    
 </footer>
 <!-- END_FOOTER -->
 
     <!-- Povezava do glavne JS datoteke -->
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
@@ -15550,12 +15550,12 @@ msos spletna stran
             </div>
         </div>
     </div>
-    <script src="../../main.js"></script>
+    
 </footer>
 <!-- END_FOOTER -->
 
     <!-- Povezava do glavne JS datoteke -->
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
@@ -17703,7 +17703,7 @@ msos spletna stran
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
@@ -17913,7 +17913,7 @@ msos spletna stran
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>"""
 
diff --git a/css/base/_base.css b/css/base/_base.css
index 886dd80..1f09a8f 100644
--- a/css/base/_base.css
+++ b/css/base/_base.css
@@ -21,8 +21,8 @@ body {
     color: #101828;
 }
 
-/* Prepreči drsenje strani, ko je mobilni meni odprt */
-body.nav-open {
+/* NOVO (zamenjaj znotraj _base.css): */
+html.nav-open, html.nav-open body {
     overflow: hidden;
 }
 
diff --git a/css/layout/_header.css b/css/layout/_header.css
index 20abd23..1bf92b6 100644
--- a/css/layout/_header.css
+++ b/css/layout/_header.css
@@ -35,7 +35,6 @@
     gap: 48px;
 }
 
-/* KLJUČNA SPREMEMBA: Navigacijskemu ovoju damo možnost rasti, da zapolni prostor */
 .header-content > nav {
     flex-grow: 1;
     display: flex;
@@ -55,10 +54,9 @@
     display: flex;
     align-items: center;
     height: 100%;
-    width: 100%; /* Dovolimo, da seznam zasede celotno širino <nav> elementa */
+    width: 100%;
 }
 
-/* KLJUČNA SPREMEMBA: Poravnamo elemente na desno znotraj razpoložljivega prostora */
 .navigation.desktop-nav {
     justify-content: flex-end; 
 }
@@ -82,7 +80,7 @@
     align-items: center;
     gap: 8px;
     transition: color 0.2s ease-in-out;
-    white-space: nowrap; /* KLJUČNA SPREMEMBA: Prepreči prelom besedila */
+    white-space: nowrap;
 }
 
 .navigation > .menu-item > a:hover {
@@ -104,10 +102,9 @@
     display: flex;
     align-items: center;
     gap: 12px;
-    flex-shrink: 0; /* Preprečimo, da bi se gumbi stisnili */
+    flex-shrink: 0;
 }
 
-/* Stili za izbiro jezika (ostanejo enaki) */
 .language-selector {
     position: relative;
     cursor: pointer;
@@ -169,19 +166,19 @@
     background-color: #FFFFFF;
     border: 1px solid #EAECF0;
     list-style: none;
-    margin: 8px 0 0 0; /* Povečan odmik za zračnost */
+    margin: 8px 0 0 0;
     padding: 8px;
     min-width: 260px;
     border-radius: 12px;
     box-shadow: 0 12px 24px -4px rgba(16, 24, 40, 0.08);
     z-index: 1000;
-    
     opacity: 0;
     visibility: hidden;
     transform: translateX(-50%) translateY(10px);
     transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
 }
 
+/* To pravilo povzroča težave na mobilnih napravah in ga bomo spodaj povozili */
 .navigation .menu-item:hover > .dropdown-menu {
     opacity: 1;
     visibility: visible;
@@ -219,7 +216,7 @@
 
 
 /* ==========================================================================
-   5. Stili za mobilno glavo in "accordion" meni - OPTIMIZIRANO
+   5. Stili za mobilno glavo in "accordion" meni - POPOLNA PRENOVA
    ========================================================================== */
 
 @media (max-width: 1024px) { 
@@ -235,14 +232,9 @@
         z-index: 1002;
     }
     
-    /* === GLAVNI POPRAVEK ZA DELOVANJE MOBILNEGA MENIJA === */
-    /* Preprečimo, da bi .header-content zavzel ves prostor na mobilni napravi,
-       kar je sicer pravilno za namizje, a na mobilni napravi potisne ikono menija
-       izven vidnega polja ali prepreči klik nanjo. */
     .header-content {
         flex-grow: 0;
     }
-    /* ======================================================= */
 
     .navigation.desktop-nav,
     .dropdown-header-navigation .container > .navigation-actions {
@@ -254,11 +246,12 @@
         font-size: 24px;
         color: #101828;
         cursor: pointer;
-        z-index: 1002;
+        z-index: 1003;
     }
     .mobile-menu-icon .fa-times { display: none; }
-    body.nav-open .mobile-menu-icon .fa-bars { display: none; }
-    body.nav-open .mobile-menu-icon .fa-times { display: block; }
+    
+    html.nav-open .mobile-menu-icon .fa-bars { display: none; }
+    html.nav-open .mobile-menu-icon .fa-times { display: block; }
     
     .mobile-nav-panel {
         display: flex;
@@ -277,7 +270,7 @@
         overflow-y: auto;
     }
 
-    body.nav-open .mobile-nav-panel {
+    html.nav-open .mobile-nav-panel {
         transform: translateX(0);
     }
     
@@ -287,14 +280,17 @@
         align-items: stretch;
         width: 100%;
         gap: 0;
+        border-bottom: 1px solid #EAECF0;
+        padding-bottom: 24px;
     }
 
     .mobile-nav .menu-item {
+        display: block;
         height: auto;
         border-bottom: 1px solid #EAECF0;
     }
-    .mobile-nav .menu-item:last-of-type {
-        border-bottom: none;
+    .mobile-nav .menu-item:first-of-type {
+        border-top: 1px solid #EAECF0;
     }
     
     .mobile-nav .menu-item > a {
@@ -309,29 +305,29 @@
         height: auto;
     }
 
-    .mobile-nav .menu-item.open > a::after {
+    html.nav-open .mobile-nav .menu-item.open > a::after {
         transform: rotate(180deg);
     }
     
     .mobile-nav .dropdown-menu {
         position: static;
-        background-color: #F9FAFB;
-        box-shadow: none;
-        border-radius: 0;
-        padding: 0 0 0 16px;
-        min-width: auto;
-        width: 100%;
-        max-height: 0;
-        overflow: hidden;
+        transform: none;
         opacity: 1;
         visibility: visible;
-        transform: none;
-        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
+        box-shadow: none;
+        border: none;
+        background-color: transparent;
+        width: 100%;
+        min-width: auto;
+        margin: 0;
+        padding: 0 0 8px 0;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease-in-out;
     }
 
     .mobile-nav .menu-item.open > .dropdown-menu {
         max-height: 500px;
-        padding: 16px 0 16px 16px;
     }
     
     .mobile-nav .dropdown-menu ul {
@@ -339,18 +335,46 @@
         margin: 0;
         list-style: none;
     }
+    
+    .mobile-nav .dropdown-menu li {
+        padding: 0;
+    }
 
     .mobile-nav .dropdown-menu a {
+        display: block;
+        padding: 12px 16px 12px 24px;
         color: #344054;
         font-weight: 500;
         font-size: 18px;
-        padding: 10px 0;
+        border-radius: 6px;
+        white-space: normal;
     }
     .mobile-nav .dropdown-menu a:hover {
-        background-color: transparent;
+        background-color: #F9FAFB;
         color: #101828;
     }
 
+    /* === KLJUČNI POPRAVEK: Onemogočimo namizne :hover efekte na mobilnih napravah === */
+    .mobile-nav .menu-item:hover > .dropdown-menu {
+        /* Preprečimo, da bi namizno pravilo :hover vplivalo na mobilni meni.
+           Na mobilni napravi je stanje odprtosti nadzorovano izključno z razredom .open. */
+        opacity: 1;
+        visibility: visible;
+        transform: none;
+    }
+
+    .mobile-nav .menu-item:hover > a::after {
+        /* Preprečimo obračanje puščice ob :hover dogodku. 
+           Puščica se bo obrnila le, ko je dodan razred .open. */
+        transform: none;
+    }
+    
+    html.nav-open .mobile-nav .menu-item.open > a::after {
+        /* Zagotovimo, da se puščica obrne, ko je meni odprt */
+        transform: rotate(180deg);
+    }
+    /* ================================================================================ */
+
     .mobile-nav-panel .navigation-actions {
         display: flex;
         flex-direction: column;
diff --git a/en/about-us/index.html b/en/about-us/index.html
index 82317e3..dc19503 100644
--- a/en/about-us/index.html
+++ b/en/about-us/index.html
@@ -371,6 +371,6 @@
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/en/about-us/index.html.bak b/en/about-us/index.html.bak
index 37cd2d2..af03b0a 100644
--- a/en/about-us/index.html.bak
+++ b/en/about-us/index.html.bak
@@ -99,7 +99,7 @@
     </div>
 </header>
 
-<!-- KLJUČNA SPREMEMBA: Mobilni panel je zdaj ZUNAJ <header> elementa -->
+<!-- Mobile Navigation Panel (ostane znotraj markerjev, a za <header>) -->
 <div class="mobile-nav-panel">
     <nav>
         <ul class="navigation mobile-nav">
@@ -367,10 +367,10 @@
             </div>
         </div>
     </div>
-    <script src="../../main.js"></script>
+    
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/en/index.html b/en/index.html
index e6fd9c6..a035853 100644
--- a/en/index.html
+++ b/en/index.html
@@ -465,6 +465,5 @@
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/en/projects/index.html b/en/projects/index.html
index 883757d..c05c0fd 100644
--- a/en/projects/index.html
+++ b/en/projects/index.html
@@ -326,7 +326,5 @@
 </footer>
 <!-- END_FOOTER -->
 
-    <!-- Link to the main JS file -->
-    <script src="../../main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/en/projects/index.html.bak b/en/projects/index.html.bak
index f7f30fc..b42227d 100644
--- a/en/projects/index.html.bak
+++ b/en/projects/index.html.bak
@@ -99,7 +99,7 @@
     </div>
 </header>
 
-<!-- KLJUČNA SPREMEMBA: Mobilni panel je zdaj ZUNAJ <header> elementa -->
+<!-- Mobile Navigation Panel (ostane znotraj markerjev, a za <header>) -->
 <div class="mobile-nav-panel">
     <nav>
         <ul class="navigation mobile-nav">
@@ -322,11 +322,9 @@
             </div>
         </div>
     </div>
-    <script src="../../main.js"></script>
+    
 </footer>
 <!-- END_FOOTER -->
 
-    <!-- Link to the main JS file -->
-    <script src="../../main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/en/projects/makedonska-studentska-vecer-vo-ljubljana/index.html b/en/projects/makedonska-studentska-vecer-vo-ljubljana/index.html
index 4bf05a8..a14a253 100644
--- a/en/projects/makedonska-studentska-vecer-vo-ljubljana/index.html
+++ b/en/projects/makedonska-studentska-vecer-vo-ljubljana/index.html
@@ -334,6 +334,6 @@
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/en/projects/makedonska-studentska-vecer-vo-ljubljana/index.html.bak b/en/projects/makedonska-studentska-vecer-vo-ljubljana/index.html.bak
index 63374b7..03594fb 100644
--- a/en/projects/makedonska-studentska-vecer-vo-ljubljana/index.html.bak
+++ b/en/projects/makedonska-studentska-vecer-vo-ljubljana/index.html.bak
@@ -334,6 +334,6 @@
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/en/projects/testproject/index.html b/en/projects/testproject/index.html
index 5dcd4ec..5951ac4 100644
--- a/en/projects/testproject/index.html
+++ b/en/projects/testproject/index.html
@@ -334,6 +334,6 @@
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/en/projects/testproject/index.html.bak b/en/projects/testproject/index.html.bak
index e391947..b855484 100644
--- a/en/projects/testproject/index.html.bak
+++ b/en/projects/testproject/index.html.bak
@@ -334,6 +334,6 @@
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/main.js b/main.js
index ef6aa54..57fd65c 100644
--- a/main.js
+++ b/main.js
@@ -2,28 +2,43 @@ document.addEventListener('DOMContentLoaded', function() {
 
     /**
      * ===================================================================
-     * 1. OSNOVNA FUNKCIONALNOST MOBILNE NAVIGACIJE
-     * Ta koda je ključna za delovanje mobilnega menija.
+     * 1. OSNOVNA FUNKCIONALNOST MOBILNE NAVIGACIJE (Robustna različica)
      * ===================================================================
      */
 
-    // --- Odpiranje in zapiranje glavnega mobilnega panela ---
+    // === MOBILNI MENI: Robusten toggle na <html> ===
     try {
-        const mobileMenuIcon = document.querySelector('.mobile-menu-icon');
-        const body = document.querySelector('body');
+        const icon = document.querySelector('.mobile-menu-icon');
+        const root = document.documentElement; // Ciljamo <html>, da se izognemo konfliktom na <body>
 
-        if (mobileMenuIcon && body) {
-            mobileMenuIcon.addEventListener('click', () => {
-                body.classList.toggle('nav-open');
-            });
+        if (!icon) {
+            console.error('Mobile menu icon not found.');
         } else {
-            console.error('Mobile menu icon or body not found.');
+            icon.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation(); // Preprečimo "bubbling" dogodka, ki bi lahko takoj zaprl meni
+                root.classList.toggle('nav-open');
+            });
+
+            // Zapri meni ob kliku izven panela ali ikone
+            document.addEventListener('click', (e) => {
+                if (root.classList.contains('nav-open') && !e.target.closest('.mobile-nav-panel') && !e.target.closest('.mobile-menu-icon')) {
+                    root.classList.remove('nav-open');
+                }
+            });
+
+            // Zapri meni s tipko Escape
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') {
+                    root.classList.remove('nav-open');
+                }
+            });
         }
-    } catch (error) {
-        console.error('Error in Mobile Menu Toggle:', error);
+    } catch (err) {
+        console.error('Error in Mobile Menu Toggle:', err);
     }
 
-    // --- Mobilni Accordion podmeni ---
+    // --- Mobilni Accordion podmeni (ostane nespremenjen) ---
     try {
         const mobileNav = document.querySelector('.mobile-nav-panel .mobile-nav');
         if (mobileNav) {
diff --git a/mk/projects/index.html b/mk/projects/index.html
index 285680b..b0b1ae0 100644
--- a/mk/projects/index.html
+++ b/mk/projects/index.html
@@ -248,6 +248,6 @@
 <!-- END_FOOTER -->
 
     <!-- Поврзување до главната JS-датотека -->
-    <script src="../../main.js"></script>
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/mk/projects/index.html.bak b/mk/projects/index.html.bak
index 2a4577d..9bffb78 100644
--- a/mk/projects/index.html.bak
+++ b/mk/projects/index.html.bak
@@ -164,7 +164,7 @@
                     <!-- Проект 2 (Placeholder) -->
                     <article class="post-card">
                         <a href="testproject/" class="post-link">
-                            <img src="../../images/5-pmmentals.jpg" alt="Жена презентира пред табла со лепливи белешки на тим" class="post-image">
+                            <img src="../../images/5-pmmentals.webp" alt="Жена презентира пред табла со лепливи белешки на тим" class="post-image">
                             <div class="post-content">
                                 <p class="post-meta">Demi Wilkinson • 16 Јан 2022 • Студентски живот</p>
                                 <h3 class="post-title">ПМ ментални модели</h3>
@@ -243,11 +243,11 @@
             </div>
         </div>
     </div>
-    <script src="../../main.js"></script>
+    
 </footer>
 <!-- END_FOOTER -->
 
     <!-- Поврзување до главната JS-датотека -->
-    <script src="../../main.js"></script>
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/si/projects/index.html b/si/projects/index.html
index cb045ab..439dc9b 100644
--- a/si/projects/index.html
+++ b/si/projects/index.html
@@ -248,6 +248,6 @@
 <!-- END_FOOTER -->
 
     <!-- Povezava do glavne JS datoteke -->
-    <script src="../../main.js"></script>
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/si/projects/index.html.bak b/si/projects/index.html.bak
index e9e010b..2287192 100644
--- a/si/projects/index.html.bak
+++ b/si/projects/index.html.bak
@@ -164,7 +164,7 @@
                     <!-- Placeholder Project 2 -->
                     <article class="post-card">
                         <a href="testproject/" class="post-link">
-                            <img src="../../images/5-pmmentals.jpg" alt="Ženska predstavlja pred belo tablo z listki ekipi" class="post-image">
+                            <img src="../../images/5-pmmentals.webp" alt="Ženska predstavlja pred belo tablo z listki ekipi" class="post-image">
                             <div class="post-content">
                                 <p class="post-meta">Demi Wilkinson • 16 Jan 2022 • Študentsko življenje</p>
                                 <h3 class="post-title">Mentalni modeli za PM</h3>
@@ -243,11 +243,11 @@
             </div>
         </div>
     </div>
-    <script src="../../main.js"></script>
+    
 </footer>
 <!-- END_FOOTER -->
 
     <!-- Povezava do glavne JS datoteke -->
-    <script src="../../main.js"></script>
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/si/projects/testproject/index.html b/si/projects/testproject/index.html
index 7d26b42..689c2da 100644
--- a/si/projects/testproject/index.html
+++ b/si/projects/testproject/index.html
@@ -201,6 +201,6 @@
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/si/projects/testproject/index.html.bak b/si/projects/testproject/index.html.bak
index 90a073d..bdda140 100644
--- a/si/projects/testproject/index.html.bak
+++ b/si/projects/testproject/index.html.bak
@@ -201,6 +201,6 @@
 </footer>
 <!-- END_FOOTER -->
 
-    <script src="../../main.js"></script>
+    
 </body>
 </html>
\ No newline at end of file