Revising the navigation menu a bit, mobile is in-progress.

assets/less/mio/classes/header.less

@@ -2,90 +2,233 @@
 
 .header {
     display: flex;
-    margin: 4px 0;
+    align-items: center;
+    padding: 2px 0;
 
     @media (max-width: @mio-header-mobile) {
         flex-direction: column;
-        align-items: center;
     }
 
-    &__logo {
+    @media (max-width: @mio-header-mobile) {
-        flex-grow: 0;
+        &__icons {
-        flex-shrink: 0;
+            display: flex;
-
+            justify-content: space-between;
-        &__link {
-            color: inherit;
-            text-decoration: none;
-            cursor: pointer;
-            display: block;
-        }
-
-        &__image {
-            vertical-align: bottom;
-
-            @media (max-width: @mio-header-mobile) {
-                max-width: 200px;
-                max-height: 100px;
-                margin-bottom: 4px;
-            }
-        }
-    }
-
-    &__menu {
-        flex-grow: 1;
-        flex-shrink: 1;
-        display: flex;
-        align-items: flex-start;
-        justify-content: flex-end;
-
-        @media (max-width: @mio-header-mobile) {
             width: 100%;
         }
     }
 
-    &__user {
+    &__icon {
-        border: 1px solid #9475b2;
+        display: none;
-        display: inline-block;
+        cursor: pointer;
+        width: 40px;
+        height: 40px;
 
-        &__content {
+        &--menu {
-            margin: 2px;
+            background-image: url('https://static.flash.moe/images/mobile-menu.png');
-            display: flex;
+            background-size: 40px;
+        }
+
+        @media (max-width: @mio-header-mobile) {
+            display: block;
+        }
+    }
+
+    &__logo {
+        flex: 0 0 auto;
+        color: inherit;
+        text-decoration: none;
+        cursor: pointer;
+        display: block;
+        background: url('https://static.flash.moe/images/imouto-transparent.png') no-repeat center / cover;
+        width: 60px;
+        height: 60px;
+        font-size: 0;
+
+        @media (max-width: @mio-header-mobile) {
+            width: 40px;
+            height: 40px;
+        }
+    }
+
+    &__menu {
+        flex: 1 1 auto;
+        margin: 0 6px;
+        font-family: @mio-font-heading;
+        list-style: none;
+        display: flex;
+
+        @media (max-width: @mio-header-mobile) {
+            display: none;
+            font-size: 1.6em;
+            line-height: 1.5em;
+        }
+
+        &-toggle {
+            display: none;
+
+            &:checked ~ .header__menu {
+                display: block;
+            }
+        }
+
+        @media (max-width: @mio-header-mobile) {
+            width: 100%;
+
+            &__item {
+                background: #c2affe;
+
+                &:not(:last-child) {
+                    border-bottom: 1px solid #9475b2;
+                }
+            }
+
+            &__link {
+                width: 100%;
+                display: block;
+                padding: 4px 8px;
+                color: inherit;
+                text-decoration: none;
+            }
+        }
+
+        @media (min-width: @mio-header-mobile) {
+            &__item {
+                text-align: center;
+                transition: background-color .2s;
+
+                &:hover {
+                    background-color: #c2affe;
+
+                    .header__submenu {
+                        transform: scaleY(1);
+                    }
+                }
+            }
+
+            &__link {
+                font-size: 1.2em;
+                color: inherit;
+                text-decoration: none;
+                display: block;
+                padding: 6px 4px;
+                min-width: 100px;
+                cursor: pointer;
+            }
+        }
+    }
+
+    &__submenu {
+        list-style: none;
+        display: block;
+
+        @media (max-width: @mio-header-mobile) {
+            &__link {
+                padding: 2px 16px;
+                display: block;
+                width: 100%;
+                color: inherit;
+                text-decoration: none;
+            }
+        }
+
+        @media (min-width: @mio-header-mobile) {
+            position: absolute; // floating
+            transform: scaleY(0);
+            transform-origin: center top 0;
+            background: #c2affe;
+            overflow: hidden;
+            z-index: 100;
+            text-align: left;
+            box-shadow: 0 1px 2px #9475b2;
+            transition: transform .2s;
+
+            &:hover {
+                transform: scaleY(1);
+            }
+
+            &__link {
+                color: inherit;
+                text-decoration: none;
+                display: block;
+                padding: 2px 6px;
+                min-width: 100px;
+            }
+        }
+    }
+
+    &__user {
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: row-reverse;
+        order: 3;
+
+        @media (max-width: @mio-header-mobile) {
+            display: none;
+        }
+
+        &-toggle {
+            display: none;
+
+            &:checked ~ .header__user {
+                display: flex;
+            }
         }
 
         &__avatar {
             width: 60px;
             height: 60px;
-        }
-
-        &__links {
-            text-align: right;
-            list-style: none;
-            margin: 0 2px;
-            line-height: 1.5em;
-
-            &__container {
-                flex-grow: 1;
-            }
 
             @media (max-width: @mio-header-mobile) {
-                font-size: 1.5em;
+                display: none;
             }
         }
 
-        &__link {
+        &__info {
+            padding: 1px;
+            margin-right: 4px;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            justify-content: center;
+        }
+
+        &__name {
             color: inherit;
+            font-size: 1.4em;
+            line-height: 1.4em;
+            font-family: @mio-font-heading;
             text-decoration: none;
             display: block;
-            min-width: 70px;
+            display: inline-flex;
+            align-items: flex-end;
+            justify-content: right;
 
             &:hover {
                 text-decoration: underline;
             }
         }
 
-        @media (max-width: @mio-header-mobile) {
+        &__actions {
-            width: 100%;
+            display: flex;
-            margin: 0;
+            flex-wrap: wrap;
+            justify-content: right;
+            list-style: none;
+            max-width: 100px;
+            font-size: .9em;
+            line-height: 1.4em;
+        }
+
+        &__action {
+            padding-left: 6px;
+        }
+
+        &__link {
+            color: inherit;
+            text-decoration: none;
+
+            &:hover {
+                text-decoration: underline;
+            }
         }
     }
 }

assets/less/mio/classes/input/button.less

@@ -27,11 +27,11 @@
         }
 
         &:hover {
-            background-color: #A586c3;
+            background-color: #a586c3;
         }
 
         &:active {
-            background-color: #8364a1;
+            background-color: #c2affe;
         }
     }
 }

views/mio/_layout/header.twig

@@ -0,0 +1,86 @@
+<nav class="header">
+    <div class="header__icons">
+        <label class="header__icon header__icon--menu" for="toggle-mobile-header-menu"></label>
+
+        <a class="header__logo" href="/">
+            {{ globals.site_name }}
+        </a>
+
+        <label style="background-image:url('/profile.php?u={{ app.hasActiveSession ? current_user.user_id : 0 }}&amp;m=avatar');"
+            class="avatar header__icon header__icon--user"
+            for="toggle-mobile-header-user"></label>
+    </div>
+
+    <input type="checkbox" class="header__menu-toggle" id="toggle-mobile-header-menu">
+    <ul class="header__menu">
+        <li class="header__menu__item">
+            <a href="/" class="header__menu__link">Home</a>
+            <ul class="header__submenu">
+                <li class="header__submenu__item"><a href="/changelog.php" class="header__submenu__link">Changelog</a></li>
+                <li class="header__submenu__item"><a href="/info.php?t=contact" class="header__submenu__link">Contact</a></li>
+                <li class="header__submenu__item"><a href="/info.php?t=rules" class="header__submenu__link">Rules</a></li>
+            </ul>
+        </li>
+        <li class="header__menu__item"><a href="/news.php" class="header__menu__link">News</a></li>
+        <li class="header__menu__item"><a href="/forum/" class="header__menu__link">Forum</a></li>
+        <li class="header__menu__item"><a href="https://chat.flashii.net" class="header__menu__link">Chat</a></li>
+        <li class="header__menu__item"><a href="/members.php" class="header__menu__link">Members</a></li>
+    </ul>
+
+    <input type="checkbox" class="header__user-toggle" id="toggle-mobile-header-user">
+    <div class="header__user">
+        {% if app.hasActiveSession %}
+            <a  href="/profile.php?u={{ current_user.user_id }}"
+                class="avatar header__user__avatar"
+                style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');"></a>
+        {% else %}
+            <a  href="/auth.php?m=login"
+                class="avatar header__user__avatar"
+                style="background-image:url('/profile.php?u=0&amp;m=avatar');"></a>
+        {% endif %}
+
+        <div class="header__user__info">
+            {% if app.hasActiveSession %}
+                <a  href="/profile.php?u={{ current_user.user_id }}"
+                    class="header__user__name"
+                    style="{{ current_user.user_colour|html_colour({
+                        'color': '%s',
+                        'text-shadow': '0 0 5px %s',
+                    }) }}">
+                    {{ current_user.username }}
+                </a>
+            {% else %}
+                <a  href="/auth.php?m=login"
+                    class="header__user__name">
+                    Guest
+                </a>
+            {% endif %}
+
+            <ul class="header__user__actions">
+                {% if app.hasActiveSession %}
+                    <li class="header__user__action">
+                        <a class="header__user__link" href="/profile.php?u={{ current_user.user_id }}">Profile</a>
+                    </li>
+                    <li class="header__user__action">
+                        <a class="header__user__link" href="/settings.php">Settings</a>
+                    </li>
+                    {% if has_manage_access %}
+                        <li class="header__user__action">
+                            <a class="header__user__link" href="{{ manage_link|default('/manage/index.php') }}">Manage</a>
+                    </li>
+                    {% endif %}
+                    <li class="header__user__action">
+                        <a class="header__user__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">Log out</a>
+                    </li>
+                {% else %}
+                    <li class="header__user__action">
+                        <a class="header__user__link" href="/auth.php?m=login">Log in</a>
+                    </li>
+                    <li class="header__user__action">
+                        <a class="header__user__link" href="/auth.php?m=register">Register</a>
+                    </li>
+                {% endif %}
+            </ul>
+        </div>
+    </div>
+</nav>

