Skip to content

Commit 98ee5d5

Browse files
BlargianBlargian
committed
fix main page and determine what the issue is with top burger menu
1 parent 46cc1c8 commit 98ee5d5

File tree

9 files changed

+57
-43
lines changed

9 files changed

+57
-43
lines changed

‎src/components/ColorModeToggler/styles.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../css/breakpoints.scss';
1+
@use '../../css/breakpoints.scss' as breakpoints;
22

33
.colorModeButton {
44
display: flex;

‎src/components/MobileSideBarMenu/styles.module.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../css/breakpoints.scss';
1+
@use '../../css/breakpoints.scss' as breakpoints;
22

33
.docsNavBurger {
44
display: flex;
@@ -80,7 +80,7 @@
8080
justify-content: space-between;
8181
}
8282

83-
@media (min-width: $laptop-breakpoint) {
83+
@media (min-width: breakpoints.$laptop-breakpoint) {
8484
.docsNavBurger {
8585
display: none;
8686
}

‎src/components/Navigation/styles.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
@import '../../css/breakpoints.scss';
1+
@use '../../css/breakpoints.scss' as breakpoints;
22

3-
$menu-breakpoint: $laptop-breakpoint;
3+
$menu-breakpoint: breakpoints.$laptop-breakpoint;
44

55
:root {
66
--ch-nav-v2-border-color: #dfdfdf;

‎src/css/home.scss

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
max-width: 100vw;
88
overflow-x: hidden;
99

10-
@media (min-width: var(--mobile-breakpoint)) {
10+
@media (min-width: 768px) {
1111
max-width: 100% !important;
1212
}
1313
}
@@ -18,7 +18,7 @@
1818
max-width: 100%;
1919
padding-bottom: 0;
2020

21-
@media (min-width: var(--mobile-breakpoint)) {
21+
@media (min-width: 768px) {
2222
overflow-x: auto;
2323
}
2424
}
@@ -30,7 +30,7 @@
3030
.docs-doc-id-home-page .docItemCol_src-theme-DocItem-Layout-styles-module {
3131
padding-bottom: 0;
3232

33-
@media (min-width: var(--mobile-breakpoint)) {
33+
@media (min-width: 768px) {
3434
padding-left: 4rem;
3535
padding-right: 4rem;
3636
overflow-x: auto;
@@ -48,7 +48,7 @@
4848
flex-direction: column;
4949
padding-bottom: 2rem;
5050

51-
@media (min-width: var(--mobile-breakpoint)) {
51+
@media (min-width: 768px) {
5252
flex-direction: row;
5353
padding-right: 2rem;
5454
}
@@ -59,7 +59,7 @@
5959
padding: 2rem 0rem;
6060
flex: 1;
6161

62-
@media (min-width: var(--mobile-breakpoint)) {
62+
@media (min-width: 768px) {
6363
padding-right: 2rem;
6464
}
6565
}
@@ -72,7 +72,7 @@
7272
flex: 1;
7373
gap: 20px;
7474

75-
@media (min-width: var(--mobile-breakpoint)) {
75+
@media (min-width: 768px) {
7676
flex-direction: row;
7777
flex: 1;
7878
justify-content: space-between;
@@ -91,7 +91,7 @@
9191
margin-bottom: 1rem;
9292
width: 100%;
9393

94-
@media (min-width: var(--mobile-breakpoint)) {
94+
@media (min-width: 768px) {
9595
margin-bottom: 0;
9696
width: 200px;
9797
}
@@ -130,7 +130,7 @@
130130
align-items: center;
131131
cursor: pointer;
132132

133-
@media (min-width: var(--mobile-breakpoint)) {
133+
@media (min-width: 768px) {
134134
marginBottom: 4rem;
135135
width: 210px;
136136
}
@@ -173,13 +173,13 @@
173173
flex-direction: column;
174174
align-items: center;
175175

176-
@media (max-width: var(--mobile-breakpoint)) {
176+
@media (min-width: 768px) {
177177
flex-direction: row;
178178
}
179179
}
180180

181181
.home-page-button-container:first-child {
182-
@media (min-width: var(--mobile-breakpoint)) {
182+
@media (min-width: 768px) {
183183
margin-bottom: 24px;
184184
}
185185
}
@@ -192,7 +192,7 @@
192192
justify-content: space-between;
193193
border-bottom: 1px solid var(--click-color-stroke);
194194

195-
@media (min-width: var(--mobile-breakpoint)) {
195+
@media (min-width: 768px) {
196196
flex-direction: row;
197197
padding-top: 2rem;
198198
padding-bottom: 2rem;
@@ -207,7 +207,7 @@
207207
justify-content: space-between;
208208
border-bottom: 1px solid var(--click-color-stroke);
209209

210-
@media (min-width: var(--mobile-breakpoint)) {
210+
@media (min-width: 768px) {
211211
flex-direction: row;
212212
padding-top: 2rem;
213213
padding-bottom: 2rem;
@@ -224,7 +224,7 @@
224224
flex: 1;
225225
max-width: 465px;
226226

227-
@media (min-width: var(--mobile-breakpoint)) {
227+
@media (min-width: 768px) {
228228
flex-direction: row;
229229
flex: 1;
230230
justify-content: right;
@@ -238,7 +238,7 @@
238238
.home-page-section-left {
239239
margin-bottom: 1rem;
240240

241-
@media (min-width: var(--mobile-breakpoint)) {
241+
@media (min-width: 768px) {
242242
margin-right: 2rem;
243243
margin-bottom: 0;
244244
min-width: 200px;
@@ -271,5 +271,4 @@ img.home-svg svg path {
271271
flex-direction: column;
272272
max-width: 1000px;
273273
justify-self: center;
274-
}
275-
274+
}

‎src/theme/Footer/Layout/styles.module.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../../css/breakpoints.scss';
1+
@use '../../../css/breakpoints.scss' as breakpoints;
22

33
.footer {
44
display: none;
@@ -27,7 +27,7 @@
2727
width: 2.5rem;
2828
}
2929

30-
@media (min-width: $tablet-breakpoint) {
30+
@media (min-width: breakpoints.$tablet-breakpoint) {
3131
.footer {
3232
display: flex;
3333
/* padding: 32px 40px; */

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../../../css/breakpoints.scss';
1+
@use '../../../../css/breakpoints.scss' as breakpoints;
22

33
.linkStyle {
44
display: block;
@@ -101,7 +101,7 @@
101101
font-weight: 500;
102102
}
103103

104-
@media screen and (min-width: $mobile-breakpoint) {
104+
@media screen and (min-width: breakpoints.$mobile-breakpoint) {
105105
.menuItemContainer {
106106
min-width: 500px;
107107
}
@@ -110,7 +110,7 @@
110110
}
111111
}
112112

113-
@media screen and (min-width: $tablet-breakpoint) {
113+
@media screen and (min-width: breakpoints.$tablet-breakpoint) {
114114
.subMenuItem {
115115
min-width: 9.5rem;
116116
}
@@ -188,7 +188,7 @@
188188
padding-bottom: 10px;
189189
}
190190

191-
@media only screen and (min-width: $mobile-breakpoint) {
191+
@media only screen and (min-width: breakpoints.$mobile-breakpoint) {
192192
.navigationMenuContent {
193193
width: auto;
194194
}
@@ -220,7 +220,7 @@
220220
filter: drop-shadow(0px 2px 2px rgba(50, 50, 50, 0.1));
221221
}
222222

223-
@media only screen and (min-width: $mobile-breakpoint) {
223+
@media only screen and (min-width: breakpoints.$mobile-breakpoint) {
224224
.navigationMenuViewport {
225225
width: var(--radix-navigation-menu-viewport-width);
226226
}

‎src/theme/Navbar/Content/index.js

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, {useState, useEffect} from "react";
22
import clsx from "clsx";
33
import { useThemeConfig } from "@docusaurus/theme-common";
44
import {
@@ -40,8 +40,22 @@ function NavbarItems({ items }) {
4040
);
4141
}
4242

43+
function useWindowWidth() {
44+
const [width, setWidth] = useState(typeof window !== "undefined" ? window.innerWidth : 1200);
45+
useEffect(() => {
46+
function handleResize() {
47+
setWidth(window.innerWidth);
48+
}
49+
window.addEventListener("resize", handleResize);
50+
return () => window.removeEventListener("resize", handleResize);
51+
}, []);
52+
return width;
53+
}
4354
export default function NavbarContent() {
44-
const mobileSidebar = useNavbarMobileSidebar();
55+
56+
const width = useWindowWidth();
57+
const LAPTOP_BREAKPOINT = 1300;
58+
4559
const secondaryItems = useNavbarSecondaryItems();
4660
let items = [];
4761
try {
@@ -53,6 +67,7 @@ export default function NavbarContent() {
5367
menuItems,
5468
} = usePluginData("ch-header-plugin");
5569

70+
5671
return (
5772
<div className={`${styles.navbarHeaderContainer} navbar-header`}>
5873
<div className={clsx('navbar__inner', styles.navbarInner)}>
@@ -104,7 +119,7 @@ export default function NavbarContent() {
104119
>
105120
<button className="click-button primary-btn">Get started</button>
106121
</a>
107-
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
122+
{width < LAPTOP_BREAKPOINT && <div style={{background: 'red'}}>TOGGLE</div>}
108123
</div>
109124
</div>
110125
<div className={clsx("secondary-nav--items", styles.secondaryMenu)}>

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../../css/breakpoints.scss';
1+
@use '../../../css/breakpoints.scss' as breakpoints;
22

33
.navbarHeaderContainer {
44
display: flex;
@@ -50,7 +50,7 @@
5050
color: var(--ifm-navbar-link-color);
5151
}
5252

53-
@media screen and (min-width: $laptop-breakpoint) {
53+
@media screen and (min-width: breakpoints.$laptop-breakpoint) {
5454
.navRight {
5555
display: flex;
5656
}
@@ -61,7 +61,7 @@
6161

6262
}
6363

64-
@media screen and (min-width: $laptop-breakpoint) {
64+
@media screen and (min-width: breakpoints.$laptop-breakpoint) {
6565
.navRight {
6666
gap: 1.5rem;
6767
}
@@ -119,7 +119,7 @@
119119
white-space: wrap;
120120
}
121121

122-
@media (max-width: $laptop-breakpoint) {
122+
@media (max-width: breakpoints.$laptop-breakpoint) {
123123
.navbarItemsList {
124124
display: none !important;
125125
}
@@ -129,7 +129,7 @@
129129
}
130130
}
131131

132-
@media (max-width: $mobile-breakpoint) {
132+
@media (max-width: breakpoints.$mobile-breakpoint) {
133133

134134
:global .navbar-color-toggle span {
135135
display: none;
@@ -150,26 +150,26 @@
150150

151151
}
152152

153-
@media (max-width: $mobile-breakpoint) {
153+
@media (max-width: breakpoints.$mobile-breakpoint) {
154154
.dropdownCategoriesContainer {
155155
display:inline-block;
156156
}
157157
}
158158

159-
@media screen and (max-width: $mobile-breakpoint) {
159+
@media screen and (max-width: breakpoints.$mobile-breakpoint) {
160160
.navRight .githubStars {
161161
display: none;
162162
}
163163
}
164164

165-
@media screen and (max-width: $mobile-breakpoint) {
165+
@media screen and (max-width: breakpoints.$mobile-breakpoint) {
166166
.secondaryMenu {
167167
gap:0;
168168
}
169169
}
170170

171-
@media screen and (min-width: $large-desktop-breakpoint) {
171+
@media screen and (min-width: breakpoints.$large-desktop-breakpoint) {
172172
.dropdownCategoriesContainer {
173-
max-width: $laptop-breakpoint;
173+
max-width: breakpoints.$laptop-breakpoint;
174174
}
175175
}

‎src/theme/Navbar/MobileSidebar/SecondaryMenu/styles.module.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../../../css/breakpoints.scss';
1+
@use '../../../../css/breakpoints.scss' as breakpoints;
22

33
.docsNavBurger {
44
display: flex;
@@ -74,7 +74,7 @@
7474
justify-content: space-between;
7575
}
7676

77-
@media (min-width: $laptop-breakpoint) {
77+
@media (min-width: breakpoints.$laptop-breakpoint) {
7878
.docsNavBurger {
7979
display: flex;
8080
}

0 commit comments

Comments
 (0)