[apisix-website] branch master updated: fix: hide color mode switch in mobile (#907)

[yilinzeng]

This is an automated email from the ASF dual-hosted git repository.

yilinzeng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 966fc61  fix: hide color mode switch in mobile (#907)
966fc61 is described below

commit 966fc61c8e10a9260eeb969d29687111943fe487
Author: SkyeYoung <isk...@outlook.com>
AuthorDate: Mon Feb 28 09:06:10 2022 +0800

    fix: hide color mode switch in mobile (#907)
---
 website/src/pages/index.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index ba1525c..7647e40 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useLayoutEffect } from "react";
 import useThemeContext from '@theme/hooks/useThemeContext';
 import Layout from "@theme/Layout";
+import useWindowType from "@theme/hooks/useWindowSize";
 
 import HeroSection from "./sections/heroSection";
 import Architecture from "./sections/architecture";
@@ -27,11 +28,25 @@ const useWindowSize = () => {
 
 const ThemeResetComponent = () => {
   const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
+  const windowType = useWindowType();
 
-  useEffect(() => {
-    const children = 
document.querySelector(".navbar__items--right").childElementCount;
-    
document.querySelector(".navbar__items--right").childNodes[children-2].style.display
 = "none";
+  useEffect(()=>{
+    if (windowType === 'mobile') {
+      //  remove mode switch at navbar-sidebar
+      const sidebarModeSwitch = 
document.querySelector("div.navbar-sidebar__brand > div");
+      if (sidebarModeSwitch) {
+        sidebarModeSwitch.style.display = 'none';
+      }
+    } else {
+      // remove mode switch at navbar
+      const navbarModeSwitch = 
document.querySelector("div.navbar__items.navbar__items--right > 
div.react-toggle");
+      if (navbarModeSwitch) {
+        navbarModeSwitch.style.display = 'none';
+      }
+    }
+  }, [windowType])
 
+  useEffect(() => {
     if(isDarkTheme) {
       setLightTheme(true);
     }