Improve brand navbar style

Author: dsuren1

geonode_mapstore_client/client/themes/geonode/less/_brand-navbar.less

@@ -28,14 +28,41 @@
     margin-bottom: 0;
 }
 
-@media (max-width: 748px) {
-    #gn-brand-navbar .gn-menu-content-center > * {
-        display: none;
-    }
+@media (max-width: @screen-sm) {
     #gn-brand-navbar-bottom {
         display: flex;
+        gap: 0.5rem;
+        align-items: center;
         width: calc(100% - 16px);
         margin: 8px;
+        .gn-search-bar {
+            max-width: 100%;
+        }
+        .gn-brand-navbar-menu {
+            &.dropdown {
+                display: none;
+            }
+        }
+    }
+}
+
+@media (max-width: @screen-xs) {
+    #gn-brand-navbar {
+        .gn-brand-navbar-menu {
+            visibility: hidden;
+        }
+    }
+    #gn-brand-navbar-bottom {
+        .gn-brand-navbar-menu {
+            &.dropdown {
+                display: block;
+                .dropdown-menu {
+                    li > a {
+                        text-align: left;
+                    }
+                }
+            }
+        }
     }
 }
 

geonode_mapstore_client/client/themes/geonode/less/_search-bar.less

@@ -36,7 +36,7 @@
     border-bottom-width: 1px;
     border-bottom-style: solid;
     min-width: 100px;
-    max-width: 200px;
+    max-width: 300px;
     .btn {
         border: transparent;
     }
@@ -83,8 +83,13 @@
 
 }
 
-@media screen and (min-width: 768px) {
-    .gn-search-bar {
-        min-width: 500px;
+@media screen and (min-width: @screen-md) {
+    #gn-search-bar {
+        display: block;
+    }
+}
+@media screen and (max-width: @screen-sm) {
+    #gn-search-bar {
+        display: none;
     }
 }

geonode_mapstore_client/static/mapstore/configs/localConfig.json

@@ -3175,7 +3175,7 @@
                 "name": "ResourcesFiltersForm",
                 "cfg": {
                     "resourcesGridId": "catalog",
-                    "headerNodeSelector": "#gn-brand-navbar",
+                    "headerNodeSelector": ".gn-main-header",
                     "footerNodeSelector": ".gn-footer",
                     "fields": [
                         {
@@ -3317,6 +3317,7 @@
             {
                 "name": "ResourceDetails",
                 "cfg": {
+                    "headerNodeSelector": ".gn-main-header",
                     "enableFilters": true,
                     "enablePreview": true,
                     "editingOverlay": true

geonode_mapstore_client/templates/geonode-mapstore-client/snippets/brand_navbar.html

@@ -16,7 +16,7 @@
             {% endif %}
         </a>
         {% endblock %}
-        <ul class="ms-flex-fill ms-flex-box _flex _flex-gap-sm _flex-center-v">
+        <ul class="ms-flex-fill ms-flex-box _flex _flex-gap-sm _flex-center-v gn-brand-navbar-menu">
             {% for menu_item in BRAND_NAVBAR_MENU %}
                 {% include './menu_item.html' with menu_item=menu_item %}
             {% endfor %}
@@ -38,6 +38,26 @@
 </nav>
 <div id="gn-brand-navbar-bottom">
     {% block bottom_menu %}
+        <div class="gn-brand-navbar-menu dropdown">
+            <button
+                class="btn btn-primary dropdown-toggle"
+                type="button"
+                id="gn-brand-navbar-menu-btn"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="true"
+            >
+                <i class="fa fa-bars"> </i>
+            </button>
+            <ul
+                class="dropdown-menu"
+                aria-labelledby="gn-brand-navbar-dropdown-menu"
+            >
+                {% for menu_item in BRAND_NAVBAR_MENU %}
+                    {% include './menu_item.html' with menu_item=menu_item align_right=True %}
+                {% endfor %}
+            </ul>
+        </div>
         {% include './search_bar.html' with search_bar_id='gn-search-bar-bottom' %}
     {% endblock %}
 </div>

geonode_mapstore_client/templates/geonode-mapstore-client/snippets/header.html

@@ -42,7 +42,7 @@
                 }
             }
         }
-        const menuLinks = document.querySelectorAll('.gn-main-menu > li a');
+        const menuLinks = document.querySelectorAll('.gn-brand-navbar-menu > li a');
         for (var i = 0; i < menuLinks.length; i++) {
             const menuLink = menuLinks[i];
             const href = menuLink.getAttribute('href');