<style>

body {
    padding-left: 300px !important;
}

@media only screen and (max-width : 992px) {
    body {
        padding-left: 0 ! important;
    }
}

.sidenav .collapsible-body a{
    font-weight: normal !important;
}

</style>

<!– Workout distinct sidenav sections –> {% assign sections = '' | split: '' %} {% for page in site.pages %} {% for section in page.sections %}

{% assign sections = sections | push: section %}

{% endfor %} {% endfor %} {% assign sections = sections | uniq | sort %}

<!– Workout sidenav sections headings–> {% assign sectionsHeadings = '' | split: '' %} {% for section in sections %}

{% assign sectionsHeadings = sectionsHeadings | push: site.sections[section] %}

{% endfor %}

<!– Iterate through headings –> {% assign numberOfHeadings = sectionsHeadings | size | minus: 1 %}

<!– Main navigation –> <ul id=“slide-out” class=“nav sidenav sidenav-fixed”>

<li class="logo">
    <a id="logo-container" style="display: inline-block; height: 100%" href="/" class="brand-logo">
        <img id="front-page-logo" style="display: inline-block; padding: 1rem 0; max-width: 100%" src="https://upload.wikimedia.org/wikipedia/commons/b/bd/Logo_Enssat.png">
    </a>
</li>

<li>
    <div style="position: relative">
        <input  placeholder="Browse projects" style="line-height: 1rem; padding: 0 2rem">
        <i class="fa fa-search" style="position: absolute; right: 1rem; top: 1.2rem"></i>
    </div>
</li>

<li class="no-padding">
    <ul class="collapsible collapsible-accordion">
        {% for i in (0..numberOfHeadings) %}
        <li>
            <a class="collapsible-header waves-effect waves-teal" tabindex="0">
                {{ sectionsHeadings[i] }}
            </a>
            <div class="collapsible-body">
            <ul>
                {% for node in site.pages %}
                {% if node.sections contains sections[i] %}
                <li>
                    <a href="{{node.url}}">{{node.title}}</a>
                </li>
                {% endif %}
                {% endfor %}
            </ul>
        </li>
        {% endfor %}
    </ul>
</li>

</ul>

<script>

document.addEventListener('DOMContentLoaded', function () {
    // initialize sidenav behaviour
    const sidenavOptions = {};
    const sidenav = document.querySelector('.sidenav');
    M.Sidenav.init(sidenav, sidenavOptions);

    // initialize collapsible behaviour
    const collapsibleOptions = {};
    const collapsibles = document.querySelectorAll('.collapsible');
    M.Collapsible.init(collapsibles, collapsibleOptions);
});

</script>