From c2e7414318807dc75064bd2bf9fb2faaa71370de Mon Sep 17 00:00:00 2001
From: mokaddem <sami.mokaddem@circl.lu>
Date: Mon, 13 Sep 2021 11:43:42 +0200
Subject: [PATCH] chg: [layout] Modern application UI - WiP

---
 .../IndexTable/index_table.php                |  2 +
 webroot/css/layout.css                        | 51 +++++++++++++++++--
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/templates/element/genericElements/IndexTable/index_table.php b/templates/element/genericElements/IndexTable/index_table.php
index 221b70a..7e9b274 100644
--- a/templates/element/genericElements/IndexTable/index_table.php
+++ b/templates/element/genericElements/IndexTable/index_table.php
@@ -27,6 +27,7 @@
             empty($data['description']) ? '' : h($data['description'])
         );
     }
+    echo '<div class="sub-container">';
     if (!empty($data['html'])) {
         echo sprintf('<div>%s</div>', $data['html']);
     }
@@ -121,6 +122,7 @@
         echo $this->element('/genericElements/IndexTable/pagination_links');
     }
     echo '</div>';
+    echo '</div>';
 ?>
 <script type="text/javascript">
     $(document).ready(function() {
diff --git a/webroot/css/layout.css b/webroot/css/layout.css
index 0004260..9648051 100644
--- a/webroot/css/layout.css
+++ b/webroot/css/layout.css
@@ -8,7 +8,17 @@
 
 body {
     padding-top: var(--navbar-height);
-    margin-left: var(--sidebar-width-collapsed)
+    margin-left: var(--sidebar-width-collapsed);
+    background-color: #f1f2f4;
+}
+
+.sub-container {
+    background-color: white;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    margin-top: 0.75rem;
+    margin-bottom: 1rem;
+    box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
 }
 
 /* navbar-toggler breakpoint */
@@ -233,6 +243,7 @@ li.parent {
 }
 
 ul.sidebar-elements li > a.sidebar-link {
+    position: relative;
     display: block;
     padding: 0 20px;
     line-height: 35px;
@@ -246,6 +257,16 @@ ul.sidebar-elements li > a.sidebar-link.active {
     background-color: #ebebeb;
 }
 
+ul.sidebar-elements li > a.sidebar-link.active::after {
+    content: ' ';
+    width: 3px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--cerebrate-color);
+    position: absolute;
+}
+
 .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
     background-color: #ebebeb;
 }
@@ -255,6 +276,21 @@ ul.sidebar-elements li > a.sidebar-link.active {
     background-color: unset;
 }
 
+.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child::after {
+    content: ' ';
+    width: 3px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--cerebrate-color);
+    position: absolute;
+}
+
+.sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child::after,
+.sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child::after {
+    content: unset;
+}
+
 ul.sidebar-elements > li > a.sidebar-link:hover {
     background-color: #f0f0f0;
 }
@@ -357,15 +393,24 @@ ul.sidebar-elements > li.category {
 
 .sidebar.expanded ul.sidebar-elements > li.category > span.category-label,
 .sidebar:hover ul.sidebar-elements > li.category > span.category-label {
-    display: flex;
+    opacity: 1;
+    position: relative;
+    height: auto;
+    width: auto;
 }
 
 ul.sidebar-elements > li.category > span.category-label {
-    display: none;
+    display: flex;
+    position: absolute;
+    height: 0;
+    width: 0;
+    overflow: hidden;
     text-transform: uppercase;
     font-size: 0.75rem;
     font-weight: 600;
     margin-right: 15px;
+    opacity: 0;
+    transition: opacity 0.2s linear;
 }
 
 ul.sidebar-elements > li.category > span.category-divider {