Fix header responsiveness

qgis-app/plugins/templates/plugins/plugin_list.html

@@ -84,7 +84,7 @@ <h2>{% if title %}{{title}}{% else %}{% trans "All plugins" %}{% endif %}</h2>
                 id="pmain{{object.pk}}"
                 onclick="window.location.href='{% url "plugin_detail" object.package_name %}';"
                 >
-                    <td>
+                    <td style="min-width: 46px;">
                     {% if object.icon and object.icon.file and object.icon|is_image_valid %}
                         {% with image_extension=object.icon.name|file_extension %}
                             {% if image_extension == 'svg' %}

qgis-app/static/style/scss/_variables.scss

@@ -49,3 +49,4 @@ $menuFontClass: is-size-6;
 
 // Radius for boxes
 $corner-radius: 0px;
+$navbar-divider-height: 1px;

qgis-app/static/style/scss/bulma/components/navbar.sass

@@ -239,9 +239,9 @@ a.navbar-item,
 .navbar-divider
   background-color: $navbar-divider-background-color
   border: none
-  display: none
+  // display: none
   height: $navbar-divider-height
-  margin: 0.5rem 0
+  margin: 0.5rem 1rem
 
 +until($navbar-breakpoint)
   .navbar > .container

qgis-app/static/style/scss/bulma/layout/hero.sass

@@ -15,8 +15,8 @@ $hero-colors: $colors !default
   display: flex
   flex-direction: column
   justify-content: space-between
-  padding-top: 100px
-  margin-top: -100px
+  padding-top: 40px
+  margin-top: -40px
   .navbar
     background: none
   .tabs
@@ -172,8 +172,8 @@ $hero-colors: $colors !default
   padding: $hero-body-padding
   +mobile
     height: 100vh
-    // min-height: 840px
-    // display: flex
+    min-height: 840px
+    display: flex
 
   .container 
     margin: auto

qgis-app/static/style/scss/style.scss

@@ -66,14 +66,15 @@ p {
 }
 
 
-@media screen and (max-width: 768px) {
-  .hero-body {
-    height: unset;
-  }
-}
+// @media screen and (max-width: 768px) {
+//   .hero-body {
+//     height: unset;
+//   }
+// }
 
 .navbar {
   background-color: unset;
+  min-height: 3em;
 }
 .navbar-brand, .navbar-tabs {
   min-height:unset;
@@ -164,15 +165,54 @@ p {
 
 .navbar-burger {
   color: $primary1-invert;
+  margin-left: unset;
+  width: 3em;
+  height: 3em ;
 }
 
 @media screen and (max-width: 1023px) {
   .navbar-menu {
-    background-color: #1D2027;
+    background-color: #002033;
   }
-  .navbar-menu.is-active {
+  .navbar-menu {
+    &.is-active {
       display: block;
       position: fixed;
+      height: 100dvh;
+      overflow: auto;
+      left: 0;
+      animation: slideInFromLeft 0.3s ease-out forwards;
+    }
+    &:not(.is-active) {
+      animation: slideOutToLeft 0.3s ease-out forwards;
+    }
+  }
+  @keyframes slideInFromLeft {
+      from {
+          transform: translateX(-100%);
+          opacity: 0;
+      }
+      to {
+          transform: translateX(0);
+          opacity: 1;
+      }
+  }
+
+  @keyframes slideOutToLeft {
+      from {
+          transform: translateX(0);
+          opacity: 1;
+      }
+      to {
+          transform: translateX(-100%);
+          opacity: 0;
+      }
+  }
+  .context-container .navbar-start a.navbar-item.is-active:hover, 
+  .context-container .navbar-start .navbar-link.is-active:hover, 
+  .context-container .navbar-start .navbar-item:hover {
+    background-color: unset !important;
+    color: white !important;
   }
 }