Add advanced links to side menu (CFM-267) (#93)

* Add "advanced" links to the menu bar side navigation (CFM-267) * Add aria-label to menu collapse toggle (CFM-267)
COmanage · Jun 13, 2023 · 907f70a · 907f70a
1 parent b195b17
commit 907f70a
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 13 deletions.
diff --git a/app/resources/locales/en_US/menu.po b/app/resources/locales/en_US/menu.po
@@ -27,12 +27,24 @@
 msgid "artifacts"
 msgstr "Available {0} Artifacts"
 
+msgid "co.artifacts"
+msgstr "Artifacts"
+
+msgid "co.artifacts.char"
+msgstr "A"
+
 msgid "co.Attributes"
 msgstr "Attributes"
 
 msgid "co.configuration"
 msgstr "Configuration"
 
+msgid "co.configuration.az"
+msgstr "A-Z Config"
+
+msgid "co.configuration.char"
+msgstr "C"
+
 msgid "co.configuration.panel.az"
 msgstr "A-Z Listing"
 
@@ -111,6 +123,12 @@ msgstr "My Population"
 msgid "co.people.population.desc"
 msgstr "Review and manage people in your collaboration (CO Person Records)"
 
+msgid "co.registries"
+msgstr "Registries"
+
+msgid "co.registries.char"
+msgstr "R"
+
 msgid "co.structure"
 msgstr "Structure"
 
@@ -141,9 +159,18 @@ msgstr "All Groups"
 msgid "co.switch"
 msgstr "Switch CO"
 
+msgid "menu.advanced"
+msgstr "Advanced Menu"
+
+msgid "menu.main"
+msgstr "Main Menu"
+
 msgid "menu.user"
 msgstr "User Menu"
 
+msgid "menu.toggle"
+msgstr "Toggle menu collapse button"
+
 msgid "registries"
 msgstr "Available {0} Registries"
 

diff --git a/app/templates/element/menuMain.php b/app/templates/element/menuMain.php
@@ -28,7 +28,7 @@
 // The following menu will only render if we have a user and CO (see default.ctp)
 ?>
 <div id="navigation-drawer">
-  <nav id="navigation" aria-label="main menu">
+  <nav id="navigation" aria-label="<?= __d('menu','menu.main') ?>">
     <ul id="main-menu">
       <?php
         if(!empty($vv_cur_co)) {
@@ -101,10 +101,60 @@
       ?>
     </ul>
   </nav>
-  <button id="co-menu-collapse">
-    <em class="material-icons-outlined co-menu-collapse-icon" aria-hidden="true">
-      expand_circle_down
-    </em>
-    <div class="co-menu-collapse-text">close</div>
-  </button>
+  <nav id="navigation-bottom" aria-label="<?= __d('menu','menu.advanced') ?>">
+    <ul id="advanced-menu">
+      <?php
+        if(!empty($vv_cur_co)) {
+          $menuItems = [
+            [
+              'permission' => 'configuration',
+              'label' => __d('menu', 'co.registries'),
+              'char' => __d('menu', 'co.registries.char'),
+              'controller' => 'dashboards',
+              'action' => 'registries'
+            ],
+            [
+              'permission' => 'configuration',
+              'label' => __d('menu', 'co.artifacts'),
+              'char' => __d('menu', 'co.artifacts.char'),
+              'controller' => 'dashboards',
+              'action' => 'artifacts'
+            ],
+            [
+              'permission' => 'configuration',
+              'label' => __d('menu', 'co.configuration.az'),
+              'char' => __d('menu', 'co.configuration.char'),
+              'controller' => 'dashboards',
+              'action' => 'configuration'
+            ]
+          ];
+
+          foreach($menuItems as $m) {
+            if(!isset($m['permission']) || $vv_menu_permissions[ $m['permission'] ]) {
+              $linkContent = '<span class="menu-title-char" aria-hidden="true">' . $m['char'] . '</span>'
+                . '<span class="menu-title">' . $m['label'] . '</span>';
+              print '<li>';
+              print $this->Html->link(
+                $linkContent,
+                ['plugin'       => null,
+                 'controller'   => $m['controller'],
+                 'action'       => $m['action'],
+                 '?'            => [
+                   'co_id' => $vv_cur_co->id
+                 ]],
+                ['escape' => false, 'title' => $m['label']]
+              );
+              print '</li>';
+            }
+          }
+        }
+      ?>
+    </ul>
+    <button id="co-menu-collapse" aria-label="<?= __d('menu','menu.toggle') ?>">
+      <em class="material-icons-outlined co-menu-collapse-icon" aria-hidden="true">
+        expand_circle_down
+      </em>
+      <div class="co-menu-collapse-text">close</div>
+    </button>
+  </nav>
 </div>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -415,6 +415,7 @@ ul.form-list li.alert-banner .co-alert {
   position: absolute;
   z-index: 20;
   border-right: 1px solid var(--cmg-color-lightgray-006);
+  border-bottom: 1px solid var(--cmg-color-lightgray-006);
   background-color: var(--cmg-color-white);
 }
 #navigation-drawer.visible {
@@ -551,6 +552,23 @@ ul.form-list li.alert-banner .co-alert {
 #main-menu .menu-panel-links .menu-panel-links-inner li {
   margin-bottom: 0;
 }
+#advanced-menu {
+  margin: 1em 0;
+  padding: 0;
+}
+#advanced-menu li {
+  list-style: none;
+  text-align: center;
+  font-size: 0.9em;
+}
+#advanced-menu li a {
+  display: block;
+  padding: 0.5em 0;
+  color: var(--cmg-color-gray-003);
+}
+#advanced-menu .menu-title-char {
+  display: none;
+}
 .menu-panel-links-desc {
   margin-top: 0.5em;
   font-size: 0.9em;

diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
@@ -218,6 +218,7 @@
     position: relative;
     top: unset;
     z-index: unset;
+    border-bottom: none;
   }
   #main-menu {
     text-align: center;
@@ -232,11 +233,13 @@
     font-size: 2.5rem;
     margin: 0;
   }
+  #advanced-menu {
+    margin-top: 2rem;
+  }
   #co-menu-collapse {
     display: flex;
     justify-content: center;
-    width: 100%;
-    margin-top: 3rem; 
+    width: 100%; 
     padding: 1rem;
     background-color: transparent;
     border: none;
@@ -256,6 +259,9 @@
   #navigation-drawer.closed .co-menu-collapse-icon {
     transform: rotate(-90deg);
   }
+  #navigation-drawer.closed #advanced-menu .menu-title-char {
+    display: inline-block;
+  }
   /* Menu Panels */
   .menu-panel {
     left: calc(100% + 1px);
@@ -434,17 +440,17 @@
 }
 
 /* SPECIAL */
-@media only screen and (min-height: 556px) {
-  #navigation-drawer.closed #co-menu-collapse {
+@media only screen and (min-height: 556px) and (min-width: 768px) {
+  #navigation-drawer.closed #navigation-bottom {
     position: fixed;
     bottom: 0;
     left: 2px;
     width: auto;
     margin-top: 0;
   }
 }
-@media only screen and (min-height: 728px) {
-  #co-menu-collapse {
+@media only screen and (min-height: 728px) and (min-width: 768px){
+  #navigation-bottom {
     position: fixed;
     bottom: 0;
     left: 8px;