views/mio/changelog/change.twig

@@ -1,5 +1,4 @@
 {% extends '@mio/changelog/master.twig' %}
-{% from '@mio/macros.twig' import navigation %}
 {% from '@mio/_layout/comments.twig' import comments_section %}
 
 {% set is_valid = change|length > 0 %}
@@ -105,6 +104,4 @@
             {{ comments_section(comments, comments_category, current_user|default(null), comments_perms) }}
         </div>
     {% endif %}
-
-    {{ navigation(mio_navigation) }}
 {% endblock %}

views/mio/changelog/index.twig

@@ -1,5 +1,5 @@
 {% extends '@mio/changelog/master.twig' %}
-{% from '@mio/macros.twig' import navigation, pagination %}
+{% from '@mio/macros.twig' import pagination %}
 {% from '@mio/changelog/macros.twig' import changelog_listing %}
 {% from '@mio/_layout/comments.twig' import comments_section %}
 
@@ -46,6 +46,4 @@
             {{ comments_section(comments, comments_category, current_user|default(null), comments_perms) }}
         </div>
     {% endif %}
-
-    {{ navigation(mio_navigation) }}
 {% endblock %}

views/mio/errors/master.twig

@@ -1,5 +1,4 @@
 {% extends '@mio/master.twig' %}
