Feature request: Optimized mobile view for MainMenu

[dploeger]

When using the MainMenu feature on projects that are accessed using mobile devices, the MainMenu spans the complete view and hides the actual content:

(this is true for all included styles)

So this feature request is about optimizing the MainMenu for mobile (or small screen) devices.

[dploeger]

I've used the following quick fix for the time being:

@media screen and (max-width: 767px) {
    .main_menu {
        position: inherit;
        height: auto;
        margin-bottom: 1em;
    }

    .top-bar[data-iommi-type="DebugMenu"] {
        display: none;
    }
}

[boxed]

At work I have some custom code for this that I haven't upstreamed to iommi. Partly because I'm not sure it's fully general purpose. But here is is for what it's worth:

document.addEventListener('readystatechange', (event) => {
    // TODO: On change of window size, do the compact_menu toggle... maybe only do this in CSS
    if (window.innerWidth > 767) {
        update_compact_menu_from_local_storage();
    }
    else {
        $('body').addClass('compact_menu');
    }
});

function toggle_compact_menu() {
    const body = $('body');
    if (body.hasClass('compact_menu')) {
        localStorage.setItem('compact_menu', '0');
    }
    else {
        localStorage.setItem('compact_menu', '1');
    }
    update_compact_menu_from_local_storage();
}


function update_compact_menu_from_local_storage() {
    if (localStorage.getItem('compact_menu') === '1') {
        $('body').addClass('compact_menu');
    }
    else {
        $('body').removeClass('compact_menu');
    }
}

and in the template:

{% extends 'iommi/main_menu/menu.html' %}
{% load i18n %}

{% block above %}
    <span class="hamburger_toggler" onclick="toggle_compact_menu()"><i class="fa fa-bars"></i></span>
{% endblock %}


{% block before_ul %}
    <a id="menu-logo" href="/"><div class="dryft_logo_menu"></div></a>
{% endblock %}


{% block bottom %}
    <nav class="main_menu_bottom">
        <ul>
            <li>
                <div id="compact_menu_toggler" onclick="toggle_compact_menu()">
                    <i class="fa fa-chevron-right compact_menu_expand"></i>
                    <div class="compact_menu_collapse"><i class="fa fa-chevron-left"></i> {% trans "Collapse" %}</div>
                </div>
            </li>
        </ul>
    </nav>
{% endblock %}

CSS:

#compact_menu_toggler {
    width: 100%;
    text-align: center;
    zoom: 1.4;
}

.compact_menu_expand {
    display: none;
}
.compact_menu_expand,
.compact_menu_collapse {
    cursor: pointer;
}
.compact_menu_collapse {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.compact_menu .main_menu {
    width: var(--compact-menu-width);

    .dryft_logo_menu {
        zoom: 0.7;

        height: 5rem;
        width: 5rem;
        margin-left: 0.4rem;
        /*noinspection CssUnknownTarget*/
        background: url(/static/images/logo_icon_white.svg);
        background-size: cover;
    }


    li {
        text-align: center;
    }

    i {
        zoom: 1.5;
        line-height: 2rem;
    }
    ul ul {
        i {
            zoom: normal;
        }
        ul li {
            zoom: 0.9;
        }
        li {
            display: inline-block;
        }
    }

    a span,
    .main_menu_open_close {
        display: none;
    }

    nav ul a,
    nav ul ul a,
    nav ul ul ul a,
    nav ul ul ul ul a,
    nav ul ul ul ul ul a {
        padding-left: 0;
    }

    nav ul ul {
        border-top: 1px solid black;
        border-bottom: 3px solid black;
    }

    .compact_menu_collapse {
        display: none;
    }
    .compact_menu_expand {
        display: unset;
    }
}

.main_menu_bottom {
    li {
        text-align: center;
    }
}

.hamburger_toggler i {
    color: white;
}

.hamburger_toggler {
    display: none;
}

/* mobile */
@media screen and (max-width: 767px) {
    .main_menu {
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;

        .hamburger_toggler {
            display: inline;
            position: absolute;
            right: 1rem;
            top: 0.5rem;
            i {
                zoom: 2;
            }
        }
    }

    .hamburger_toggler {
        display: inline;
        position: fixed;
        right: 0;
        top: 0;
        padding: 0.5rem;
        z-index: 99;
        i {
            zoom: 2;
        }
    }

    #compact_menu_toggler {
        display: none;
    }

    body.sidebar_menu_active,
    body.sidebar_menu_active.compact_menu {
        margin-left: 0;
    }

    .compact_menu .main_menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3rem;

        .dryft_logo_menu {

            /*noinspection CssUnknownTarget*/
            background: url(/static/images/logo2-white.svg);
            margin-top: 1rem;
            margin-left: 1rem;
            margin-bottom: 1rem;
            display: block;
            padding: 1rem;
            width: 8rem;
            background-size: cover;
            height: 3rem;
        }
    }

    .compact_menu .main_menu {
        .dryft_logo_menu {
            margin-top: 4px;
        }
    }
}

@media print {
    .main_menu {
        display: none !important;
    }

    body {
        margin-left: unset !important;
    }
}

Obviously the hardcoded logo url is no good for iommi itself :P

[dploeger]

@boxed That's a great starting point!