diff --git a/client/src/app/App.tsx b/client/src/app/App.tsx index 7ad1c2b9e..57b068bc7 100644 --- a/client/src/app/App.tsx +++ b/client/src/app/App.tsx @@ -1,6 +1,6 @@ +import { MaterialThemeProvider } from "components/layout/misc/MaterialThemeProvider"; import { LoadingScreen } from "components/layout/screens/LoadingScreen"; import { BannedContextProvider } from "context/BannedContext"; -import ErrorBoundary from "components/util/ErrorBoundary"; import { SubheaderContextProvider } from "context/SubheaderContext"; import { UserContextProvider } from "context/UserContext"; import { UserGameStatsContextProvider } from "context/UserGameStatsContext"; @@ -9,7 +9,6 @@ import React from "react"; import { Toaster } from "react-hot-toast"; import { QueryClient, QueryClientProvider } from "react-query"; import { BrowserRouter } from "react-router-dom"; -import { MaterialThemeProvider } from "../_metronic/layout"; import { Routes } from "./routes/AppRoutes"; const queryClient = new QueryClient({ diff --git a/client/src/app/pages/LandingPage.tsx b/client/src/app/pages/LandingPage.tsx index 6e3576b23..e288804d2 100644 --- a/client/src/app/pages/LandingPage.tsx +++ b/client/src/app/pages/LandingPage.tsx @@ -12,8 +12,8 @@ import React from "react"; export default function LandingPage() { return ( <> - -
+ {/* */} + {/*
*/}
- +
@@ -19,7 +21,7 @@ export function Layout({ children }: JustChildren) { id="kt_wrapper" style={{ overflowX: "hidden" }} > -
+
diff --git a/client/src/components/layout/header/Header.tsx b/client/src/components/layout/header/Header.tsx index 4879cd38a..bcee8fab2 100644 --- a/client/src/components/layout/header/Header.tsx +++ b/client/src/components/layout/header/Header.tsx @@ -1,10 +1,17 @@ import { ToCDNURL } from "util/api"; import React from "react"; import { Link } from "react-router-dom"; +import { SetState } from "types/react"; import { HeaderMenu } from "./HeaderMenu"; import { Topbar } from "./Topbar"; -export function Header() { +export function Header({ + mobileShow, + setMobileShow, +}: { + mobileShow: boolean; + setMobileShow: SetState; +}) { return (
@@ -19,7 +26,7 @@ export function Header() {
- +
diff --git a/client/src/components/layout/header/HeaderMenu.tsx b/client/src/components/layout/header/HeaderMenu.tsx index 85087bc28..dcd134101 100644 --- a/client/src/components/layout/header/HeaderMenu.tsx +++ b/client/src/components/layout/header/HeaderMenu.tsx @@ -1,22 +1,28 @@ import { APIFetchV1, ToCDNURL } from "util/api"; import Divider from "components/util/Divider"; import Loading from "components/util/Loading"; +import useComponentVisible from "components/util/useComponentVisible"; import { UserContext } from "context/UserContext"; import { UserGameStatsContext } from "context/UserGameStatsContext"; import { TachiConfig } from "lib/config"; -import React, { useContext, useLayoutEffect } from "react"; +import React, { useContext, useEffect } from "react"; import { useQuery } from "react-query"; import { Link } from "react-router-dom"; import { FormatGame, GetGameConfig, UserGameStats } from "tachi-common"; -import KTLayoutHeader from "_metronic/_assets/js/layout/base/header"; -import KTLayoutHeaderMenu from "_metronic/_assets/js/layout/base/header-menu"; +import { SetState } from "types/react"; import AllGames from "./AllGames"; import ImportScoresLink from "./ImportScoresLink"; import MenuDropdown from "./MenuDropdown"; import MenuLink from "./MenuLink"; import SearchBar from "./SearchBar"; -export function HeaderMenu() { +export function HeaderMenu({ + mobileShow, + setMobileShow, +}: { + mobileShow: boolean; + setMobileShow: SetState; +}) { const { user } = useContext(UserContext); const { ugs, setUGS } = useContext(UserGameStatsContext); @@ -38,12 +44,16 @@ export function HeaderMenu() { console.error(error); } - useLayoutEffect(() => { - if (!isLoading) { - KTLayoutHeader.init("kt_header", "kt_header_mobile"); - KTLayoutHeaderMenu.init("kt_header_menu", "kt_header_menu_wrapper"); - } - }, [isLoading]); + const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(mobileShow); + + // how does this not cause a problem. What? + useEffect(() => { + setIsComponentVisible(mobileShow); + }, [mobileShow]); + + useEffect(() => { + setMobileShow(isComponentVisible); + }, [isComponentVisible]); if (isLoading) { return ; @@ -77,7 +87,13 @@ export function HeaderMenu() { } return ( -
+
; +}) { const { user } = useContext(UserContext); return ( @@ -13,6 +20,7 @@ export function HeaderMobile() { diff --git a/client/src/components/layout/header/MenuDropdown.tsx b/client/src/components/layout/header/MenuDropdown.tsx index 4dba7acef..d8d23c057 100644 --- a/client/src/components/layout/header/MenuDropdown.tsx +++ b/client/src/components/layout/header/MenuDropdown.tsx @@ -1,20 +1,34 @@ +import useComponentVisible from "components/util/useComponentVisible"; import React from "react"; import { JustChildren } from "types/react"; export default function MenuDropdown({ name, children }: { name: string } & JustChildren) { + const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false); + return (
  • setIsComponentVisible(!isComponentVisible)} >
    {name}
    -
    +
      {children}
    • ); } + +// .header-menu .menu-nav .menu-item.menu-item-active-tab .menu-submenu, .header-menu .menu-nav .menu-item.menu-item-hover .menu-submenu diff --git a/client/src/components/layout/misc/MaterialThemeProvider.tsx b/client/src/components/layout/misc/MaterialThemeProvider.tsx new file mode 100644 index 000000000..a4e70f02d --- /dev/null +++ b/client/src/components/layout/misc/MaterialThemeProvider.tsx @@ -0,0 +1,13 @@ +import { createMuiTheme, ThemeProvider } from "@material-ui/core"; +import React from "react"; +import { JustChildren } from "types/react"; + +const theme = createMuiTheme({ + typography: { + fontFamily: "Poppins", + }, +}); + +export function MaterialThemeProvider({ children }: JustChildren) { + return {children}; +} diff --git a/client/src/components/util/useComponentVisible.tsx b/client/src/components/util/useComponentVisible.tsx new file mode 100644 index 000000000..1354c5acf --- /dev/null +++ b/client/src/components/util/useComponentVisible.tsx @@ -0,0 +1,21 @@ +import { useState, useEffect, useRef } from "react"; + +export default function useComponentVisible(initialIsVisible: boolean) { + const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible); + const ref = useRef(null); + + const handleClickOutside = (event: MouseEvent) => { + if (ref.current && !ref.current.contains(event.target)) { + setIsComponentVisible(false); + } + }; + + useEffect(() => { + document.addEventListener("click", handleClickOutside, true); + return () => { + document.removeEventListener("click", handleClickOutside, true); + }; + }, []); + + return { ref, isComponentVisible, setIsComponentVisible }; +}