-{% from '@mio/macros.twig' import navigation %}
 
 {% block content %}
     <div class="container">
@@ -18,8 +17,6 @@
         </div>
     </div>
 
-    {{ navigation(mio_navigation) }}
-
     {% if error_code|default(0) >= 500 %}
         <audio autoplay>
             <source src="https://static.flash.moe/sounds/wbrb.ogg" type="audio/ogg">

views/mio/forum/forum.twig

@@ -1,5 +1,5 @@
 {% extends '@mio/forum/master.twig' %}
-{% from '@mio/macros.twig' import navigation, pagination %}
+{% from '@mio/macros.twig' import pagination %}
 {% from '@mio/forum/macros.twig' import forum_category_listing, forum_topic_listing, forum_category_buttons %}
 
 {% set title = forum_info.forum_name %}
@@ -30,6 +30,4 @@
         {{ fcpagination }}
         {{ fcbuttons }}
     {% endif %}
-
-    {{ navigation(mio_navigation, '/forum/') }}
 {% endblock %}

views/mio/forum/index.twig

@@ -1,5 +1,4 @@
 {% extends '@mio/forum/master.twig' %}
-{% from '@mio/macros.twig' import navigation %}
 {% from '@mio/forum/macros.twig' import forum_category_listing %}
 
 {% set title = 'Forum Listing' %}
