<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        /* General Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: rgb(250, 255, 228);
        }

        /* Navbar */
        .navbar {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #fff;
            padding: 0.5rem 2rem;
            margin-bottom: 20px; /* Space between header and content */
            width: 100%; /* Extend navbar to full width */
            box-sizing: border-box; /* Include padding in the width calculation */
            position: absolute; /* So z-index can actually take effect */
            z-index: 10000;     /* One more than 9999 (the dropdown) */
        }

        /* Top Section */
        .top-section {
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            gap: 3rem; /* Add spacing between elements */
            width: 100%;
        }

        /* Logo */
        .logo img {
            height: 50px;
        }

        /* Search Bar */
        .search-container {
            display: flex;
            align-items: center;
            background-color: #F8F8F8;
            border-radius: 4px;
            padding: 0.5rem 1rem;
            width: 300px;
        }

        .search-container i {
            color: rgb(95, 95, 95);
            margin-right: 0.5rem;
        }

        .search-container input {
            border: none;
            background: transparent;
            outline: none;
            color: #333;
            font-size: 0.9rem;
            width: 100%;
        }

        .search-container input::placeholder {
            color: #AFAEAE;
        }

        /* Right Icons */
        .icon-container {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .icon-container i {
            font-size: 1.5rem;
            color: rgb(206, 206, 206);
            cursor: pointer;
            transition: color 0.3s;
        }

        .icon-container i:hover {
            color: rgb(72, 209, 255);
        }

        /* Bottom Section (Buttons) */
        .bottom-section {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1.5rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .dropdown {
            position: relative;
            margin-top: 6px; /* Adjust this value as needed */
        }

        .dropdown-button {
            position: relative;
            background: none;
            border: none;
            font-size: 1rem;
            color: #555;
            cursor: pointer;
            transition: color 0.3s;
            padding-bottom: 10px; /* Increase clickable area downward */
            font-weight: 400;
            padding-top: 2.5px;
        }

        .dropdown-button:hover {
            color: rgb(132, 224, 255);
        }

        .dropdown-content {
            display: none;
            position: absolute;
            top: 2rem;
            left: 0;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(118, 250, 255, 0);
            border-radius: 1px;
            width: 80px;
            text-align: center;
            z-index: 10;
        }

        .dropdown-button::after {
            content: '';
            position: absolute;
            top: 100%; /* Directly below the button */
            left: 0;
            width: 100%;
            height: 10px; /* Invisible area extends downward */
            pointer-events: auto; /* Allow interactions */
            background: transparent;
        }

        .dropdown-content a {
            display: block;
            padding: 0.5rem;
            font-size: 0.85rem;
            text-decoration: none;
            color: rgb(85, 85, 85);
        }

        .dropdown-content a:hover {
            background-color: #f2f2f2;
        }

        .dropdown:hover .dropdown-content,
        .dropdown-content:hover {
            display: block;
        }

        .about-button {
            background: none;
            border: none;
            font-size: 1rem; /* Reduced font size */
            color: #555;
            cursor: pointer;
            text-decoration: none;
            transition: color 0.3s;
            font-weight: 400;
        }

        .about-button:hover {
            color: #84e0ff;
        }

        /* Toggle Switch */
        .toggle-container {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1rem;
            font-weight: 400;
            color: #555;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 20px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            border-radius: 20px;
            transition: 0.3s;
        }

        .slider:before {
            content: "";
            position: absolute;
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            border-radius: 50%;
            transition: 0.3s;
        }

        input:checked + .slider {
            background-color: #BBE5FF;
        }

        input:checked + .slider:before {
            transform: translateX(20px);
        }

        /* Mobile Menu Icon hidden by default (for desktop) */
        .mobile-menu-icon {
            display: none !important;
            font-size: 2.8rem;
            color: rgb(202, 202, 202);
            cursor: pointer;
            transition: color 0.3s;
            position: relative;
            left: -25px; /* Move to the left */
        }



        .dropdown-arrow {
            float: right; /* Pushes the icon to the right side of the button */
            color: rgb(100, 100, 100); /* Default color - you can change it later */
            font-size: 3rem;
            margin-right: 20px; /* Adds space between the icon and the right edge */
            transition: color 0.3s ease; /* Smooth color transition */
        }

        .mobile-dropdown-container button:hover .dropdown-arrow {
            color: rgb(72, 209, 255); /* Change color on hover */
        }

        @media screen and (max-width: 400px) {
            .logo img {
                height: 44px;
            }
            .top-section {
                padding: 0 1rem; /* Reduce side padding */
            }
            /* Optional: Add if you need more space */
            .mobile-menu-icon {
                margin-left: 75px;
            }
        }

        /* Media query for smaller screens */
        @media screen and (max-width: 730px) {
            .search-container,
            .icon-container,
            .bottom-section {
                display: none !important; /* Hide these sections on mobile */
            }
            .top-section {
                justify-content: space-between;
                gap: 0;
                padding: 0 2rem;
            }
            .mobile-menu-icon {
                display: block !important; /* Show the hamburger on mobile */
            }
            body {
                padding-top: 75px !important; /* Forces space below navbar */
            }
            .navbar {
                position: fixed !important;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 10000; /* Keep it above the dropdown */
            }
        }

        /* MOBILE DROPDOWN CONTAINER */
        .mobile-dropdown-container {
            /* Off-screen container behind the navbar */
            position: fixed;
            top: 0px; /* Leaves the navbar (logo & icon) visible at the top */
            left: 0;
            width: 100vw;
            height: calc(100vh - 30px);
            background: #fff;
            /* Start hidden: push it up by 100% of its own height + disable pointer events */
            transform: translateY(-100%);
            pointer-events: none;
            transition: transform 0.3s ease-out;
            z-index: 9999;
            overflow-y: auto; /* Allow scroll if menu is tall */
            background-color: #BBE5FF;
            font-family: 'Fredoka', sans-serif;
        }
        .mobile-dropdown-container.active {
            /* Slide down: now pointer events are enabled & transform is 0 */
            transform: translateY(0);
            pointer-events: auto;
            top: 62px; /* Adjust to match your navbar height */
        }
        /* Mobile menu items - full screen style */
        .mobile-dropdown-container button {
            display: block;
            width: 100%;
            padding: 1.5rem;
            border: none;
            background: transparent !important;
            text-align: left; /* Align text to the left */
            padding-left: 20px; /* Adds some space from the left edge */
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
            cursor: pointer;
            outline: none;
        }
        .mobile-dropdown-container button:hover {
            background-color: #f1f1f1;
        }
        /* Submenu styling (sliding from right to left) */
        .mobile-submenu {
            position: fixed; /* or absolute if you prefer */
            top: 67px;       /* same top offset as .mobile-dropdown-container.active */
            right: 0;
            width: 100vw;
            height: calc(100vh - 70px);
            background: #fff;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0);
            transform: translateX(100%); /* start off-screen to the right */
            transition: transform 0.3s ease-out;
            z-index: 10000; /* on top of mobile dropdown container */
            pointer-events: none; /* disabled by default */
            flex-direction: column; /* Stack buttons vertically */
    align-items: flex-start; /* Align buttons to the left */
    padding-top: 0px; /* Add spacing from the top */
    display: flex;
    background-color: #BBE5FF;
    font-family: 'Fredoka', sans-serif;
        }
        .mobile-submenu.active {
            transform: translateX(0);
            pointer-events: auto; /* enable pointer events when active */
        }
        /* Submenu items */
        .mobile-submenu button {
            width: 100%; /* Make buttons take full width */
    text-align: left; /* Align text to the left */
    padding: 1rem 20px; /* Add padding for better spacing */
    border: none;
    background: none; /* Ensure no background flash */
    font-size: 30px;
    font-weight: normal;
    cursor: pointer;
        }
        /* Header in submenu with a "Back" button */
        .submenu-header {
    display: flex;
    align-items: center; /* Keeps items aligned vertically */
    justify-content: space-between; /* Spreads elements apart */
    width: 100%;
    padding: 1rem;
    position: relative;
}
        .submenu-header .back-arrow {
            font-size: 1.5rem;
            margin-right: 1rem;
            cursor: pointer;
        }
        .submenu-header span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.3rem;
    font-weight: bold;
}

    </style>
</head>
<body>
    <!-- Navbar -->
    <div class="navbar">
        <!-- Top Section: Logo, Search Bar, Icons -->
        <div class="top-section">
            <!-- Logo -->
            <div class="logo">
                <img src="https://norskly.com/norsklylogo.png" alt="Norskly Logo">
            </div>
            <!-- Search Bar -->
            <div class="search-container">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input type="text" placeholder="Search...">
            </div>
            <!-- Mobile Menu Icon (Hamburger) -->
            <i class="fa-solid fa-bars mobile-menu-icon"></i>
            <!-- User and Logout Icons -->
            <div class="icon-container">
                <i class="fa-solid fa-user" title="Account"></i>
                <i class="fa-solid fa-arrow-right" title="Logout"></i>
            </div>
        </div>

        <!-- Bottom Section: Desktop Dropdowns, About, and Toggle (hidden on mobile) -->
        <div class="bottom-section">
            <!-- Sort By Dropdown -->
            <div class="dropdown">
                <button class="dropdown-button">Sort by <i class="fa-solid fa-chevron-down"></i></button>
                <div class="dropdown-content">
                    <a href="#">New</a>
                    <a href="#">Old</a>
                </div>
            </div>
            <!-- Levels Dropdown -->
            <div class="dropdown">
                <button class="dropdown-button">Levels <i class="fa-solid fa-chevron-down"></i></button>
                <div class="dropdown-content">
                    <a href="#" onclick="loadTexts && loadTexts('L1')">Level 1</a>
                    <a href="#" onclick="loadTexts && loadTexts('L2')">Level 2</a>
                    <a href="#" onclick="loadTexts && loadTexts('L3')">Level 3</a>
                    <a href="#" onclick="loadTexts && loadTexts('L4')">Level 4</a>
                    <a href="#" onclick="loadTexts && loadTexts('L5')">Level 5</a>
                </div>
            </div>
            <!-- About Button -->
            <a href="about.php" class="about-button">About</a>
            <!-- Toggle Switch -->
            <div class="toggle-container">
                <span>Hide read</span>
                <label class="toggle-switch">
                    <input type="checkbox">
                    <span class="slider"></span>
                </label>
            </div>
        </div>
    </div>

    <!-- Mobile Dropdown (Hidden on desktop, slides down on mobile) -->
    <div class="mobile-dropdown-container">
        <!-- "Levels" button in the mobile dropdown -->
        <button id="mobileLevelsBtn">
            Levels
            <i class="fa-solid fa-arrow-right dropdown-arrow"></i>
        </button>
        <!-- You can add other mobile menu buttons here as well -->
    </div>

    <!-- Submenu that slides in from the right -->
    <div class="mobile-submenu" id="levelsSubmenu">
        <div class="submenu-header">
            <!-- "Back" arrow to close/hide submenu -->
            <i class="fa-solid fa-arrow-left back-arrow" id="closeSubmenu"></i>
            <span>Levels</span>
        </div>
        <!-- Submenu Buttons (Level 1 to Level 5) -->
        <button onclick="alert('Level 1')">Level 1</button>
        <button onclick="alert('Level 2')">Level 2</button>
        <button onclick="alert('Level 3')">Level 3</button>
        <button onclick="alert('Level 4')">Level 4</button>
        <button onclick="alert('Level 5')">Level 5</button>
    </div>

    <!-- Scripts -->
    <script>
        const mobileMenuIcon = document.querySelector('.mobile-menu-icon');
        const mobileDropdown = document.querySelector('.mobile-dropdown-container');
        const mobileLevelsBtn = document.getElementById('mobileLevelsBtn');
        const levelsSubmenu = document.getElementById('levelsSubmenu');
        const closeSubmenu = document.getElementById('closeSubmenu');

        // Toggle mobile dropdown (main menu)
        mobileMenuIcon.addEventListener('click', (e) => {
            e.stopPropagation();
            mobileDropdown.classList.toggle('active'); 
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.mobile-menu-icon') 
                && !e.target.closest('.mobile-dropdown-container') 
                && !e.target.closest('#levelsSubmenu')) 
            {
                mobileDropdown.classList.remove('active');
                levelsSubmenu.classList.remove('active');
            }
        });

        // Close mobile menu on resize above 730px
        window.addEventListener('resize', () => {
            if (window.innerWidth > 730) {
                mobileDropdown.classList.remove('active');
                levelsSubmenu.classList.remove('active');
            }
        });

        // Show the Levels submenu when user clicks the Levels button
        ['click', 'touchstart'].forEach(eventType => {
    mobileLevelsBtn.addEventListener(eventType, (e) => {
        e.stopPropagation();
        levelsSubmenu.classList.add('active');
    });
});

        // "Back" arrow closes the submenu
        closeSubmenu.addEventListener('click', () => {
            levelsSubmenu.classList.remove('active');
        });
    </script>
</body>
</html>
