Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
navbar.js 3.21 KiB
Newer Older
  • Learn to ignore specific revisions
  • "use strict";
    
    const { images_url } = require("../../../constants");
    
    const NAV_MENU_ITEMS = [
    
        ["/games/", "Jeux"],
    
        // À murir..
        // [
        //     "/software-development/",
        //     "Software",
        //     [
        //         ["/software-development/#projects", "Projets"],
        //         ["/software-development/#service", "Prestation de services"],
        //     ],
        // ],
    
            "/education/",
    
            "Pédagogie",
            [
                // submenu
    
                ["/education/#game-studio-club", "Game Studio Club"],
                ["/education/#popularization", "Vulgarisation numérique"],
    
            ],
        ],
    ];
    
    class NavBar {
        constructor() {
            this.initEventHandlers();
        }
    
        handleBurgerClick() {
            document.getElementById("nav-menu-list").classList.toggle("responsive-show");
        }
    
        initEventHandlers() {
            window.addEventListener("click", event => {
                if (
                    event.target.id !== "nav-menu-list" &&
                    !event.target.classList.contains("burger") &&
                    !event.target.parentNode.classList.contains("burger")
                ) {
                    document.getElementById("nav-menu-list").classList.remove("responsive-show");
                }
            });
        }
    
        renderHome() {
            return {
                tag: "div",
                class: "home",
                contents: [
                    {
                        tag: "a",
    
    peter_rabbit's avatar
    peter_rabbit committed
                            {
                                tag: "img",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                alt: "Logo Kuadrado",
    
                                src: `${images_url}logo_kuadrado.svg`,
    
    peter_rabbit's avatar
    peter_rabbit committed
                            },
                            {
                                tag: "img",
                                alt: "Kuadrado Software",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                class: "logo-text",
    
                                src: `${images_url}logo_kuadrado_txt.svg`,
    
    peter_rabbit's avatar
    peter_rabbit committed
                            },
    
                        ],
                    },
                ],
            };
        }
    
        renderMenu(menuItemsArray, isSubmenu = false) {
            return {
                tag: "ul",
                id: "nav-menu-list",
                class: isSubmenu ? "submenu" : "",
                contents: menuItemsArray.map(link => {
                    const [href, text, submenu] = link;
                    return {
                        tag: "li",
                        class: !isSubmenu && window.location.pathname === href ? "active" : "",
                        contents: [
                            {
                                tag: "a",
                                href,
                                contents: text,
                            },
                        ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
                    };
                }),
            };
        }
    
        renderResponsiveBurger() {
            return {
                tag: "div",
                class: "burger",
                onclick: this.handleBurgerClick.bind(this),
                contents: [{ tag: "span", contents: "···" }],
            };
        }
    
        render() {
            return {
                tag: "nav",
                contents: [
                    this.renderHome(),
                    this.renderResponsiveBurger(),
                    this.renderMenu(NAV_MENU_ITEMS),
                ],
            };
        }
    }
    
    module.exports = NavBar;