@@ -30,6 +29,4 @@
             </div>
         </div>
     {% endif %}
-
-    {{ navigation(mio_navigation, '/forum/') }}
 {% endblock %}

views/mio/forum/posting.twig

@@ -15,5 +15,4 @@
 {% block content %}
     {{ navigation(posting_breadcrumbs, posting_breadcrumbs|last, true, null, 'left') }}
     {{ forum_posting_form(form_title, form_target_id, posting_topic is defined) }}
-    {{ navigation(mio_navigation, '/forum/') }}
 {% endblock %}

views/mio/forum/topic.twig

@@ -51,6 +51,4 @@
             });
         </script>
     {% endif %}
-
-    {{ navigation(mio_navigation, '/forum/') }}
 {% endblock %}

views/mio/home/index.twig

@@ -1,5 +1,4 @@
 {% extends '@mio/home/master.twig' %}
-{% from '@mio/macros.twig' import navigation %}
 {% from '@mio/news/macros.twig' import news_preview %}
 {% from '@mio/changelog/macros.twig' import changelog_listing %}
 
@@ -48,8 +47,6 @@
         </div>
     </div>
 
-    {{ navigation(mio_navigation, '/') }}
-
     {% if embed_linked_data is defined and embed_linked_data %}
         <script type="application/ld+json">
         {

views/mio/master.twig

@@ -1,13 +1,3 @@
-{% from '@mio/macros.twig' import navigation %}
-
-{% set mio_navigation = {
-    'Home': '/',
-    'News': '/news.php',
-    'Forum': '/forum/',
-    'Chat': 'https://chat.flashii.net',
-    'Members': '/members.php',
-} %}
-
 <!doctype html>
 <html>
     <head>
@@ -19,37 +9,7 @@
     </head>
     <body class="mio">
         <div class="mio__wrapper">
-            <nav class="header">
+            {% include '_layout/header.twig' %}
-                <div class="header__logo">
-                    <a href="/" class="header__logo__link">
-                        <img class="header__logo__image" src="https://static.flash.moe/logos/logo-exo.png" alt="Flashii">
-                    </a>
-                </div>
-
-                <div class="header__menu">
-                    {% if app.hasActiveSession %}
-                        <div class="container header__user">
-                            <div class="container__title">Hey, {{ current_user.username }}!</div>
-                            <div class="header__user__content">
-                                <a href="/settings.php?m=images" class="avatar header__user__avatar" style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');"></a>
-
-                                <div class="header__user__links__container">
-                                    <ul class="header__user__links">
-                                        <li class="header__user__option"><a class="header__user__link" href="/profile.php?u={{ current_user.user_id }}">Profile</a></li>
-                                        <li class="header__user__option"><a class="header__user__link" href="/settings.php">Settings</a></li>
-                                        {% if has_manage_access %}
-                                            <li class="header__user__option"><a class="header__user__link" href="{{ manage_link|default('/manage/index.php') }}">Manage</a></li>
-                                        {% endif %}
-                                        <li class="header__user__option"><a class="header__user__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">Logout</a></li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    {% else %}
-                        <a href="/auth.php" class="input__button">Login/Register</a>
-                    {% endif %}
-                </div>
-            </nav>
 
             {% block content %}
                 <div class="container">
@@ -58,8 +18,6 @@
                         This page has no content!
                     </div>
                 </div>
-
-                {{ navigation(mio_navigation) }}
             {% endblock %}
 
             <footer class="footer">

views/mio/news/category.twig

@@ -8,7 +8,7 @@
     'o': posts_offset,
 }) %}
 
