Merge branch 'menu_breakpoint_improvements_2' into revert-3866-revert-3860-menu_breakpoint_improvements

Author: Blargian

src/css/breakpoints.scss

@@ -1,6 +1,3 @@
-/*
-Needed because we cannot import css into scss and use var(--some-variable)
-*/
 $mobile-breakpoint: 996px;
 $tablet-breakpoint: 1024px;
 $laptop-breakpoint: 1330px;

src/theme/DocItem/Layout/index.js

@@ -11,7 +11,7 @@ import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
 import DocItemContent from '@theme/DocItem/Content';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import EditThisPage from '@theme/EditThisPage';
-import styles from './styles.module.css';
+import styles from './styles.module.scss';
 import Translate from "@docusaurus/Translate";
 import IconClose from "@theme/Icon/Close";
 import {useLocation} from "@docusaurus/router";

src/theme/DocItem/Layout/styles.module.css renamed to src/theme/DocItem/Layout/styles.module.scss

@@ -1,3 +1,4 @@
+@use '../../../css/breakpoints.scss' as breakpoints;
 
 .docItemContainer header + *,
 .docItemContainer article > *:first-child {
@@ -19,15 +20,15 @@
   justify-content: space-between;
 }
 
-@media (min-width: var(--mobile-breakpoint)) {
+@media (min-width: breakpoints.$mobile-breakpoint) {
   .docItemCol {
     max-width: 75% !important;
+    padding-bottom: 2rem;
   }
 }
 
 @media (max-width: var(--mobile-breakpoint)) {
   .docItemContainer {
-    padding-bottom: none;
   }
 }
 

src/theme/DocSidebar/Desktop/Content/index.js

@@ -7,7 +7,7 @@ import {
 } from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
 import DocSidebarItems from '@theme/DocSidebarItems';
-import styles from './styles.module.css';
+import styles from './styles.module.scss';
 export default function DocSidebarDesktopContent({path, sidebar, className}) {
   return (
     <nav
@@ -21,7 +21,7 @@ export default function DocSidebarDesktopContent({path, sidebar, className}) {
         styles.menu,
         className,
       )}
-      style={{paddingTop: '1.75rem', overflowY: 'auto'}}
+      style={{paddingTop: '1.75rem', marginBottom: '3.5rem', overflowY: 'auto'}}
     >
       <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
         <DocSidebarItems items={sidebar} activePath={path} level={1} />

src/theme/DocSidebar/Desktop/Content/styles.module.css renamed to src/theme/DocSidebar/Desktop/Content/styles.module.scss

@@ -1,4 +1,6 @@
-@media (min-width: var(--mobile-breakpoint)) {
+@use '../../../../css/breakpoints.scss' as breakpoints;
+
+@media (min-width: breakpoints.$mobile-breakpoint) {
   .menu {
     flex-grow: 1;
     padding: 0 1rem 0.5rem;

src/theme/DocSidebar/Desktop/index.js

@@ -4,7 +4,7 @@ import {useThemeConfig} from '@docusaurus/theme-common';
 import Logo from '@theme/Logo';
 import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
 import Content from '@theme/DocSidebar/Desktop/Content';
-import styles from './styles.module.css';
+import styles from './styles.module.scss';
 import SearchBar from "../../SearchBar";
 function DocSidebarDesktop({path, sidebar, onCollapse, isHidden, ...props}) {
   const {
@@ -45,7 +45,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden, ...props}) {
         styles.sidebar,
         hideOnScroll && styles.sidebarWithHideableNavbar,
         isHidden && styles.sidebarHidden,
-        'padding-top--md',
+        'padding-top--md'
       )}
       >
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}

src/theme/DocSidebar/Desktop/styles.module.css renamed to src/theme/DocSidebar/Desktop/styles.module.scss

@@ -1,6 +1,7 @@
-@import '../../../css/breakpoints.css';
+@use '../../../css/breakpoints.scss' as breakpoints;
+
+@media (min-width: breakpoints.$mobile-breakpoint) {
 
-@media (min-width: var(--mobile-breakpoint)) {
   .sidebar {
     display: flex;
     flex-direction: column;