Fix the navigation bar for smaller screen

qgis · Oct 17, 2024 · 01bc412 · 01bc412
1 parent 36816f7
commit 01bc412
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 17 deletions.
diff --git a/qgis-app/models/templatetags/resources_utils.py b/qgis-app/models/templatetags/resources_utils.py
@@ -97,6 +97,13 @@ def get_sustaining_members_section():
     except requests.RequestException as e:
         return f"Error: {e}"
 
+@register.simple_tag
+def get_navigation_menu():
+    """
+    Get the navigation menu from the settings
+    """
+    return settings.NAVIGATION_MENU
+
 @register.filter
 def get_string_tags(tags):
     """

diff --git a/qgis-app/settings_docker.py b/qgis-app/settings_docker.py
@@ -169,4 +169,63 @@
         'BUNDLE_DIR_NAME': 'bundles',
         'STATS_FILE': os.path.join(SITE_ROOT, 'webpack-stats.json'),
     }
-}
+}
+# Set the navigation menu
+NAVIGATION_MENU = [
+    {
+        'name': 'QGIS Hub Home',
+        'url': '/',
+        'icon': 'fa-house',
+        'order': 0,
+    },
+    {
+        'name': 'Hub',
+        'url': '#',
+        'icon': 'fa-cubes',
+        'order': 1,
+        'submenu': [
+            {
+                'name': 'Styles',
+                'url': '/styles',
+                'icon': 'fa-paint-brush',
+                'order': 1,
+            },
+            {
+                'name': 'Projects',
+                'url': '/geopackages',
+                'icon': 'fa-folder-open',
+                'order': 2,
+            },
+            {
+                'name': 'Models',
+                'url': '/models',
+                'icon': 'fa-cogs',
+                'order': 3,
+            },
+            {
+                'name': '3D Models',
+                'url': '/wavefronts',
+                'icon': 'fa-cube',
+                'order': 4,
+            },
+            {
+                'name': 'QLR',
+                'url': '/layerdefinitions',
+                'icon': 'fa-layer-group',
+                'order': 5,
+            }
+        ]
+    },
+    {
+        'name': 'API',
+        'url': '/api/v1/resources/',
+        'icon': 'fa-code',
+        'order': 2,
+    },
+    {
+        'name': 'Metrics',
+        'url': METABASE_DOWNLOAD_STATS_URL,
+        'icon': 'fa-chart-bar',  # Changed to a more accurate icon
+        'order': 4,
+    }
+]
diff --git a/qgis-app/static/style/scss/bulma/components/sidebar.sass b/qgis-app/static/style/scss/bulma/components/sidebar.sass
@@ -6,7 +6,7 @@
 .sidebar
     position: sticky
     overflow-y: scroll  // TODO: unnecessary scroll on mobile and FF windows
-    top: 100px
+    top: 125px
     max-height: calc(100vh - 175px)
     padding-bottom: 30px
     &::-webkit-scrollbar

diff --git a/qgis-app/templates/layouts/header.html b/qgis-app/templates/layouts/header.html
@@ -1,4 +1,4 @@
-{% load i18n simplemenu_tags static %}
+{% load i18n simplemenu_tags resources_utils static %}
 <div class="box mb-0 context-container" id="context">
     <div class="container">
         <nav class="navbar" role="navigation" aria-label="main navigation">
@@ -16,24 +16,44 @@
 
             <div id="pluginsNavbar" class="navbar-menu">
                 <div class="navbar-start">
-                    <a 
-                    class="navbar-item has-text-weight-semibold is-size-7" 
-                    href="/">
-                        <span>QGIS Hub Home</span>
-                    </a>
-
-                    {% get_namedmenu Hub as Hub %}
-                        {% for item in Hub %}
-                            <a 
-                            class="navbar-item has-text-weight-semibold is-size-7" 
-                            href="{{ item.page.url }}">
+                    {% get_navigation_menu as NAVIGATION_MENU %}
+                    {% for item in NAVIGATION_MENU %}
+                        {% if item.submenu %}
+                            <div class="navbar-item has-dropdown is-hoverable">
+                                <a class="navbar-link has-text-weight-semibold is-size-7">
+                                    <span class="icon">
+                                        <i class="fas {{ item.icon }}"></i>
+                                    </span>
+                                    <span>{{ item.name }}</span>
+                                </a>
+                                <div class="navbar-dropdown">
+                                    {% for subitem in item.submenu %}
+                                        <a class="navbar-item has-text-weight-semibold is-size-7" href="{{ subitem.url }}">
+                                            <span class="icon">
+                                                <i class="fas {{ subitem.icon }}"></i>
+                                            </span>
+                                            <span>{{ subitem.name }}</span>
+                                        </a>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        {% else %}
+                            <a class="navbar-item has-text-weight-semibold is-size-7" href="{{ item.url }}">
+                                <span class="icon">
+                                    <i class="fas {{ item.icon }}"></i>
+                                </span>
                                 <span>{{ item.name }}</span>
                             </a>
-                        {% endfor %}
+                        {% endif %}
+                    {% endfor %}
                     {% if user.is_authenticated and user.is_staff %}
                     <a class="navbar-item has-text-weight-semibold is-size-7" href="/admin">
-                        <i class="fas fa-tools mr-3"></i>
-                        {% trans "Admin" %}
+                        <span class="icon mr-2">
+                            <i class="fas fa-tools"></i>
+                        </span>
+                        <span>
+                            {% trans "Admin" %}
+                        </span>
                     </a>
                     {% endif %}