Posodobljeni meniji pri clankih

css/base/_base.css

@@ -10,8 +10,8 @@
 
 /* 1. Temeljni stili */
 
-html, body {
+html {
-    overflow-x: hidden; /* Preprečuje horizontalno drsenje na najvišji ravni */
+    /* To je pomembno, da ostane prazno ali brez overflow-x: hidden */
 }
 
 body {
@@ -19,6 +19,7 @@ body {
     margin: 0;
     background-color: #FFFFFF;
     color: #101828;
+    overflow-x: hidden; /* Preprečuje horizontalno drsenje na telesu strani */
 }
 
 /* NOVO (zamenjaj znotraj _base.css): */

css/pages/_article.css

@@ -1,3 +1,5 @@
+/* css/pages/_article.css */
+
 /* ==========================================================================
    Single Article/Project Page Specific Styles
    ========================================================================== */
@@ -6,29 +8,194 @@
  * Ta datoteka vsebuje stile, ki se uporabljajo izključno na strani s 
  * posameznim člankom ali projektom.
  *
- * 1. Glavna postavitev strani članka
+ * 1. Glavna postavitev strani članka (z levo navigacijo)
- * 2. Glava članka (naslov, podnaslov, datum)
+ * 2. Lepljiva leva navigacija (Scrollspy - Desktop)
- * 3. Glavna slika in slike v vsebini
+ * 3. Lepljiva zgornja vrstica z naslovom in progress barom (Mobile)
- * 4. Telo članka (vsebina, tipografija, citati)
+ * 4. Glava članka (naslov, podnaslov, datum)
- * 5. Noga članka (avtor, deljenje)
+ * 5. Glavna slika in slike v vsebini
- * 6. Poziv k prijavi na novice (CTA)
+ * 6. Telo članka (vsebina, tipografija, citati)
- * 7. Stili za stran s člankom na mobilnih napravah
+ * 7. Noga članka (avtor, deljenje)
+ * 8. Poziv k prijavi na novice (CTA)
+ * 9. Stili za stran s člankom na mobilnih napravah
  */
 
-/* 1. Glavna postavitev strani članka */
+/* ==========================================================================
+   1. Glavna postavitev strani članka
+   ========================================================================== */
 
 .article-page {
     padding-top: 80px;
     background: #FFFFFF;
 }
 
-.article-container {
+.article-layout-container {
-    max-width: 1024px;
+    display: flex;
+    max-width: 1280px;
     margin: 0 auto;
-    padding: 96px 32px;
+    padding: 0 32px;
+    gap: 64px;
+    align-items: flex-start; 
 }
 
-/* 2. Glava članka */
+.article-container {
+    flex-grow: 1;
+    min-width: 0;
+    padding: 96px 0;
+}
+
+/* ==========================================================================
+   2. Lepljiva leva navigacija (Scrollspy - Desktop) - POSODOBLJENO
+   ========================================================================== */
+
+.article-sidebar {
+    width: 288px;
+    flex-shrink: 0;
+    position: sticky;
+    top: 120px;
+    height: calc(100vh - 140px);
+    margin-top: 48px; /* NOVO: Doda začetni odmik od vrha */
+}
+
+.scrollspy-nav {
+    height: 100%;
+    overflow-y: auto;
+}
+
+.scrollspy-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    border-left: 2px solid #EAECF0;
+}
+
+.scrollspy-nav li a {
+    display: block;
+    padding: 12px 24px;
+    text-decoration: none;
+    font-size: 16px;
+    font-weight: 500;
+    color: #667085;
+    border-left: 2px solid transparent;
+    margin-left: -2px;
+    transition: all 0.2s ease-in-out;
+}
+
+.scrollspy-nav li a:hover {
+    color: #101828;
+    background-color: #F9FAFB;
+}
+
+.scrollspy-nav li a.active {
+    color: #2D738C;
+    font-weight: 600;
+    border-left-color: #2D738C;
+    background-color: transparent;
+}
+
+/* ==========================================================================
+   3. Lepljiva zgornja vrstica (Mobile)
+   ========================================================================== */
+.mobile-article-header {
+    display: none;
+    position: sticky;
+    top: 60px;
+    background-color: #FFFFFF;
+    z-index: 900;
+    border-bottom: 1px solid #EAECF0;
+    padding: 12px 24px;
+    cursor: pointer;
+    justify-content: space-between;
+    align-items: center;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.mobile-article-header .fa-chevron-down {
+    transition: transform 0.3s ease-in-out;
+}
+
+.mobile-article-header.open .fa-chevron-down {
+    transform: rotate(180deg);
+}
+
+#mobile-article-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #101828;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+    padding-right: 16px;
+}
+
+.progress-bar-container {
+    width: 100%;
+    height: 3px;
+    background-color: #EAECF0;
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+}
+
+.progress-bar {
+    width: 0%;
+    height: 100%;
+    background-color: #2D738C;
+    transition: width 0.1s linear;
+}
+
+.mobile-scrollspy-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background: #FFFFFF;
+    border-top: 1px solid #EAECF0;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    visibility: hidden;
+    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;
+}
+
+.mobile-scrollspy-dropdown.open {
+    max-height: 50vh;
+    opacity: 1;
+    visibility: visible;
+    overflow-y: auto;
+}
+
+.mobile-scrollspy-dropdown ul {
+    list-style: none;
+    padding: 8px;
+    margin: 0;
+}
+
+.mobile-scrollspy-dropdown a {
+    display: block;
+    padding: 12px 16px;
+    text-decoration: none;
+    color: #344054;
+    font-size: 16px;
+    font-weight: 500;
+    border-radius: 6px;
+    white-space: normal;
+}
+
+.mobile-scrollspy-dropdown a:hover,
+.mobile-scrollspy-dropdown a.active {
+    background-color: #F9FAFB;
+    color: #2D738C;
+}
+
+
+/* ==========================================================================
+   4. Glava članka
+   ========================================================================== */
 
 .article-header {
     text-align: center;
@@ -61,7 +228,9 @@
     margin-right: auto;
 }
 
-/* 3. Glavna slika in slike v vsebini */
+/* ==========================================================================
+   5. Glavna slika in slike v vsebini
+   ========================================================================== */
 
 .article-main-image {
     margin: 0 0 64px 0;
@@ -95,7 +264,9 @@
     text-align: center;
 }
 
-/* 4. Telo članka */
+/* ==========================================================================
+   6. Telo članka
+   ========================================================================== */
 
 .article-body {
     max-width: 720px;
@@ -118,6 +289,7 @@
     line-height: 38px;
     color: #101828;
     margin: 16px 0;
+    scroll-margin-top: 120px;
 }
 
 .article-body ol {
@@ -127,7 +299,6 @@
     gap: 12px;
 }
 
-/* Stil za citat */
 .article-quote {
     margin: 16px 0;
     padding-left: 20px;
@@ -157,7 +328,9 @@
     background: transparent;
 }
 
-/* 5. Noga članka */
+/* ==========================================================================
+   7. Noga članka
+   ========================================================================== */
 
 .article-footer {
     max-width: 720px;
@@ -209,7 +382,9 @@
     gap: 12px;
 }
 
-/* 6. Poziv k prijavi na novice (CTA) */
+/* ==========================================================================
+   8. Poziv k prijavi na novice (CTA)
+   ========================================================================== */
 
 .newsletter-cta {
     padding: 0 32px 96px 32px;
@@ -276,15 +451,28 @@
 
 
 /* ==========================================================================
-   Mobile Article Page Styles
+   9. Mobile Article Page Styles
    ========================================================================== */
 
 @media (max-width: 768px) {
-
     .article-page {
         padding-top: 60px;
     }
 
+    .article-layout-container {
+        flex-direction: column;
+        padding: 0;
+        gap: 0;
+    }
+
+    .article-sidebar {
+        display: none;
+    }
+
+    .mobile-article-header {
+        display: flex;
+    }
+
     .article-container {
         padding: 48px 24px;
     }
@@ -327,6 +515,7 @@
     .article-body h2 {
         font-size: 24px;
         line-height: 32px;
+        scroll-margin-top: 120px;
     }
 
     .article-quote p {

en/projects/meet-student-slovenia-2024/index.html

@@ -19,14 +19,11 @@
 <body>
 
     <!-- START_HEADER -->
-<header class="dropdown-header-navigation">
+    <header class="dropdown-header-navigation">
         <div class="container">
-        <!-- Logotip je zdaj samostojen element na levi strani -->
             <a href="../../../en/" class="logo-link">
                 <img src="../../../images/1-logo.png" alt="Macedonian Student Organisation in Slovenia Logo" class="logo-img">
             </a>
-        
-        <!-- Nov ovoj za vse elemente na desni strani -->
             <div class="header-right-wrapper">
                 <nav>
                     <ul class="navigation desktop-nav">
@@ -89,17 +86,14 @@
                     </div>
                 </div>
             </div>
-
-        <!-- Ikona za mobilni meni ostaja ločena za lažje upravljanje -->
             <div class="mobile-menu-icon">
                 <i class="fas fa-bars"></i>
                 <i class="fas fa-times"></i>
             </div>
         </div>
-</header>
+    </header>
 
-<!-- Panel za mobilno navigacijo (struktura ostaja enaka) -->
+    <div class="mobile-nav-panel">
-<div class="mobile-nav-panel">
         <nav>
             <ul class="navigation mobile-nav">
                 <li class="menu-item menu-item-has-children">
@@ -155,10 +149,9 @@
                 </button>
             </div>
         </div>
-</div>
+    </div>
 
-<!-- Modalno okno za izbiro jezika (ostaja enako) -->
+    <div id="language-modal-overlay">
-<div id="language-modal-overlay">
         <div class="language-modal-content">
             <div class="language-modal-header">
                 <h3>Select Language</h3>
@@ -170,10 +163,40 @@
                 <a href="#" data-lang="mk">Македонски (MK)</a>
             </div>
         </div>
-</div>
+    </div>
-<!-- END_HEADER -->
+    <!-- END_HEADER -->
 
     <main class="article-page">
+        <!-- Sticky Mobile Header -->
+        <div class="mobile-article-header">
+            <span id="mobile-article-title">Meet Student Slovenia 2024</span>
+            <i class="fas fa-chevron-down"></i>
+            <div class="progress-bar-container">
+                <div class="progress-bar"></div>
+            </div>
+             <!-- Dropdown Menu for Mobile -->
+            <div class="mobile-scrollspy-dropdown">
+                <ul id="mobile-scrollspy-links">
+                    <!-- Links will be dynamically inserted here by JavaScript -->
+                </ul>
+            </div>
+        </div>
+
+        <div class="article-layout-container">
+            <!-- Desktop Scrollspy Sidebar -->
+            <aside class="article-sidebar">
+                <nav class="scrollspy-nav">
+                    <ul>
+                        <li><a href="#coffee-chat" class="active">"Coffee chat" with future colleagues</a></li>
+                        <li><a href="#what-remained">What remained behind us</a></li>
+                        <li><a href="#the-support">The support that made a difference</a></li>
+                        <li><a href="#why-special">Why was it special?</a></li>
+                        <li><a href="#livestream">For those not physically present</a></li>
+                        <li><a href="#see-you">See you in Slovenia!</a></li>
+                    </ul>
+                </nav>
+            </aside>
+            
             <article class="article-container">
                 <header class="article-header">
                     <p class="article-publish-date">Published on September 16, 2024</p>
@@ -188,7 +211,7 @@
                 <div class="article-body">
                     <p>Following the success in 2023, "Meet Student Slovenia" returned this year with even greater energy. On September 16, 2024, at the NLB Gallery in Skopje, we held the second edition of the event, which has become a true tradition. The interest was enormous – we had twice as many applications as the capacity of the venue. The atmosphere was full of excitement, questions, and a desire for new beginnings.</p>
                     
-                <h2>"Coffee chat" with future colleagues, but on a panel discussion</h2>
+                    <h2 id="coffee-chat">"Coffee chat" with future colleagues, but on a panel discussion</h2>
                     <p>Our goal was never to create "dry presentations." Instead, we organized a panel – a real conversation with four students who are already living the Slovenian student life. Marija Koštrevska from the University of Ljubljana, Vasil Hanџiski from the University of Maribor, Sofija Matovska from the University of Nova Gorica, and Igor Arsov from the University of Primorska spoke about everything: the first days away from home, how to find accommodation, what student "boni" (subsidized meals) are, and what it's like to build a new circle of friends. Everyone shared something of their own, and the audience asked questions and participated – just like a coffee chat.</p>
                     
                     <figure class="article-inline-image">
@@ -201,7 +224,7 @@
                         <figcaption>Marija Koštrevska (in the upper picture) and Sofija Matovska (in the lower picture) are recounting their student experiences in Slovenia.</figcaption>
                     </figure>
 
-                <h2>What remained behind us</h2>
+                    <h2 id="what-remained">What remained behind us</h2>
                     <p>This evening was not just an exchange of information. It was a moment when future students understood that they are not alone in their worries and fears. Every question received an answer from experience, every dilemma was resolved with a real-life example. Many left encouraged, with new friends, and with the feeling that Slovenia is no longer so distant and unknown.</p>
 
                     <figure class="article-inline-image">
@@ -222,7 +245,7 @@
                         <figcaption>The bottom picture shows representatives of the Embassy, the Management Board of NLB Bank, and the Management Board of MSOS.</figcaption>
                     </figure>
 
-                <h2>The support that made a difference</h2>
+                    <h2 id="the-support">The support that made a difference</h2>
                     <p>"Meet Student Slovenia 2024" would not have looked this way without the help of our partners and friends. We extend great gratitude to the Embassy of the Republic of Slovenia in North Macedonia, NLB Bank Skopje as the patron and main sponsor of the entire event, and Capital Financial Center, who with their support made it possible for the event to be realized at this high level.</p>
 
                     <figure class="article-inline-image">
@@ -243,7 +266,7 @@
                         <figcaption>Photograph of the welcome speech by H.E. Ambassador Mr. Gregor Presker.</figcaption>
                     </figure>
 
-                <h2>Why was it special?</h2>
+                    <h2 id="why-special">Why was it special?</h2>
                     <p>Because this event was not just another presentation. It was a hand extended to future students – a message that they are not alone, that a community is already waiting for them. Some left with new friends, others with concrete answers to questions that had bothered them for months. But everyone left with the same feeling: that Slovenia is no longer an unknown place, but a new home where they will be part of something bigger.</p>
                     
                     <figure class="article-inline-image">
@@ -251,7 +274,7 @@
                         <figcaption>Moments when the participants ask questions to the panelists!😊✨</figcaption>
                     </figure>
 
-                <h2>For those who were not physically present with us</h2>
+                    <h2 id="livestream">For those not physically present with us</h2>
                     <p>We know that not everyone managed to attend the NLB Gallery, but we therefore provided a high-quality livestream. The event was broadcast live and is now available for re-watching. If you want to feel the atmosphere and hear the honest stories from the panel, you can watch the entire event at this link <a href="#">Watch the video here.</a></p>
                     
                     <figure class="article-inline-image">
@@ -259,7 +282,7 @@
                         <figcaption>Photograph of the event poster!</figcaption>
                     </figure>
 
-                <h2>See you in Slovenia!</h2>
+                    <h2 id="see-you">See you in Slovenia!</h2>
                     <p>"Meet Student Slovenia" is not just an event. It is a place where future students take their first step – with support, with first-hand advice, and with the feeling that they are not alone. And this year we managed to create that feeling, and that is the greatest victory.</p>
                     <p>See you again next year!</p>
                     <p>P.S. Every year after a successfully organized event, the MSOS team traditionally heads to the nearest tavern, for an evening full of socializing, singing, and emotions! 😊 That's why it's worth being part of our team! Join us.</p>
@@ -284,6 +307,7 @@
                     </div>
                 </footer>
             </article>
+        </div>
 
         <section class="newsletter-cta">
             <div class="container">
@@ -303,7 +327,7 @@
     </main>
 
     <!-- START_FOOTER -->
-<footer>
+    <footer>
         <div class="footer-container">
             <div class="footer-main">
                 <div class="footer-info">
@@ -354,9 +378,8 @@
             </div>
         </div>
         <script src="../../../main.js"></script>
-</footer>
+    </footer>
-<!-- END_FOOTER -->
+    <!-- END_FOOTER -->
 
-    <script src="../../../main.js"></script>
 </body>
 </html>

main.js

@@ -250,7 +250,111 @@ document.addEventListener('DOMContentLoaded', function() {
     
     /**
      * ===================================================================
-     * 5. ZAGON FUNKCIJ PO NALOŽITVI STRANI
+     * 5. SCROLLSPY IN PROGRESS BAR ZA STRANI ČLANKOV (POSODOBLJENO)
+     * ===================================================================
+     */
+    try {
+        const articlePage = document.querySelector('.article-page');
+        if (articlePage) {
+            const scrollspyNav = document.querySelector('.scrollspy-nav');
+            const mobileHeader = document.querySelector('.mobile-article-header');
+            const mobileTitle = document.getElementById('mobile-article-title');
+            const mobileDropdown = document.querySelector('.mobile-scrollspy-dropdown');
+            const mobileLinksContainer = document.getElementById('mobile-scrollspy-links');
+            const progressBar = document.querySelector('.progress-bar');
+            
+            const headings = Array.from(articlePage.querySelectorAll('.article-body h2'));
+            const desktopNavLinks = scrollspyNav ? Array.from(scrollspyNav.querySelectorAll('a')) : [];
+
+            // --- Dinamično ustvarjanje mobilnega spustnega seznama ---
+            if (headings.length > 0 && mobileLinksContainer) {
+                headings.forEach(heading => {
+                    const listItem = document.createElement('li');
+                    const link = document.createElement('a');
+                    link.href = `#${heading.id}`;
+                    link.textContent = heading.textContent;
+                    listItem.appendChild(link);
+                    mobileLinksContainer.appendChild(listItem);
+                });
+            }
+            
+            // --- Logika za odpiranje/zapiranje mobilnega spustnega seznama ---
+            if (mobileHeader && mobileDropdown) {
+                mobileHeader.addEventListener('click', (e) => {
+                    // Preprečimo, da se meni zapre, če kliknemo na povezavo znotraj njega
+                    if (!e.target.closest('a')) {
+                         mobileHeader.classList.toggle('open');
+                         mobileDropdown.classList.toggle('open');
+                    }
+                });
+
+                // Dodamo dogodek za zapiranje menija ob kliku na povezavo
+                mobileDropdown.querySelectorAll('a').forEach(link => {
+                    link.addEventListener('click', () => {
+                        mobileHeader.classList.remove('open');
+                        mobileDropdown.classList.remove('open');
+                    });
+                });
+            }
+
+            // --- Logika za Progress Bar ---
+            function updateProgressBar() {
+                if (!progressBar) return;
+                const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
+                const scrollTop = window.scrollY;
+                
+                if (scrollableHeight > 0) {
+                    const progress = (scrollTop / scrollableHeight) * 100;
+                    progressBar.style.width = `${progress}%`;
+                } else {
+                    progressBar.style.width = '0%';
+                }
+            }
+
+            // --- Logika za Scrollspy ---
+            if (headings.length > 0) {
+                const observer = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        const id = entry.target.getAttribute('id');
+                        const desktopNavLink = desktopNavLinks.find(link => link.getAttribute('href') === `#${id}`);
+                        const mobileNavLink = mobileLinksContainer ? mobileLinksContainer.querySelector(`a[href="#${id}"]`) : null;
+
+                        if (entry.isIntersecting) {
+                            // Posodobi namizno navigacijo
+                            if (desktopNavLink) {
+                                desktopNavLinks.forEach(link => link.classList.remove('active'));
+                                desktopNavLink.classList.add('active');
+                            }
+                            // Posodobi mobilni naslov in aktivno povezavo v spustnem seznamu
+                            if (mobileTitle) {
+                                mobileTitle.textContent = entry.target.textContent;
+                            }
+                            if (mobileNavLink) {
+                                mobileLinksContainer.querySelectorAll('a').forEach(link => link.classList.remove('active'));
+                                mobileNavLink.classList.add('active');
+                            }
+                        }
+                    });
+                }, {
+                    rootMargin: "-100px 0px -50% 0px" // Sproži, ko je naslov v zgornjem delu zaslona
+                });
+
+                headings.forEach(heading => {
+                    observer.observe(heading);
+                });
+            }
+
+            // Dodaj poslušalca dogodkov za vrstico napredka
+            window.addEventListener('scroll', updateProgressBar);
+            updateProgressBar(); // Klic ob nalaganju strani
+        }
+    } catch (error) {
+        console.error('Error in Article Scrollspy/Progress Bar setup:', error);
+    }
+
+    /**
+     * ===================================================================
+     * 6. ZAGON FUNKCIJ PO NALOŽITVI STRANI
      * ===================================================================
      */
     highlightActiveLink();