From 801712fa3b67952ce2e69dac4ae63c527bccfe72 Mon Sep 17 00:00:00 2001 From: theoplawinski Date: Tue, 12 Sep 2023 14:58:16 +0200 Subject: [PATCH 1/3] Added logic to change menu visibility --- apps/front/src/components/app/App.tsx | 3 + .../components/devMenu/DevMenu.module.less | 13 +++++ apps/front/src/components/devMenu/DevMenu.tsx | 56 +++++++++++++++++++ 3 files changed, 72 insertions(+) create mode 100644 apps/front/src/components/devMenu/DevMenu.module.less create mode 100644 apps/front/src/components/devMenu/DevMenu.tsx diff --git a/apps/front/src/components/app/App.tsx b/apps/front/src/components/app/App.tsx index e64ce41a..855af170 100644 --- a/apps/front/src/components/app/App.tsx +++ b/apps/front/src/components/app/App.tsx @@ -4,6 +4,7 @@ import { Link, Stack, TManageTransitions } from "@cher-ami/router" import debug from "@wbe/debug" import { EPages } from "~/routes" +import DevMenu from "~/components/devMenu/DevMenu" const log = debug(`front:App`) export interface IProps {} @@ -63,6 +64,8 @@ function App(props: IProps) { + + ) } diff --git a/apps/front/src/components/devMenu/DevMenu.module.less b/apps/front/src/components/devMenu/DevMenu.module.less new file mode 100644 index 00000000..d04121b0 --- /dev/null +++ b/apps/front/src/components/devMenu/DevMenu.module.less @@ -0,0 +1,13 @@ +@import (reference) "../../references.less"; + +.root { +} + +.button { + position: fixed; + top: 16rem; + right: 16rem; + width: 48rem; + height: 48rem; + background-color: red; +} diff --git a/apps/front/src/components/devMenu/DevMenu.tsx b/apps/front/src/components/devMenu/DevMenu.tsx new file mode 100644 index 00000000..23dbffb2 --- /dev/null +++ b/apps/front/src/components/devMenu/DevMenu.tsx @@ -0,0 +1,56 @@ +import React, { useEffect, useState } from "react" +import css from "./DevMenu.module.less" +import { mergeStrings as merge } from "@cher-ami/utils" +import debug from "@wbe/debug" + +interface IProps { + className?: string +} + +const componentName = "DevMenu" +const log = debug(`front:${componentName}`) + +/** + * @name DevMenu + */ +function DevMenu(props: IProps) { + const [isMenuVisible, setIsMenuVisible] = useState(false) + + const toggleMenuVisibility = (): void => { + setIsMenuVisible(!isMenuVisible) + } + + // ------------------------------------------------------------------------------- HANDLERS + + const onButtonClickHandler = (): void => { + toggleMenuVisibility() + } + + const onKeyDownHandler = (event): void => { + // Press shift + D + if (event.shiftKey && event.keyCode === 68) { + toggleMenuVisibility() + } + } + + // ------------------------------------------------------------------------------- LISTENERS + + useEffect(() => { + window.addEventListener("keydown", onKeyDownHandler) + + return () => { + window.removeEventListener("keydown", onKeyDownHandler) + } + }, [isMenuVisible]) + + // ------------------------------------------------------------------------------- RENDER + + return ( +
+
+ ) +} + +export default DevMenu From 8373473a2a15dd6092dd01bbb251c64ae6c5d309 Mon Sep 17 00:00:00 2001 From: theoplawinski Date: Tue, 12 Sep 2023 15:04:16 +0200 Subject: [PATCH 2/3] Replaced mergeStrings with cls utils --- apps/front/src/components/devMenu/DevMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/front/src/components/devMenu/DevMenu.tsx b/apps/front/src/components/devMenu/DevMenu.tsx index 23dbffb2..6cdb17a2 100644 --- a/apps/front/src/components/devMenu/DevMenu.tsx +++ b/apps/front/src/components/devMenu/DevMenu.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react" import css from "./DevMenu.module.less" -import { mergeStrings as merge } from "@cher-ami/utils" +import { cls } from "@cher-ami/utils" import debug from "@wbe/debug" interface IProps { @@ -46,7 +46,7 @@ function DevMenu(props: IProps) { // ------------------------------------------------------------------------------- RENDER return ( -
+
From 15ea16eba4a194dae8d3e9eed5e8a7e735a9cbd5 Mon Sep 17 00:00:00 2001 From: theoplawinski Date: Tue, 12 Sep 2023 18:30:23 +0200 Subject: [PATCH 3/3] Added routes props to retrieve route list --- .../components/devMenu/DevMenu.module.less | 19 ++++++ apps/front/src/components/devMenu/DevMenu.tsx | 58 ++++++++++++++++--- apps/front/src/routes.ts | 6 ++ 3 files changed, 74 insertions(+), 9 deletions(-) diff --git a/apps/front/src/components/devMenu/DevMenu.module.less b/apps/front/src/components/devMenu/DevMenu.module.less index d04121b0..40e8620e 100644 --- a/apps/front/src/components/devMenu/DevMenu.module.less +++ b/apps/front/src/components/devMenu/DevMenu.module.less @@ -11,3 +11,22 @@ height: 48rem; background-color: red; } + +.navigation { + position: fixed; + top: 16rem; + right: 16rem; + width: 200rem; + height: auto; + background-color: black; +} + +.navigationList { +} + +.navigationItem { +} + +.navigationLink { + color: white; +} diff --git a/apps/front/src/components/devMenu/DevMenu.tsx b/apps/front/src/components/devMenu/DevMenu.tsx index 6cdb17a2..60cdd78e 100644 --- a/apps/front/src/components/devMenu/DevMenu.tsx +++ b/apps/front/src/components/devMenu/DevMenu.tsx @@ -1,7 +1,9 @@ -import React, { useEffect, useState } from "react" +import React, { useEffect, useMemo, useState } from "react" import css from "./DevMenu.module.less" import { cls } from "@cher-ami/utils" import debug from "@wbe/debug" +import { routes } from "~/routes" +import { Link } from "@cher-ami/router" interface IProps { className?: string @@ -16,6 +18,32 @@ const log = debug(`front:${componentName}`) function DevMenu(props: IProps) { const [isMenuVisible, setIsMenuVisible] = useState(false) + // ------------------------------------------------------------------------------- RETRIEVE ROUTES TO SHOW + + const routeList = useMemo(() => { + const local = [] + const getRoutesToShow = (r) => { + for (let route of r) { + if (route.props?.showInDevMenu) { + local.push(route) + if (route.children) { + getRoutesToShow(route.children) + } + } else { + if (route.children) { + getRoutesToShow(route.children) + } + } + } + } + + getRoutesToShow(routes) + + return local + }, [routes]) + + // ------------------------------------------------------------------------------- TOGGLE MENU + const toggleMenuVisibility = (): void => { setIsMenuVisible(!isMenuVisible) } @@ -26,20 +54,17 @@ function DevMenu(props: IProps) { toggleMenuVisibility() } - const onKeyDownHandler = (event): void => { - // Press shift + D - if (event.shiftKey && event.keyCode === 68) { - toggleMenuVisibility() - } + const onKeyPressHandler = ({ key }): void => { + if (key === "m") toggleMenuVisibility() } // ------------------------------------------------------------------------------- LISTENERS useEffect(() => { - window.addEventListener("keydown", onKeyDownHandler) + window.addEventListener("keypress", onKeyPressHandler) return () => { - window.removeEventListener("keydown", onKeyDownHandler) + window.removeEventListener("keypress", onKeyPressHandler) } }, [isMenuVisible]) @@ -48,7 +73,22 @@ function DevMenu(props: IProps) { return (
) } diff --git a/apps/front/src/routes.ts b/apps/front/src/routes.ts index 0b9a1c16..d4fc1bc6 100644 --- a/apps/front/src/routes.ts +++ b/apps/front/src/routes.ts @@ -16,6 +16,9 @@ export const routes: TRoute[] = [ path: "/", component: HomePage, name: EPages.HOME, + props: { + showInDevMenu: true, + }, getStaticProps: async (props, currentLang: TLanguage) => { const res = await fetch("https://worldtimeapi.org/api/ip") const time = await res.json() @@ -31,6 +34,9 @@ export const routes: TRoute[] = [ path: "/work/:slug?", name: EPages.WORK, component: WorkPage, + props: { + showInDevMenu: true, + }, getStaticProps: async (props, currentLang: TLanguage) => { const meta: TMetaTags = { title: `Work - ${props.params.slug}`,