new: [UI] made the side menu responsive, fixes #16

templates/element/genericElements/side_menu_dropdown_scaffold.php

@@ -0,0 +1,46 @@
+<?php
+$children = '';
+if (isset($menu[$metaGroup])) {
+    foreach ($menu[$metaGroup] as $scope => $scopeData) {
+        foreach ($scopeData['children'] as $action => $data) {
+            if (
+                (!empty($data['requirements']) && !$data['requirements']) ||
+                (
+                    !empty($data['actions']) &&
+                    !in_array($this->request->getParam('action'), $data['actions'])
+                ) ||
+                !empty($data['actions']) && $scope !== $this->request->getParam('controller')
+            ) {
+                continue;
+            }
+            $matches = [];
+            preg_match_all('/\{\{.*?\}\}/', $data['url'], $matches);
+            if (!empty($matches[0])) {
+                $mainEntity = \Cake\Utility\Inflector::underscore(\Cake\Utility\Inflector::singularize($scope));
+                foreach ($matches as $match) {
+                    $data['url'] = str_replace(
+                        $match[0],
+                        Cake\Utility\Hash::extract($entity, trim($match[0], '{}'))[0],
+                        $data['url']
+                    );
+                }
+            }
+            $children .= sprintf(
+                '<a class="dropdown-item" href="%s">%s</a>',
+                empty($data['url']) ? '#' : h($data['url']),
+                empty($data['label']) ? h($action) : $data['label']
+            );
+        }
+    }
+}
+echo sprintf(
+    '<div class="dropdown show">%s%s</div>',
+    sprintf(
+        '<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="sideMenuDropdownLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">%s</a>',
+        __('Navigation')
+    ),
+    sprintf(
+        '<div class="dropdown-menu" aria-labelledby="sideMenuDropdownLink">%s</div>',
+        $children
+    )
+);

templates/element/side_menu.php

@@ -1,2 +1,7 @@
 <?php
-echo $this->element('genericElements/side_menu_scaffold', ['menu' => $menu]);
+if (empty($minimal)) {
+    $element = 'side_menu_scaffold';
+} else {
+    $element = 'side_menu_dropdown_scaffold';
+}
+echo $this->element('genericElements/' . $element, ['menu' => $menu]);

templates/layout/default.php

@@ -45,10 +45,11 @@ $cakeDescription = 'Cerebrate';
     <main role="main" class="container-fluid">
         <div class="container-fluid">
             <div class="row">
-                <div class="col-md-2 d-none d-md-block col-lg-1 bg-light sidebar" style="padding:0px;margin:0px;">
+                <div class="col-1 d-none d-xl-block bg-light sidebar" style="padding:0px;margin:0px;">
                     <?= $this->element('side_menu') ?>
                 </div>
-                <div role="main" class="col-md-10 ml-sm-auto col-lg-11 pt-3 px-4">
+                <div role="main" class="col-xl-11 col-lg-12 ml-sm-auto pt-3 px-4">
+                    <div class="col-12 d-xl-none px-0"><?= $this->element('side_menu', ['minimal' => 1]) ?></div>
                     <?= $this->Flash->render() ?>
                     <?= $this->fetch('content') ?>
                 </div>