new: [UI] some refactor and added theming

config/app_local.example.php

@@ -90,6 +90,7 @@ return [
         ],
     ],
     'Cerebrate' => [
-	'open' => []
+	'open' => [],
+    'dark' => 0
     ]
 ];

src/Controller/AppController.php

@@ -107,6 +107,7 @@ class AppController extends Controller
         $this->set('menu', $this->{$this->modelClass}->getMenu());
         $this->set('ajax', $this->request->is('ajax'));
         $this->request->getParam('prefix');
+        $this->set('darkMode', !empty(Configure::read('Cerebrate.dark')));
     }
 
     private function authApiUser(): void

templates/element/genericElements/IndexTable/Fields/boolean.php

@@ -44,7 +44,7 @@
         $rules_raw = implode('<br />', $rules_raw);
     }
     echo sprintf(
-        '<i class="black fa fa-%s"></i>%s',
+        '<i class="fa fa-%s"></i>%s',
         (!empty($this->Hash->extract($row, $field['data_path'])[0])) ? 'check' : 'times',
         empty($rules_raw) ? '' :
         sprintf(

templates/element/genericElements/header_scaffold.php

@@ -66,7 +66,8 @@ $homeButton = sprintf(
     empty($data['home']['text']) ? '' : h($data['home']['text'])
 );
 echo sprintf(
-    '<nav class="navbar navbar-expand-lg navbar-dark bg-dark">%s%s%s</nav>',
+    '<nav class="navbar navbar-expand-lg navbar-dark %s">%s%s%s</nav>',
+    $darkMode ? 'bg-primary' : 'bg-dark',
     $homeButton,
     '<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>',
     $navdata

templates/element/genericElements/side_menu_scaffold.php

@@ -1,11 +1,13 @@
 <?php
 $children = '';
+$backgroundColour = $darkMode ? 'bg-dark' : 'bg-light';
 if (isset($menu[$metaGroup])) {
     foreach ($menu[$metaGroup] as $scope => $scopeData) {
         $children .= sprintf(
-            '<li class="sidebar-header"><a href="%s" class="%s">%s</a></li>',
+            '<a href="%s" class="font-weight-bold list-group-item list-group-item-action %s %s pl-1 border-0">%s</a>',
             empty($scopeData['url']) ? '#' : h($scopeData['url']),
             empty($scopeData['class']) ? '' : h($scopeData['class']),
+            $backgroundColour,
             empty($scopeData['label']) ? h($scope) : $scopeData['label']
         );
         foreach ($scopeData['children'] as $action => $data) {
@@ -31,17 +33,20 @@ if (isset($menu[$metaGroup])) {
                     );
                 }
             }
+            $active = ($scope === $this->request->getParam('controller') && $action === $this->request->getParam('action'));
             $children .= sprintf(
-                '<li class="sidebar-element %s"><a href="%s" class="%s">%s</a></li>',
-                ($scope === $this->request->getParam('controller') && $action === $this->request->getParam('action')) ? 'active' : '',
+                '<a href="%s" class="list-group-item list-group-item-action %s %s pl-3 border-0 %s">%s</a>',
                 empty($data['url']) ? '#' : h($data['url']),
                 empty($data['class']) ? '' : h($data['class']),
+                $active ? 'active' : '',
+                $active ? '' : $backgroundColour,
                 empty($data['label']) ? h($action) : $data['label']
             );
         }
     }
 }
 echo sprintf(
-    '<div class="side-menu-div" id="side-menu-div"><ul class="side-bar-ul" style="width:100%%;">%s</ul></div>',
+    '<div class="list-group %s h-100" id="side-menu-div">%s</div>',
+    $backgroundColour,
     $children
 );

templates/layout/default.php

@@ -26,7 +26,13 @@ $cakeDescription = 'Cerebrate';
         <?= $this->fetch('title') ?>
     </title>
     <?= $this->Html->meta('icon') ?>
-    <?= $this->Html->css('bootstrap.css') ?>
+    <?php
+        if (empty($darkMode)) {
+            echo $this->Html->css('bootstrap.css');
+        } else {
+            echo $this->Html->css('darkly-bootstrap.css');
+        }
+    ?>
     <?= $this->Html->css('main.css') ?>
     <?= $this->Html->css('font-awesome') ?>
     <?= $this->Html->script('jquery-3.5.1.min.js') ?>
@@ -45,7 +51,7 @@ $cakeDescription = 'Cerebrate';
     <main role="main">
         <div class="container-fluid">
             <div class="row">
-                <div class="col-1 d-none d-xl-block bg-light sidebar" style="padding:0px;margin:0px;">
+                <div class="col-1 d-none d-xl-block sidebar p-0">
                     <?= $this->element('side_menu') ?>
                 </div>
                 <div role="main" class="col-xl-11 col-lg-12 ml-sm-auto pt-3 px-4">
@@ -56,9 +62,6 @@ $cakeDescription = 'Cerebrate';
             </div>
         </div>
     </main>
-    <footer class="footer">
-        <?= $this->element('footer') ?>
-    </footer>
     <div id="mainModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true"></div>
 </body>
 </html>