Merge pull request #3860 from Blargian/menu_breakpoint_improvements

Blargian · web-flow · commit 6d4443c7243a · 2025-05-30T23:42:56.000+02:00
Refactor of styling
diff --git a/src/components/ColorModeToggler/index.jsx b/src/components/ColorModeToggler/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
 
 export default function ColorModeToggle({className = ''}) {
   const disabled = useThemeConfig().colorMode.disableSwitch;
@@ -25,7 +25,7 @@ export default function ColorModeToggle({className = ''}) {
           <path d="M8.7227 0.724664C8.7227 0.330045 8.39191 0 8.0036 0C7.60809 0 7.2773 0.330045 7.2773 0.724664V2.18834C7.2773 2.57578 7.60809 2.90583 8.0036 2.90583C8.39191 2.90583 8.7227 2.57578 8.7227 2.18834V0.724664ZM11.5991 3.4009C11.3258 3.67354 11.3258 4.13274 11.6063 4.41256C11.8796 4.6852 12.347 4.69238 12.6274 4.40538L13.6629 3.3722C13.9434 3.09238 13.9362 2.62601 13.6629 2.34619C13.3897 2.07354 12.9222 2.08072 12.649 2.35336L11.5991 3.4009ZM3.37258 4.40538C3.64584 4.6852 4.11326 4.6852 4.38652 4.41256C4.66697 4.14709 4.66697 3.66637 4.4009 3.4009L3.3582 2.35336C3.09213 2.08789 2.61753 2.07354 2.34427 2.34619C2.07101 2.62601 2.06382 3.09238 2.33708 3.36502L3.37258 4.40538ZM7.9964 11.774C10.0602 11.774 11.7717 10.0664 11.7717 8C11.7717 5.93363 10.0602 4.22601 7.9964 4.22601C5.93258 4.22601 4.22112 5.93363 4.22112 8C4.22112 10.0664 5.93258 11.774 7.9964 11.774ZM7.9964 10.4395C6.65888 10.4395 5.55146 9.33453 5.55146 8C5.55146 6.66547 6.65888 5.56054 7.9964 5.56054C9.33393 5.56054 10.4413 6.66547 10.4413 8C10.4413 9.33453 9.33393 10.4395 7.9964 10.4395ZM15.2809 8.71749C15.6692 8.71749 16 8.38744 16 8C16 7.60538 15.6692 7.28251 15.2809 7.28251H13.8211C13.4328 7.28251 13.102 7.60538 13.102 8C13.102 8.38744 13.4328 8.71749 13.8211 8.71749H15.2809ZM0.719101 7.28251C0.330787 7.28251 0 7.60538 0 8C0 8.38744 0.330787 8.71749 0.719101 8.71749H2.17888C2.57438 8.71749 2.90517 8.38744 2.90517 8C2.90517 7.60538 2.57438 7.28251 2.17888 7.28251H0.719101ZM12.6202 11.5946C12.347 11.322 11.8796 11.322 11.5991 11.5946C11.3258 11.8744 11.3258 12.3336 11.6063 12.6135L12.649 13.6538C12.9294 13.9265 13.3897 13.9193 13.6701 13.6395C13.9434 13.3668 13.9434 12.9076 13.6629 12.6278L12.6202 11.5946ZM2.33708 12.6206C2.05663 12.9004 2.05663 13.3668 2.3227 13.6395C2.60315 13.9121 3.07056 13.9193 3.34382 13.6466L4.38652 12.6135C4.66697 12.3336 4.66697 11.8744 4.4009 11.6018C4.12045 11.322 3.65303 11.322 3.37258 11.5946L2.33708 12.6206ZM8.7227 13.8117C8.7227 13.4242 8.39191 13.0942 8.0036 13.0942C7.60809 13.0942 7.2773 13.4242 7.2773 13.8117V15.2753C7.2773 15.6628 7.60809 16 8.0036 16C8.39191 16 8.7227 15.6628 8.7227 15.2753V13.8117Z" fill="currentColor"/>
         </svg>
       )}
-      <div><span>{`${colorMode}`}</span><span className={styles.themeModeText}> Mode</span></div>
+      <div><span>{`${colorMode}`}</span></div>
     </button>
   );
 }
