MediaWiki:Gadget-Navbar.js: Difference between revisions

(function () {
    var style =
        /* ================= Base Navigation Styles ================= */
        '.czn-navbar{position:absolute;top:0;left:0;width:100%;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:9999;border-bottom:1px solid rgba(255,255,255,0.05)}' +

        /* Three-section Flex Layout */
        '.czn-nav-left,.czn-nav-right{flex:1;display:flex;align-items:center}' +
        '.czn-nav-left{justify-content:flex-start;gap:0}' +
        '.czn-nav-center{display:flex;justify-content:center}' +
        '.czn-nav-right{justify-content:flex-end;gap:20px}' +

        /* ================= Left LOGO Area ================= */
        '.czn-logo-group{display:flex;align-items:center}' +
        '.czn-logo{height:40px;width:auto;object-fit:contain;display:block}' +

        /* ================= Right Search Box ================= */
        '.czn-search-box{position:relative}' +
        '.czn-search-box input{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;padding:8px 15px;border-radius:20px;width:200px;outline:none;transition:all 0.3s;font-size:14px}' +
        '.czn-search-box input::placeholder{color:rgba(255,255,255,0.4)}' +
        '.czn-search-box input:focus{border-color:#ff540c;background:rgba(255,255,255,0.15)}' +
        '.czn-search-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:#ff540c;color:#fff;border:none;padding:5px 12px;border-radius:16px;cursor:pointer;font-size:12px;font-weight:bold;transition:all 0.3s}' +
        '.czn-search-btn:hover{background:#ff6a2a}' +

        /* ================= Desktop Menu Styles ================= */
        '.czn-nav-menu{display:flex;list-style:none;gap:35px;margin:0;padding:0;height:100%;align-items:center}' +
        '.czn-nav-menu li{position:relative;list-style:none}' +
        '.czn-nav-menu>li>a{text-decoration:none!important;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 0;position:relative;transition:all 0.3s}' +

        /* Menu Item Text */
        '.czn-nav-menu li a .czn-text{color:#ffffff;font-size:15px;font-weight:600;letter-spacing:1px;text-transform:uppercase;transition:color 0.3s}' +

        /* Hover & Active States */
        '.czn-nav-menu>li:hover>a .czn-text,.czn-nav-menu>li.czn-active>a .czn-text{color:#ff540c}' +

        /* ================= Dropdown Menus ================= */
        '.czn-dropdown-2,.czn-dropdown-3{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(15px);background:rgba(0,0,0,0.9);border-radius:8px;min-width:160px;padding:10px 0;opacity:0;visibility:hidden;transition:all 0.3s ease;box-shadow:0 10px 30px rgba(0,0,0,0.5);list-style:none;margin:0}' +
        '.czn-dropdown-3{top:0;left:100%;transform:translateX(15px) translateY(0)}' +

        /* Show on Hover */
        '.czn-nav-menu li:hover>.czn-dropdown-2{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}' +
        '.czn-dropdown-2 li:hover>.czn-dropdown-3{opacity:1;visibility:visible;transform:translateX(0) translateY(0)}' +

        /* Dropdown Item Style */
        '.czn-dropdown-2 li a,.czn-dropdown-3 li a{padding:12px 20px;text-align:left;display:block;text-decoration:none!important}' +
        '.czn-dropdown-2 li a .czn-text,.czn-dropdown-3 li a .czn-text{font-size:13px;color:#fff;white-space:nowrap}' +
        '.czn-dropdown-2 li:hover>a .czn-text,.czn-dropdown-3 li:hover>a .czn-text{color:#ff540c}' +

        /* ================= Mobile Menu Toggle ================= */
        '.czn-menu-toggle{display:none;color:#fff;font-size:28px;cursor:pointer;z-index:10001;position:relative;background:none;border:none;padding:0;line-height:1}' +

        /* ================= Responsive Layout ================= */
        '@media(max-width:1024px){' +
            '.czn-navbar{padding:0 20px}' +
            '.czn-logo-group{display:none}' +
            '.czn-search-box{display:none}' +
            '.czn-menu-toggle{display:block}' +
            '.czn-nav-menu{position:fixed;top:0;left:-100%;width:260px;height:100vh;background:rgba(15,15,15,0.98);flex-direction:column;gap:0;padding-top:80px;transition:left 0.4s ease-in-out;overflow-y:auto;border-right:1px solid rgba(255,255,255,0.1);z-index:10000;margin:0}' +
            '.czn-nav-menu.czn-active{left:0}' +
            '.czn-nav-menu li{width:100%}' +
            '.czn-nav-menu>li>a{padding:15px 20px;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,0.05)}' +
            '.czn-dropdown-2,.czn-dropdown-3{position:static;transform:none!important;opacity:1;visibility:visible;box-shadow:none;background:transparent;padding:0;width:100%}' +
            '.czn-dropdown-2 li a{padding-left:40px;background:rgba(255,255,255,0.02)}' +
            '.czn-dropdown-3{display:none;background:rgba(0,0,0,0.3)}' +
            '.czn-dropdown-3.czn-open{display:block}' +
            '.czn-dropdown-3 li a{padding-left:60px}' +
        '}';

    /* Base Wiki URL Configuration */
    var wikiBase = 'https://cznwiki.com/index.php?title=';

    function wikiUrl(title) {
        return wikiBase + encodeURIComponent(title).replace(/%2F/g, '/').replace(/%3A/g, ':');
    }

    var navHtml =
        '<nav class="czn-navbar">' +
            /* Left: Mobile Toggle & Single Logo */
            '<div class="czn-nav-left">' +
                '<button class="czn-menu-toggle" id="czn-mobile-menu-btn">☰</button>' +
                '<div class="czn-logo-group">' +
                    '<a href="https://cznwiki.com/">' +
                        '<img src="https://cznwiki.com/images/c/c9/Logo.png" alt="CZN WIKI" class="czn-logo">' +
                    '</a>' +
                '</div>' +
            '</div>' +

            /* Center: Navigation Menu */
            '<div class="czn-nav-center">' +
                '<ul class="czn-nav-menu" id="czn-nav-menu">' +

                    /* HOME Section */
                    '<li>' +
                        '<a href="https://cznwiki.com/">' +
                            '<span class="czn-text">HOME</span>' +
                        '</a>' +
                        '<ul class="czn-dropdown-2">' +
                            '<li><a href="' + wikiUrl('Main_Page') + '"><span class="czn-text">BACK</span></a></li>' +
                            '<li><a href="https://cznwiki.com/index.php?title=%E9%A6%96%E9%A1%B5&action=purge"><span class="czn-text">REFRESH</span></a></li>' +
                        '</ul>' +
                    '</li>' +

                    /* WIKI Section */
                    '<li>' +
                        '<a href="#"><span class="czn-text">WIKI</span></a>' +
                        '<ul class="czn-dropdown-2">' +
                            '<li><a href="' + wikiUrl('Combatant') + '"><span class="czn-text">Combatant</span></a></li>' +
                            '<li><a href="' + wikiUrl('Partner') + '"><span class="czn-text">Partner</span></a></li>' +
                            '<li><a href="' + wikiUrl('Card') + '"><span class="czn-text">Card</span></a></li>' +
                            '<li><a href="' + wikiUrl('Relic') + '"><span class="czn-text">Relic</span></a></li>' +
                            '<li><a href="' + wikiUrl('Encounter') + '"><span class="czn-text">Encounter</span></a></li>' +
                        '</ul>' +
                    '</li>' +

                    /* DATA Section */
                    '<li>' +
                        '<a href="#"><span class="czn-text">DATA</span></a>' +
                        '<ul class="czn-dropdown-2">' +
                            '<li><a href="' + wikiUrl('Item') + '"><span class="czn-text">Item</span></a></li>' +
                            '<li class="czn-has-level-3">' +
                                '<a href="#" class="czn-l3-toggle"><span class="czn-text">Art</span></a>' +
                                '<ul class="czn-dropdown-3">' +
                                    '<li><a href="' + wikiUrl('Official_Media') + '"><span class="czn-text">Official Media</span></a></li>' +
                                    '<li><a href="' + wikiUrl('Fanart') + '"><span class="czn-text">Fanart</span></a></li>' +
                                '</ul>' +
                            '</li>' +
                        '</ul>' +
                    '</li>' +

                    /* TOOLS Section */
                    '<li>' +
                        '<a href="#"><span class="czn-text">TOOLS</span></a>' +
                        '<ul class="czn-dropdown-2">' +
                            '<li><a href="' + wikiUrl('Deck_Builder') + '"><span class="czn-text">Deck Builder</span></a></li>' +
                        '</ul>' +
                    '</li>' +

                '</ul>' +
            '</div>' +

            /* Right: Search Box */
            '<div class="czn-nav-right">' +
                '<div class="czn-search-box">' +
                    '<form action="https://cznwiki.com/index.php" method="get" style="display:flex;align-items:center;margin:0">' +
                        '<input type="hidden" name="title" value="Special:Search">' +
                        '<input type="text" name="search" placeholder="Search Wiki...">' +
                        '<button type="submit" name="go" class="czn-search-btn">GO</button>' +
                    '</form>' +
                '</div>' +
            '</div>' +
        '</nav>';

    function q(s) { return document.querySelector(s); }

    var initNav = function () {
        if (q('.czn-navbar')) return;

        /* Inject CSS Styles */
        var styleTag = document.createElement('style');
        styleTag.type = 'text/css';
        if (styleTag.styleSheet) {
            styleTag.styleSheet.cssText = style;
        } else {
            styleTag.appendChild(document.createTextNode(style));
        }
        document.getElementsByTagName('head')[0].appendChild(styleTag);

        /* Inject Navigation HTML */
        var body = document.body || document.getElementsByTagName('body')[0];
        body.insertAdjacentHTML('afterbegin', navHtml);

        /* Mobile Sidebar Toggle Logic */
        var mobileBtn = document.getElementById('czn-mobile-menu-btn');
        var navMenu = document.getElementById('czn-nav-menu');

        if (mobileBtn && navMenu) {
            mobileBtn.addEventListener('click', function () {
                navMenu.classList.toggle('czn-active');
                mobileBtn.innerHTML = navMenu.classList.contains('czn-active') ? '✕' : '☰';
            });

            document.addEventListener('click', function (e) {
                if (window.innerWidth <= 1024) {
                    if (!navMenu.contains(e.target) && !mobileBtn.contains(e.target)) {
                        navMenu.classList.remove('czn-active');
                        mobileBtn.innerHTML = '☰';
                    }
                }
            });
        }

        /* Mobile Level-3 Menu Click Logic */
        var level3Toggles = document.querySelectorAll('.czn-l3-toggle');
        level3Toggles.forEach(function (toggle) {
            toggle.addEventListener('click', function (e) {
                if (window.innerWidth <= 1024) {
                    e.preventDefault();
                    var subMenu = this.nextElementSibling;
                    if (subMenu && subMenu.classList.contains('czn-dropdown-3')) {
                        subMenu.classList.toggle('czn-open');
                    }
                }
            });
        });
    };

    /* Start initialization */
    initNav();
})();