Theming

On large+ screen, the menu can either be displayed as “collapsed” or “expanded”. Default being “expanded”.

A particular mode can be defined by setting a corresponding attribute menu on the root html element.

<!doctype html>
<html lang="en" menu="expanded"></html>

Usage

To init the menu as fast as possible, and therefore to avoid FOUC, we advise to add the following code snippet in your HTML pages.

<!-- Init menu as fast as possible as well -->
<script>
    try {
        const currentMenu = !localStorage.nnsMenu
            ? undefined
            : JSON.parse(localStorage.nnsMenu);

        document.documentElement.setAttribute(
        "menu",
        currentMenu ?? "expanded",
        );
    } catch (error) {
        console.error("Error initializing menu", error);
    }
</script>