Merge pull request #4168 from Blargian/increase_mobile_menu

Adjust mobile/tablet breakpoints

Author: Blargian

sidebars.js

@@ -1715,7 +1715,7 @@ const sidebars = {
   dropdownCategories: [
     {
       type: "category",
-      label: "Getting Started",
+      label: "Get Started",
       description: "Learn how to use ClickHouse",
       customProps: {
         href: "/introduction-clickhouse",

src/components/MobileSideBarMenu/index.jsx

@@ -27,7 +27,7 @@ const MobileSideBarMenu = ({sidebar, menu}) => {
     }, [currentMenuState]);
 
     // Define the breakpoint where mobile menu should be hidden (laptop breakpoint)
-    const LAPTOP_BREAKPOINT = 1330;
+    const LAPTOP_BREAKPOINT = 1100;
 
     // Initialize the previous location ref on first render and monitor location changes
     useEffect(() => {

src/css/breakpoints.scss

@@ -1,6 +1,6 @@
-$mobile-breakpoint: 996px;
-$tablet-breakpoint: 1024px;
-$laptop-breakpoint: 1330px;
+$mobile-breakpoint: 768px;
+$tablet-breakpoint: 900px;
+$laptop-breakpoint: 1100px;
 $large-desktop-breakpoint: 1440px;
 
 // If you change these breakpoints, make sure to update

src/theme/Navbar/Content/styles.module.scss

@@ -52,7 +52,7 @@
   }
 }
 
-@media screen and (min-width: breakpoints.$mobile-breakpoint) {
+@media screen and (min-width: breakpoints.$laptop-breakpoint) {
   .navRight .mobileSearchBar {
     display: none;
   }