revert sidebar css changes

Signed-off-by: John Philip <jphilip@spotify.com>

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

@@ -16,21 +16,10 @@
 
 import { RuleOptions } from './types';
 
-export default ({ theme, sidebar }: RuleOptions) => {
-  const sidebarWidth = sidebar.isPresent ? `${sidebar.width}px` : '0px';
-  const sidebarMargin = sidebar.isPresent ? '16rem' : '0';
+const SIDEBAR_WIDTH = '224px';
 
-  // Calculate the sidebar position for mobile layouts
-  let sidebarLeftPosition;
-  if (!sidebar.isPresent) {
-    sidebarLeftPosition = '-16rem';
-  } else if (sidebar.isPinned) {
-    sidebarLeftPosition = `calc(-16rem + ${sidebarWidth})`;
-  } else {
-    sidebarLeftPosition = 'calc(-16rem + 72px)';
-  }
+export default ({ theme, sidebar }: RuleOptions) => `
 
-  return `
 /*==================  Layout  ==================*/
 
 /* mkdocs material v9 compat */
@@ -134,12 +123,12 @@ export default ({ theme, sidebar }: RuleOptions) => {
 
 .md-content {
   max-width: calc(100% - 16rem * 2);
-  margin-left: ${sidebarMargin};
+  margin-left: 16rem;
   margin-bottom: 50px;
 }
 
 .md-content > .md-sidebar {
-  left: ${sidebarMargin};
+  left: 16rem;
 }
 
 .md-footer {
@@ -221,7 +210,11 @@ export default ({ theme, sidebar }: RuleOptions) => {
   .md-sidebar--primary {
     width: 16rem !important;
     z-index: 200;
-    left: ${sidebarLeftPosition} !important;
+    left: ${
+      sidebar.isPinned
+        ? `calc(-16rem + ${SIDEBAR_WIDTH})`
+        : 'calc(-16rem + 72px)'
+    } !important;
   }
   .md-sidebar--secondary:not([hidden]) {
     display: none;
@@ -277,4 +270,3 @@ export default ({ theme, sidebar }: RuleOptions) => {
   }
 }
 `;
-};

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

@@ -22,10 +22,6 @@ import { Theme } from '@material-ui/core/styles';
 type BackstageSidebar = {
   /** Tracks whether the user pinned the sidebar or not. */
   isPinned: boolean;
-  /** Tracks whether a Backstage sidebar is actually present in the DOM. */
-  isPresent: boolean;
-  /** The actual width of the sidebar in pixels, if present. */
-  width: number;
 };
 
 /**

plugins/techdocs/src/reader/transformers/styles/transformer.ts

@@ -20,26 +20,10 @@ import { useSidebarPinState } from '@backstage/core-components';
 import { Transformer } from '../transformer';
 import { rules } from './rules';
 
-const SIDEBAR_WIDTH = 224;
 /**
- * Enhanced sidebar state that detects presence through CSS environment.
+ * Sidebar pinned state to be used in computing style injections.
  */
-const useSidebar = () => {
-  const pinState = useSidebarPinState();
-
-  const hasSidebar = useMemo(
-    () =>
-      typeof window !== 'undefined' &&
-      Boolean(document.querySelector('[class*="BackstageSidebar"]')),
-    [],
-  );
-
-  return {
-    isPinned: pinState.isPinned,
-    isPresent: hasSidebar,
-    width: SIDEBAR_WIDTH,
-  };
-};
+const useSidebar = () => useSidebarPinState();
 
 /**
  * Process all rules and concatenate their definitions into a single style.