msos/templates/en/header.html

<!-- START_HEADER -->
<header class="dropdown-header-navigation">
    <div class="container">
        <div class="header-content">
            <a href="{{ROOT_PREFIX}}en/" class="logo-link">
                <img src="{{ROOT_PREFIX}}images/1-logo.png" alt="Macedonian Student Organisation in Slovenia Logo" class="logo-img">
            </a>
            <!-- Desktop Navigation -->
            <nav>
                <ul class="navigation desktop-nav">
                    <li class="menu-item menu-item-has-children">
                        <a href="#">Who We Are</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Timeline & Milestones</a></li>
                            <li><a href="#">Our team, mission, vision & core values</a></li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-has-children">
                        <a href="#">What We Do</a>
                        <ul class="dropdown-menu">
                            <li><a href="{{ROOT_PREFIX}}en/projects/">Event & Projects</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Gallery</a></li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-has-children">
                        <a href="#">Get Involved</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Become a member</a></li>
                            <li><a href="#">Support MSOS</a></li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-has-children">
                        <a href="#">For Students</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Student Welcome Guide</a></li>
                            <li><a href="#">Mentorship Programme</a></li>
                            <li><a href="#">FAQs</a></li>
                            <li><a href="#">Get to know Slovenia</a></li>
                            <li><a href="#">Get to know North Macedonia</a></li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-has-children">
                        <a href="#">News</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Announcements</a></li>
                            <li><a href="#">Open calls</a></li>
                            <li><a href="#">Press releases</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>

        <!-- Desktop Buttons -->
        <div class="navigation-actions">
            <button class="btn btn-secondary">Become a member</button>
            <button class="btn btn-primary">Donate</button>
            <!-- Language Switcher -->
            <div class="language-selector">
                <div class="current-lang">
                    <i class="fas fa-globe"></i>
                    <span id="current-lang-code">EN</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="lang-dropdown">
                    <a href="#" data-lang="si">Slovenščina (SI)</a>
                    <a href="#" data-lang="en">English (EN)</a>
                    <a href="#" data-lang="mk">Македонски (MK)</a>
                </div>
            </div>
        </div>

        <!-- Mobile Menu Icon (Hamburger/X) -->
        <div class="mobile-menu-icon">
            <i class="fas fa-bars"></i>
            <i class="fas fa-times"></i>
        </div>
    </div>
</header>

<!-- Mobile Navigation Panel (ostane znotraj markerjev, a za <header>) -->
<div class="mobile-nav-panel">
    <nav>
        <ul class="navigation mobile-nav">
            <li class="menu-item menu-item-has-children">
                <a href="#">Who We Are</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Timeline & Milestones</a></li>
                    <li><a href="#">Our team, mission, vision & core values</a></li>
                </ul>
            </li>
            <li class="menu-item menu-item-has-children">
                <a href="#">What We Do</a>
                <ul class="dropdown-menu">
                    <li><a href="{{ROOT_PREFIX}}en/projects/">Event & Projects</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Gallery</a></li>
                </ul>
            </li>
            <li class="menu-item menu-item-has-children">
                <a href="#">Get Involved</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Become a member</a></li>
                    <li><a href="#">Support MSOS</a></li>
                </ul>
            </li>
            <li class="menu-item menu-item-has-children">
                <a href="#">For Students</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Student Welcome Guide</a></li>
                    <li><a href="#">Mentorship Programme</a></li>
                    <li><a href="#">FAQs</a></li>
                    <li><a href="#">Get to know Slovenia</a></li>
                    <li><a href="#">Get to know North Macedonia</a></li>
                </ul>
            </li>
            <li class="menu-item menu-item-has-children">
                <a href="#">News</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Announcements</a></li>
                    <li><a href="#">Open calls</a></li>
                    <li><a href="#">Press releases</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <div class="navigation-actions">
        <button class="btn btn-secondary">Become a member</button>
        <button class="btn btn-primary">Donate</button>
        <!-- Language Switcher (for mobile) -->
        <div class="language-selector">
            <div class="current-lang">
                <i class="fas fa-globe"></i>
                <span id="current-lang-code-mobile">EN</span>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="lang-dropdown">
                <a href="#" data-lang="si">Slovenščina (SI)</a>
                <a href="#" data-lang="en">English (EN)</a>
                <a href="#" data-lang="mk">Македонски (MK)</a>
            </div>
        </div>
    </div>
</div>
<!-- END_HEADER -->