feat(techdocs): use more of the available space for navigation sidebar (#26819)

Signed-off-by: Thomas Cardonne <thomas.cardonne@adevinta.com>

.changeset/thirty-pianos-mix.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-techdocs-module-addons-contrib': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Use more of the available space for the navigation sidebar.

plugins/techdocs-module-addons-contrib/src/ExpandableNavigation/ExpandableNavigation.tsx

@@ -30,8 +30,9 @@ const EXPANDABLE_NAVIGATION_LOCAL_STORAGE =
 const StyledButton = withStyles({
   root: {
     position: 'absolute',
-    left: '220px',
+    left: '13.7rem', // Sidebar inner width (15.1em) minus the different margins/paddings
     top: '19px',
+    zIndex: 2,
     padding: 0,
     minWidth: 0,
   },

plugins/techdocs/src/reader/transformers/styles/rules/layout.ts

@@ -86,9 +86,14 @@ export default ({ theme, sidebar }: RuleOptions) => `
   scrollbar-width: thin;
 }
 .md-sidebar .md-sidebar__scrollwrap {
-  width: calc(12.1rem);
+  width: calc(16rem);
   overflow-y: hidden;
 }
+@supports selector(::-webkit-scrollbar) {
+  [dir=ltr] .md-sidebar__inner {
+      padding-right: calc(100% - 15.1rem);
+  }
+}
 .md-sidebar--secondary {
   right: ${theme.spacing(3)}px;
 }
@@ -202,18 +207,22 @@ export default ({ theme, sidebar }: RuleOptions) => `
     height: 100%;
   }
   .md-sidebar--primary {
-    width: 12.1rem !important;
+    width: 16rem !important;
     z-index: 200;
     left: ${
       sidebar.isPinned
-        ? `calc(-12.1rem + ${SIDEBAR_WIDTH})`
-        : 'calc(-12.1rem + 72px)'
+        ? `calc(-16rem + ${SIDEBAR_WIDTH})`
+        : 'calc(-16rem + 72px)'
     } !important;
   }
   .md-sidebar--secondary:not([hidden]) {
     display: none;
   }
 
+  [data-md-toggle=drawer]:checked~.md-container .md-sidebar--primary {
+    transform: translateX(16rem);
+  }
+
   .md-content {
     max-width: 100%;
     margin-left: 0;
@@ -241,8 +250,8 @@ export default ({ theme, sidebar }: RuleOptions) => `
 
 @media screen and (max-width: 600px) {
   .md-sidebar--primary {
-    left: -12.1rem !important;
-    width: 12.1rem;
+    left: -16rem !important;
+    width: 16rem;
   }
 }