Fixing header menu styling and console error (#886)

* Fixing header menu styling and console error

* Fixing html error

* Fixing menu text

Author: ahmad-shahid

public/gcweb/cdtsfixes.css

@@ -144,25 +144,32 @@
     padding-top: 6px;
     font-size: 23px;
     margin-left: 20px;
+    margin-right: 15px;
     vertical-align: sub;
 }
 
 .cdts-menu-label{
     display: inline-block !important;
-    width: 154px;
+    width: 260px;
     text-align: initial !important;
     font-size: 18px;
     line-height: 20px;
     color: #26374A;
     font-weight: bold;
-    margin-left: 15px;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
+    padding: 0 !important;
+    margin: 8px 0 8px 0;
 }
 .cdts-menu-label:hover, .cdts-menu-label:visited{
     color: #26374A;
 }
 
+.cdts-menu-chevron{
+    float: right;
+    margin-top: 12px;
+    margin-right: 20px;
+    font-size: 12px;
+}
+
 .cdts-menu-chevron-up{
     display: none;
 }
@@ -209,6 +216,10 @@
 
 .wb-menu .sm-open .cdts-menu-chevron-up{
     display: inline;
+    float: right;
+    margin-top: 12px;
+    margin-right: 20px;
+    font-size: 12px;
 }
 
 .wb-menu .sm-open .cdts-menu-chevron{
@@ -237,13 +248,11 @@
 
     .cdts-menu-chevron-up{
         float: right;
-        padding-top: 18px;
         margin-right: 20px;
     }
 
     .cdts-menu-chevron{
         float: right;
-        padding-top: 18px;
         margin-right: 20px;
     }
 
@@ -252,13 +261,13 @@
     }
 
     .cdts-menu-label{
-        width: 76%;
+        width: 100%;
     }
 }
 
 @media (max-width: 480px) {
     .cdts-menu-label{
-        width: 65%;
+        width: 100%;
     }
 }
 

src/gcweb/appTop.ejs

@@ -111,16 +111,17 @@
                     <a class="app-name" href="<%- item.href %>"><%= item.text%></a>
                 <%_ } -%>
                 </section>
-                <%_ if (pr.headerMenu != null) {
+                <%_ if (pr.headerMenu != null && pr.menuPath == null && pr.menuLinks == null) {
                     const item=pr.headerMenu[0]; -%>
-                    <nav id="cdts-header-menu" class="cdts-menu-rectangle wb-menu" typeof="SiteNavigationElement" aria-labelledby="appNavMenu">
+                    <div class="cdts-hidden" aria-hidden="true">
+                        <ul><li id="wb-glb-mn"><a href="#mb-pnl"></a><h2><^- msg('Menu') ^></h2></li></ul>
+                        <div id="mb-pnl"></div>
+                    </div>
+                    <nav id="cdts-header-menu" data-trgt="mb-pnl" class="cdts-menu-rectangle wb-menu" typeof="SiteNavigationElement" aria-labelledby="appNavMenu">
                         <h2 class="wb-inv" id="appNavMenu"><^- msg('Header navigation menu') ^></h2>
                         <ul class="list-inline menu" role="menubar">
                             <li role="none" class="cdts-menu-list-width">
-                            <span class="glyphicon glyphicon-user cdts-menu-icon"></span>
-                            <a href="#" class="cdts-menu-label item" role="menuitem" aria-haspopup="true"><%= (pr.headerMenu.text == null)? ' <^- msg('Account') ^>': pr.headerMenu.text %></a>
-                            <span class="glyphicon glyphicon-chevron-down cdts-menu-chevron"></span>
-                            <span class="glyphicon glyphicon-chevron-up cdts-menu-chevron-up"></span>
+                            <a href="#" class="cdts-menu-label item" role="menuitem" aria-haspopup="true"><span class="glyphicon glyphicon-user cdts-menu-icon"></span><%= (pr.headerMenu.text == null)? ' <^- msg('Account') ^>': pr.headerMenu.text %><span class="glyphicon glyphicon-chevron-down cdts-menu-chevron"></span><span class="glyphicon glyphicon-chevron-up cdts-menu-chevron-up"></span></a>
                             <%_ if (pr.headerMenu.links != null) { -%>
                                 <ul class="sm list-unstyled cdts-menu-list" role="menu">
                                     <%_ for (var hiddenIndex=0; hiddenIndex<pr.headerMenu.links.length; hiddenIndex++) {

src/gcweb/wet-messages.en.json

@@ -97,6 +97,10 @@
         "source": "Name of Web application",
         "target": null
     },
+    "57f5f5efbc5990f5230aa95359042338b856707b": {
+        "source": "Menu",
+        "target": null
+    },
     "c6dc33865459206f14516ae374ff8dee59ab2595": {
         "source": "Header navigation menu",
         "target": null
@@ -125,10 +129,6 @@
         "source": "and search",
         "target": null
     },
-    "57f5f5efbc5990f5230aa95359042338b856707b": {
-        "source": "Menu",
-        "target": null
-    },
     "11b5a68a90c1de36a7f61d1b289fa4a9e547c19a": {
         "source": "Main navigation menu",
         "target": null