feat: enhance mobile menu with background and adjust icon positioning

Author: ParzivalPavlis

docs/assets/scss/menu.scss

@@ -51,14 +51,14 @@
 
     &__mobile-icon {
         position: fixed;
-        top: $header-first-nav-height;
+        top: 80px;
         display: flex;
         justify-content: center;
         align-items: center;
         width: 55px;
         height: $header-second-nav-height;
         left: 10px;
-        z-index: 32;
+        z-index: 36;
         transition: $transition;
 
         &::before {
@@ -83,6 +83,25 @@
         }
     }
 
+    &__mobile-bg {
+        position: fixed;
+        top: $header-first-nav-height + 1px;
+        left: -100%;
+        bottom: 0;
+        width: 100%;
+        z-index: 32;
+        background-color: rgba($color-deep-purple, 0.5);
+        transition: $transition;
+
+        @include mq(medium) {
+            display: none;
+        }
+    }
+    &__mobile-trigger:checked ~ &,
+    &__mobile-trigger:checked ~ &__mobile-bg {
+        left: 0;
+    }
+
     &__mobile-trigger:checked ~ & {
         left: 0;
     }
@@ -144,11 +163,10 @@
             position: relative;
             display: inline-block;
             flex: 1 1 auto;
-            margin: 2px 20px 2px 0; // orig values ->  8px 20px 3px 0;
+            margin: 8px 20px 3px 0;
             padding: 0 0 5px;
             max-width: 100%;
             font-size: 15px;
-            //font-family: "Lucida Console", "Courier New", monospace;
             line-height: 1.5;
 
             &,

docs/go.mod

@@ -4,7 +4,7 @@ go 1.20
 
 require (
 	github.com/FortAwesome/Font-Awesome v0.0.0-20230327165841-0698449d50f2 // indirect
-	github.com/gooddata/gooddata-docs-theme v0.0.0-20250724141246-310dd7684e82 // indirect
+	github.com/gooddata/gooddata-docs-theme v0.0.0-20250729102440-7a7e8c25d60b // indirect
 	github.com/google/docsy v0.7.1 // indirect
 	github.com/google/docsy/dependencies v0.7.1 // indirect
 	github.com/twbs/bootstrap v5.3.1+incompatible // indirect

docs/go.sum

@@ -28,6 +28,8 @@ github.com/gooddata/gooddata-docs-theme v0.0.0-20250724110042-81655c31f00b h1:w2
 github.com/gooddata/gooddata-docs-theme v0.0.0-20250724110042-81655c31f00b/go.mod h1:VVNP6Cmo+vC37RD3T/YHjyU/QdqftGY5z4G513LYyrA=
 github.com/gooddata/gooddata-docs-theme v0.0.0-20250724141246-310dd7684e82 h1:vetjOF/JcH99uBeMDV22JvRoPB+5rps03c72na5LMi4=
 github.com/gooddata/gooddata-docs-theme v0.0.0-20250724141246-310dd7684e82/go.mod h1:VVNP6Cmo+vC37RD3T/YHjyU/QdqftGY5z4G513LYyrA=
+github.com/gooddata/gooddata-docs-theme v0.0.0-20250729102440-7a7e8c25d60b h1:Tsi2R9UmdkJpEhdBPN870ybDU06RfEN2Hbq4+BiOzMA=
+github.com/gooddata/gooddata-docs-theme v0.0.0-20250729102440-7a7e8c25d60b/go.mod h1:VVNP6Cmo+vC37RD3T/YHjyU/QdqftGY5z4G513LYyrA=
 github.com/google/docsy v0.7.1 h1:DUriA7Nr3lJjNi9Ulev1SfiG1sUYmvyDeU4nTp7uDxY=
 github.com/google/docsy v0.7.1/go.mod h1:JCmE+c+izhE0Rvzv3y+AzHhz1KdwlA9Oj5YBMklJcfc=
 github.com/google/docsy/dependencies v0.7.1 h1:NbzYKJYMin2q50xdWSUzR2c9gCp7zR/XHDBcxklEcTQ=

docs/layouts/partials/sidebar-tree.html

@@ -1,6 +1,7 @@
 <!-- PETR: Menu assembled here -->
 <input type="checkbox" id="gd-docs-menu__mobile-trigger" class="gd-docs-menu__mobile-trigger" />
 <label for="gd-docs-menu__mobile-trigger" class="gd-docs-menu__mobile-icon"></label>
+<div class="gd-docs-menu__mobile-bg"></div>
 <nav class="gd-docs-menu init">
   {{ $additionalNavRoot := .Site.GetPage "/versions" }}
   {{ $root := .Site.GetPage "/docs" }}