-{% block news_content %}
+{% block content %}
     <div class="container news__container">
         <div class="container__title news__container__title">News » {{ category.category_name }}</div>
         <div class="news__container__content">

views/mio/news/index.twig

@@ -5,7 +5,7 @@
 {% set title = 'News' %}
 {% set canonical_url = '/news.php'|url_construct({'o':posts_offset}) %}
 
-{% block news_content %}
+{% block content %}
     <div class="container news__container">
         <div class="container__title news__container__title">News</div>
         <div class="news__container__content">

views/mio/news/master.twig

@@ -1,15 +1 @@
 {% extends '@mio/master.twig' %}
-{% from '@mio/macros.twig' import navigation %}
-
-{% block content %}
-    {% block news_content %}
-        <div class="container">
-            <div class="container__title">News!</div>
-            <div class="container__content">
-                <p>Welcome to News, the news is still heavily in development. You can follow us on News where we'll post news every so often, we'll also announce when the news is ready for public use there!</p>
-            </div>
-        </div>
-    {% endblock %}
-
-    {{ navigation(mio_navigation, '/news.php') }}
-{% endblock %}

views/mio/news/post.twig

@@ -4,7 +4,7 @@
 {% set title = post.post_title ~ ' :: News' %}
 {% set canonical_url = '/news.php?p=' ~ post.post_id %}
 
-{% block news_content %}
+{% block content %}
     <div class="container news__post">
         <div class="container__title">
             <a href="/news.php?c={{ post.category_id }}" class="container__title__link">{{ post.category_name }}</a> »

views/mio/settings/master.twig

@@ -29,6 +29,4 @@
             </div>
         {% endblock %}
     {% endblock %}
-
-    {{ navigation(mio_navigation) }}
 {% endblock %}

views/mio/user/listing.twig

@@ -1,5 +1,5 @@
 {% extends '@mio/user/master.twig' %}
-{% from '@mio/macros.twig' import navigation, pagination %}
+{% from '@mio/macros.twig' import pagination %}
 
 {% set canonical_url = '/members.php'|url_construct({
     'r': role.role_id != 1 ? role.role_id : 0,
@@ -131,5 +131,4 @@
     </div>
 
     {{ pagination(role.role_user_count, users_take, users_offset, full_url) }}
-    {{ navigation(mio_navigation, '/members.php') }}
 {% endblock %}

views/mio/user/notfound.twig

@@ -1,5 +1,4 @@
 {% extends '@mio/user/master.twig' %}
-{% from '@mio/macros.twig' import navigation %}
 
 {% set title = 'User not found!' %}
 
@@ -10,6 +9,4 @@
             <p>Check the url and try again.</p>
         </div>
     </div>
-
-    {{ navigation(mio_navigation, false) }}
 {% endblock %}

views/mio/user/view.twig

@@ -64,9 +64,12 @@
 } %}
 
 {% block content %}
-    {{ navigation(mio_navigation, false, true) }}
+    {# navigation({
+        (profile.username): 'profile',
+        'Comments': 'comments',
+    }, 'profile', true, '#%s') #}
 
-    <div class="profile">
+    <div class="profile" id="profile">
         <div class="container profile__header">
             <div class="container__title">Profile of {{ profile.username }}</div>
             <div class="profile__header__content">