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.02 KiB
Newer Older
  • Learn to ignore specific revisions
  • "use strict";
    
    const { images_url } = require("../../../constants");
    
    const NAV_MENU_ITEMS = [
    
        { url: "/games/", text: "Jeux" },
        {
            url: "/education/",
            text: "Pédagogie",
            // submenu: [
            //     { url: "/gamedev", text: "Création de jeux vidéo" },
            // ]
        },
        { url: "/software-development/", text: "Software" }
    
    ];
    
    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, parentUrl = "") {
    
            return {
                tag: "ul",
                id: "nav-menu-list",
                class: isSubmenu ? "submenu" : "",
    
                contents: menuItemsArray.map(item => {
                    const { url, text, submenu } = item;
                    const href = `${parentUrl}${url}`;
    
                    return {
                        tag: "li",
                        class: !isSubmenu && window.location.pathname === href ? "active" : "",
                        contents: [
                            {
                                tag: "a",
                                href,
                                contents: text,
                            },
    
                        ].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
    
                    };
                }),
            };
        }
    
        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;