Experiment with hamburger menu

src/assets/css/default.css

@@ -206,3 +206,12 @@ p .ui.horizontal.label {
         margin-bottom: 0;
     }
 }
+
+/**
+ * Menu
+ */
+@media (min-width: 768px) {
+    .menu.toggle {
+        display: none;
+    }
+}

src/assets/js/default.js

@@ -95,6 +95,22 @@ $(function() {
     $.fn.toast.settings.class          = 'success';
     $.fn.toast.settings.showIcon       = 'check';
     $.fn.toast.settings.title          = 'Success';
+
+    /**
+     * Menu
+     */
+    $(document).on('click', '.menu.toggle', function() {
+        $('.menu.sidebar').sidebar('show');
+    });
+
+    $(window).resize(function(event) {
+        if ($(window).width() > 768) {
+            $('.menu.sidebar').removeClass('vertical sidebar');
+        } else {
+            $('.menu.sidebar').addClass('vertical sidebar');
+        }
+    });
+    $(window).trigger('resize');
 });
 
 /**

src/classes/page.php

@@ -255,7 +255,7 @@ class Page
             );
         }
         ?>
-        <div class="ui attached stackable menu">
+        <div class="ui attached stackable vertical menu sidebar">
             <div class="ui container">
                 <a class="item home" href="/?page=home">
                     <img src="/src/assets/img/logo.svg" />
@@ -298,6 +298,14 @@ class Page
                 <?php } ?>
             </div>
         </div>
+        <div class="ui attached stackable menu toggle">
+            <div class="ui container">
+                <a class="item">
+                    <i class="hamburger icon"></i>
+                    Menu
+                </a>
+            </div>
+        </div>
         <div class="ui hidden divider"></div>
         <?php
     }