chg: [layout] Added responsiveness

templates/element/layouts/header.php

@@ -1,8 +1,11 @@
 <div class="container-fluid">
     <div class="left-navbar">
-        <a class="navbar-brand" href="<?= $baseurl ?>">
+        <a class="navbar-brand d-sm-block d-none" href="<?= $baseurl ?>">
             <?= $this->Html->image('cerebrate-icon.svg', ['alt' => 'Cerebrate', 'height' => 50]) ?>
         </a>
+        <button class="navbar-toggler d-sm-none" type="button" data-toggle="collapse" data-target="#app-sidebar" aria-controls="app-sidebar" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
     </div>
     <div class="center-navbar">
         <?= $this->element('layouts/header/header-breadcrumb'); ?>

templates/element/layouts/header/header-breadcrumb.php

@@ -7,13 +7,12 @@
     $curentPath = "{$controller}{$action}";
     $navbarVariant = Configure::read('navbarVariant');
     $navbarIsDark = Configure::read('navbarIsDark');
-    // $pass = $this->request->getParam('pass');
 
     $breadcrumbLinks = '';
     $breadcrumbAction = '';
     $this->Breadcrumbs->setTemplates([
         'wrapper' => sprintf(
-            '<nav class="header-breadcrumb"{{attrs}}><ol class="">{{content}}</ol></nav>'
+            '<nav class="header-breadcrumb d-xl-block d-none"{{attrs}}><ol class="">{{content}}</ol></nav>'
         ),
         'item' => sprintf(
             '<li class="header-breadcrumb-item"{{attrs}}><a href="{{url}}"{{innerAttrs}}>{{title}}</a></li>{{separator}}',
@@ -71,7 +70,7 @@
     );
 ?>
 <?php if (!empty($breadcrumbLinks)): ?>
-    <div class="header-breadcrumb-children">
+    <div class="header-breadcrumb-children d-none d-md-flex">
         <?= $breadcrumbLinks ?>
     </div>
 <?php endif; ?>

templates/element/layouts/header/header-right.php

@@ -1,5 +1,5 @@
 <div class="d-flex">
-    <div class="global-search-container">
+    <div class="global-search-container d-md-block d-none">
         <input type="text" class="form-control d-inline-block" id="globalSearch" placeholder="<?= __('Search in Cerebrate') ?>">
         <i class="icon <?= $this->FontAwesome->getClass('search') ?>"></i>
     </div>

templates/element/layouts/sidebar.php

@@ -14,9 +14,7 @@
             </ul>
         </div>
     </div>
-    <span class="lock-sidebar align-self-center mt-auto w-100" onclick="$('.sidebar').toggleClass('expanded')">
-        <a type="button" class="btn btn-<?= empty($darkMode) ? 'light' : 'dark' ?> btn-sm w-100">
-            <!-- <i class="<?= $this->FontAwesome->getClass('angle-double-right') ?>"></i> -->
-        </a>
+    <span class="lock-sidebar align-self-center mt-auto w-100 d-none d-sm-block" onclick="$('.sidebar').toggleClass('expanded')">
+        <a type="button" class="btn btn-<?= empty($darkMode) ? 'light' : 'dark' ?> btn-sm w-100"></a>
     </span>
 </div>

templates/layout/default.php

@@ -60,7 +60,7 @@ Configure::write('sidebarVariant', $sidebarVariant);
         <header class="navbar top-navbar <?= sprintf('bg-%s navbar-%s', $navbarVariant, $navbarIsDark ? 'light' : 'dark') ?>">
             <?= $this->element('layouts/header') ?>
         </header>
-        <div class="sidebar <?= empty($darkMode) ? 'bg-light' : 'bg-dark' ?>">
+        <div id="app-sidebar" class="collapse d-sm-block sidebar <?= empty($darkMode) ? 'bg-light' : 'bg-dark' ?>">
             <?= $this->element('layouts/sidebar') ?>
         </div>
         <main role="main" class="content">

webroot/css/layout.css

@@ -11,6 +11,44 @@ body {
     margin-left: var(--sidebar-width-collapsed)
 }
 
+/* navbar-toggler breakpoint */
+@media (max-width: 576px) {
+    body {
+        margin-left: 0;
+        padding-top: 0;
+        display: flex;
+    }
+
+    header.top-navbar {
+        position: relative;
+    }
+
+    .sidebar {
+        width: 100% !important;
+        position: relative !important;
+        margin-top: 0 !important;
+        box-shadow: 0 2px 2px 0 rgb(0 0 0 / 16%), 0 2px 6px 0 rgb(0 0 0 / 12%);
+    }
+
+    ul.sidebar-elements > li > a.sidebar-link > span.text {
+        visibility: visible !important;
+    }
+
+    ul.sidebar-elements > li.category > span.category-label {
+        display: block !important;
+    }
+
+    .sidebar:hover:not(.expanded) ~ main.content:after {
+        bottom: unset !important;
+        right: unset !important;
+        opacity: 0;
+    }
+
+    .sidebar.expanded ~ main.content {
+        margin-left: 0 !important;
+    }
+}
+
 .main-wrapper {
     min-height: 100%;
     /* padding-top: var(--navbar-height); */
@@ -53,8 +91,7 @@ main.content {
 }
 
 .sidebar.expanded ~ main.content {
-    margin-left: var(--sidebar-width-expanded);
-   
+    margin-left: calc(var(--sidebar-width-expanded) - var(--sidebar-width-collapsed));
 }
 
 .sidebar ~ main.content:after {
@@ -88,7 +125,6 @@ main.content {
     display: flex;
     justify-content: end;
     flex: 1 0 auto;
-    padding-right: 20px;
     height: var(--navbar-height);
 }