diff --git a/src/components/ColorModeToggler/styles.module.scss b/src/components/ColorModeToggler/styles.module.scss
@@ -1,3 +1,5 @@
+@use '../../css/breakpoints.scss' as breakpoints;
+
 .colorModeButton {
   display: flex;
   align-items: center;
@@ -19,20 +21,5 @@
   white-space: nowrap;
 }
 
-@media (max-width: 1100px) {
-  .themeModeText {
-    display: none;
-  }
-}
-
-@media (max-width: 997px) {
-  .themeModeText {
-    display: block;
-  }
 
-  .colorModeWrapper {
-    display: flex;
-    gap: 0.3rem;
-  }
-}
 
diff --git a/src/components/DocsCategoryDropdown/styles.module.css b/src/components/DocsCategoryDropdown/styles.module.css
@@ -1,3 +1,5 @@
+@import '../../css/breakpoints.css';
+
 .docsNavDropdownContainer {
   padding: 8px;
   border-radius: 10px;
@@ -85,7 +87,7 @@
   transform: translateY(30px);
 }
 
-@media (max-width: 768px) {
+@media (max-width: var(--mobile-breakpoint)) {
   .docsNavDropdownMenu {
     position: absolute;
     min-width: 95%;
@@ -201,13 +203,13 @@
   font-size: 0.75rem;
 }
 
-@media screen and (max-width: 1100px) {
+@media screen and (max-width: var(--laptop-breakpoint)) {
   .docsNavDropdownContainer {
     padding: 0px;
   }
 
   [data-theme="dark"] .docsNavDropdownContainer {
-    background-color: #201c1c;
+
   }
 
   [data-theme="light"] .docsNavDropdownContainer {
diff --git a/src/components/MobileSideBarMenu/Content.jsx b/src/components/MobileSideBarMenu/Content.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
 import IconClose from '@theme/Icon/Close';
 import SearchBar from "@theme/SearchBar";
 import clsx from 'clsx'
diff --git a/src/components/MobileSideBarMenu/Hamburger.jsx b/src/components/MobileSideBarMenu/Hamburger.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
 
 const Hamburger = ({onClick}) =>
 {
diff --git a/src/components/MobileSideBarMenu/index.jsx b/src/components/MobileSideBarMenu/index.jsx
@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import Hamburger from "./Hamburger";
 import MobileSideBarMenuContents from './Content';
-import styles from './styles.module.css';
+import styles from './styles.module.scss';
 
 const MobileSideBarMenu = ({sidebar}) => {
   const [currentMenuState, setMenuState] = useState(false);
diff --git a/src/components/MobileSideBarMenu/styles.module.scss b/src/components/MobileSideBarMenu/styles.module.scss
@@ -1,5 +1,7 @@
+@use '../../css/breakpoints.scss' as breakpoints;
+
 .docsNavBurger {
-    display: none;
+    display: flex;
 }
 
 .docsMobileMenu {
@@ -68,6 +70,7 @@
     margin-top: 1em;
     margin-bottom: 2em;
 }
+
 .docsMobileMenu_header{
     margin-top: 4rem;
     margin-bottom: 1rem;
@@ -77,12 +80,8 @@
     justify-content: space-between;
 }
 
-@media (max-width: 1400px) {
-
-}
-
-@media (max-width: 996px) {
+@media (min-width: breakpoints.$laptop-breakpoint) {
     .docsNavBurger {
-        display: flex;
+        display: none;
     }
 }
diff --git a/src/components/Navigation/styles.scss b/src/components/Navigation/styles.scss
@@ -1,4 +1,6 @@
-$menu-breakpoint: 997px;
+@use '../../css/breakpoints.scss' as breakpoints;
+
+$menu-breakpoint: breakpoints.$laptop-breakpoint;
 
 :root {
   --ch-nav-v2-border-color: #dfdfdf;
diff --git a/src/css/breakpoints.css b/src/css/breakpoints.css
@@ -0,0 +1,10 @@
+/* Breakpoints for responsive design
+ * These variables can be used in media queries to apply styles at different screen sizes.
+ */
+
+:root {
+  --mobile-breakpoint: 996px;
+  --tablet-breakpoint: 1024px;
+  --laptop-breakpoint: 1330px;
+  --large-desktop-breakpoint: 1440px;
+}
diff --git a/src/css/breakpoints.scss b/src/css/breakpoints.scss
@@ -0,0 +1,7 @@
+/*
+Needed because we cannot import css into scss and use var(--some-variable)
+*/
+$mobile-breakpoint: 996px;
+$tablet-breakpoint: 1024px;
+$laptop-breakpoint: 1330px;
+$large-desktop-breakpoint: 1440px;
diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -962,7 +962,7 @@ prism-code {
   }
 }
 
-@media screen and (max-width: 1100px) {
+@media screen and (max-width: var(--laptop-breakpoint)) {
   .dropdown {
     padding-right: 2px;
     padding-left: 20px;
diff --git a/src/css/home.scss b/src/css/home.scss
@@ -271,5 +271,4 @@ img.home-svg svg path {
   flex-direction: column;
   max-width: 1000px;
   justify-self: center;
-}
-
+}
diff --git a/src/theme/BlogSidebar/Desktop/styles.module.css b/src/theme/BlogSidebar/Desktop/styles.module.css
@@ -49,7 +49,7 @@
   margin-bottom: 1.75rem;
 }
 
-@media (max-width: 996px) {
+@media (max-width: var(--mobile-breakpoint)) {
   .sidebar {
     display: none;
   }
diff --git a/src/theme/DocItem/Footer/styles.module.css b/src/theme/DocItem/Footer/styles.module.css
@@ -4,7 +4,7 @@
   font-size: smaller;
 }
 
-@media (min-width: 997px) {
+@media (min-width: var(--mobile-breakpoint)) {
   .lastUpdated {
     text-align: right;
   }
diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css
@@ -19,13 +19,13 @@
   justify-content: space-between;
 }
 
-@media (min-width: 997px) {
+@media (min-width: var(--mobile-breakpoint)) {
   .docItemCol {
     max-width: 75% !important;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: var(--mobile-breakpoint)) {
   .docItemContainer {
     padding-bottom: none;
   }
diff --git a/src/theme/DocRoot/Layout/Main/styles.module.css b/src/theme/DocRoot/Layout/Main/styles.module.css
@@ -5,7 +5,7 @@
   padding-bottom: 2rem;
 }
 
-@media (min-width: 997px) {
+@media (min-width: var(--mobile-breakpoint)) {
   .docMainContainer {
     flex-grow: 1;
     max-width: calc(100% - var(--doc-sidebar-width));
diff --git a/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css b/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css
@@ -1,3 +1,5 @@
+@import '../../../../css/breakpoints.css';
+
 :root {
   --docusaurus-collapse-button-bg: transparent;
   --docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 10%);
@@ -8,7 +10,7 @@
   --docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%);
 }
 
-@media (min-width: 997px) {
+@media (min-width: var(--mobile-breakpoint)) {
   .collapseSidebarButton {
     display: block !important;
     background-color: var(--docusaurus-collapse-button-bg);
diff --git a/src/theme/DocSidebar/Desktop/Content/styles.module.css b/src/theme/DocSidebar/Desktop/Content/styles.module.css
@@ -1,4 +1,4 @@
-@media (min-width: 997px) {
+@media (min-width: var(--mobile-breakpoint)) {
   .menu {
     flex-grow: 1;
     padding: 0 1rem 0.5rem;
diff --git a/src/theme/DocSidebar/Desktop/styles.module.css b/src/theme/DocSidebar/Desktop/styles.module.css
@@ -1,4 +1,6 @@
-@media (min-width: 997px) {
+@import '../../../css/breakpoints.css';
+
+@media (min-width: var(--mobile-breakpoint)) {
   .sidebar {
     display: flex;
     flex-direction: column;
diff --git a/src/theme/Footer/Layout/index.js b/src/theme/Footer/Layout/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import ColorModeToggler from '@site/src/components/ColorModeToggler'
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
 
 export default function FooterLayout({style, links, logo, copyright}) {
   return (
diff --git a/src/theme/Footer/Layout/styles.module.scss b/src/theme/Footer/Layout/styles.module.scss
@@ -1,6 +1,8 @@
+@use '../../../css/breakpoints.scss' as breakpoints;
+
 .footer {
+  display: none;
   border: 1px solid var(--click-color-stroke);
-  display: flex;
   flex-direction: column-reverse;
   align-items: center;
   gap: 16px;
@@ -25,8 +27,9 @@
   width: 2.5rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: breakpoints.$tablet-breakpoint) {
   .footer {
+    display: flex;
     /* padding: 32px 40px; */
     padding: 0;
     flex-direction: row;
@@ -40,10 +43,6 @@
     justify-content: space-between;
     margin: 16px;
   }
-}
 
-@media (max-width: 768px) {
-  .footer {
-      display: none;
-  }
+
 }
diff --git a/src/theme/Navbar/Content/GlobalMenu/index.js b/src/theme/Navbar/Content/GlobalMenu/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import * as NavigationMenu from "@radix-ui/react-navigation-menu";
-import styles from "./styles.module.css";
+import styles from "./styles.module.scss";
 
 const GlobalMenu = ({ items }) => {
   return (
diff --git a/src/theme/Navbar/Content/GlobalMenu/styles.module.scss b/src/theme/Navbar/Content/GlobalMenu/styles.module.scss
@@ -1,3 +1,5 @@
+@use '../../../../css/breakpoints.scss' as breakpoints;
+
 .linkStyle {
   display: block;
   color: var(--ifm-navbar-link-color);
@@ -99,7 +101,7 @@
   font-weight: 500;
 }
 
-@media screen and (min-width: 640px) {
+@media screen and (min-width: breakpoints.$mobile-breakpoint) {
   .menuItemContainer {
     min-width: 500px;
   }
@@ -108,7 +110,7 @@
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: breakpoints.$tablet-breakpoint) {
   .subMenuItem {
     min-width: 9.5rem;
   }
@@ -186,7 +188,7 @@
  padding-bottom: 10px;
 }
 
-@media only screen and (min-width: 600px) {
+@media only screen and (min-width: breakpoints.$mobile-breakpoint) {
   .navigationMenuContent {
     width: auto;
   }
@@ -218,7 +220,7 @@
   filter: drop-shadow(0px 2px 2px rgba(50, 50, 50, 0.1));
 }
 
-@media only screen and (min-width: 600px) {
+@media only screen and (min-width: breakpoints.$mobile-breakpoint) {
   .navigationMenuViewport {
     width: var(--radix-navigation-menu-viewport-width);
   }
@@ -326,10 +328,4 @@
   to {
     opacity: 0;
   }
-}
-
-@media (min-width: 997px) {
- .navigationMenuRoot {
-   display: flex;
- }
-}
+}
diff --git a/src/theme/Navbar/Content/index.js b/src/theme/Navbar/Content/index.js
diff --git a/src/theme/Navbar/Content/styles.module.scss b/src/theme/Navbar/Content/styles.module.scss
diff --git a/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.js b/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.js
diff --git a/src/theme/Navbar/MobileSidebar/SecondaryMenu/styles.module.scss b/src/theme/Navbar/MobileSidebar/SecondaryMenu/styles.module.scss
diff --git a/src/theme/SearchPage/styles.module.css b/src/theme/SearchPage/styles.module.css

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`import React from 'react';`
`2`		`-import styles from './styles.module.css'`
	`2`	`+import styles from './styles.module.scss'`
`3`	`3`
`4`	`4`	`const Hamburger = ({onClick}) =>`
`5`	`5`	`{`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
	`1`	`+@use '../../css/breakpoints.scss' as breakpoints;`
	`2`	`+`
`1`	`3`	`.docsNavBurger {`
`2`		`- display: none;`
	`4`	`+ display: flex;`
`3`	`5`	`}`
`4`	`6`
`5`	`7`	`.docsMobileMenu {`
`@@ -68,6 +70,7 @@`
`68`	`70`	`margin-top: 1em;`
`69`	`71`	`margin-bottom: 2em;`
`70`	`72`	`}`
	`73`	`+`
`71`	`74`	`.docsMobileMenu_header{`
`72`	`75`	`margin-top: 4rem;`
`73`	`76`	`margin-bottom: 1rem;`
`@@ -77,12 +80,8 @@`
`77`	`80`	`justify-content: space-between;`
`78`	`81`	`}`
`79`	`82`
`80`		`-@media (max-width: 1400px) {`
`81`		`-`
`82`		`-}`
`83`		`-`
`84`		`-@media (max-width: 996px) {`
	`83`	`+@media (min-width: breakpoints.$laptop-breakpoint) {`
`85`	`84`	`.docsNavBurger {`
`86`		`- display: flex;`
	`85`	`+ display: none;`
`87`	`86`	`}`
`88`	`87`	`}`