[TASK] Improve nested links readability in main menu

TYPO3-Documentation · May 28, 2024 · 8b720b8 · 8b720b8
1 parent 9a7e80f
commit 8b720b8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git a/packages/typo3-docs-theme/assets/sass/layout/navigation/_main_navigation.scss b/packages/typo3-docs-theme/assets/sass/layout/navigation/_main_navigation.scss
@@ -38,25 +38,32 @@
         padding: calc(#{$spacer} / 4) 0;
         padding-right: 1.5em;
         text-decoration: none;
-	&:hover {
-	    text-decoration: underline;
-	}
+        &:hover {
+            text-decoration: underline;
+        }
     }
     ul {
-        padding-left: $spacer;
+        padding-left: calc(#{$spacer} / 2);
         list-style-type: none;
     }
+    > ul {
+        > li {
+            &.active {
+                border-left: 1px solid rgba(0, 0, 0, .15);
+                border-radius: 0;
+            }
+        }
+    }
     li {
         border-radius: $border-radius;
         overflow: hidden;
-	padding-left: calc(#{$spacer} / 2) ;
-	&.active {
-	    border-left: 1px solid rgba(0, 0, 0, .15);
-	    border-radius: 0;
-	}
-	&.current {
-	    border-left: none;
-	}
+        padding-left: calc(#{$spacer} / 2) ;
+        &.current {
+            border-left: none;
+        }
+        @include media-breakpoint-up(lg) {
+            font-size: 1rem;
+        }
     }
     .toctree-expand {
         position: absolute;

diff --git a/packages/typo3-docs-theme/resources/public/css/theme.css b/packages/typo3-docs-theme/resources/public/css/theme.css
@@ -25371,21 +25371,26 @@ dl.field-list > dt:after {
   text-decoration: underline;
 }
 .main_menu ul {
-  padding-left: 1rem;
+  padding-left: calc(1rem / 2);
   list-style-type: none;
 }
+.main_menu > ul > li.active {
+  border-left: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0;
+}
 .main_menu li {
   border-radius: 0.375rem;
   overflow: hidden;
   padding-left: calc(1rem / 2);
 }
-.main_menu li.active {
-  border-left: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 0;
-}
 .main_menu li.current {
   border-left: none;
 }
+@media (min-width: 992px) {
+  .main_menu li {
+    font-size: 1rem;
+  }
+}
 .main_menu .toctree-expand {
   position: absolute;
   display: block;