<aside class="mdc-drawer mdc-drawer--modal">
    <div class="mdc-drawer__content">
        <nav class="mdc-list">
            <div style="margin: 15px;text-align:center;">
                <img src="/images/page-logo.png" style="width: 90%;"/>
                <img src="/images/young-reporter-logo.png" style="width: 90%;padding-top:15px;"/>
            </div>
            <a class="mdc-list-item" href="https://reading-school.co.uk" data-mdc-auto-init="MDCRipple">
                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">school</i>
                <span class="mdc-list-item__text">Reading School Website</span>
            </a>
            <a class="mdc-list-item" href="/" data-mdc-auto-init="MDCRipple">
                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
                <span class="mdc-list-item__text">Home Page</span>
            </a>
            {% if site.categories.articles %}
            <div class="mdc-list-group">
                <h3 class="mdc-typography--headline7">Articles</h3>
                {% for article in site.categories.articles  %}
                    {% assign currentdate = article.date | date: "%Y" %}
                    {% if currentdate != date %}
                    {% if article.url != site.categories.articles.first.url %}
                    </div>
                    {% endif %}
                    <div class="mdc-list-group">
                    <h3 class="mdc-list-group__subheader">{{ currentdate }}</h3>
                    {% assign date = currentdate %}
                    {% endif %}
                    <a class="mdc-list-item" href="{{ article.url | relative_url }}" data-mdc-auto-init="MDCRipple">
                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
                        <span class="mdc-list-item__text">{{ article.title }}</span>
                    </a>
                    {% if currentdate != date %}
                    {% endif %}
                    {% if article.url == site.categories.articles.last.url %}
                    </div>
                    {% endif %}
                {% endfor %}
            </div>
            {% endif %}
        </nav>
    </div>
</aside>

<div class="mdc-drawer-scrim"></div>
