Dev menu component

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) {
         </ul>
       </nav>
       <Stack className={css.stack} manageTransitions={manageTransitions} />
+
+      <DevMenu />
     </div>
   )
 }

apps/front/src/components/devMenu/DevMenu.module.less

@@ -0,0 +1,32 @@
+@import (reference) "../../references.less";
+
+.root {
+}
+
+.button {
+  position: fixed;
+  top: 16rem;
+  right: 16rem;
+  width: 48rem;
+  height: 48rem;
+  background-color: red;
+}
+
+.navigation {
+  position: fixed;
+  top: 16rem;
+  right: 16rem;
+  width: 200rem;
+  height: auto;
+  background-color: black;
+}
+
+.navigationList {
+}
+
+.navigationItem {
+}
+
+.navigationLink {
+  color: white;
+}

apps/front/src/components/devMenu/DevMenu.tsx

@@ -0,0 +1,96 @@
+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
+}
+
+const componentName = "DevMenu"
+const log = debug(`front:${componentName}`)
+
+/**
+ * @name DevMenu
+ */
+function DevMenu(props: IProps) {
+  const [isMenuVisible, setIsMenuVisible] = useState<boolean>(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)
+  }
+
+  // ------------------------------------------------------------------------------- HANDLERS
+
+  const onButtonClickHandler = (): void => {
+    toggleMenuVisibility()
+  }
+
+  const onKeyPressHandler = ({ key }): void => {
+    if (key === "m") toggleMenuVisibility()
+  }
+
+  // ------------------------------------------------------------------------------- LISTENERS
+
+  useEffect(() => {
+    window.addEventListener("keypress", onKeyPressHandler)
+
+    return () => {
+      window.removeEventListener("keypress", onKeyPressHandler)
+    }
+  }, [isMenuVisible])
+
+  // ------------------------------------------------------------------------------- RENDER
+
+  return (
+    <div className={cls(css.root, props.className)}>
+      <button className={css.button} onClick={onButtonClickHandler} />
+
+      {isMenuVisible && (
+        <nav className={css.navigation}>
+          <ul className={css.navigationList}>
+            {routeList
+              .filter((route) => route.props?.showInDevMenu)
+              .map((route, index) => (
+                <li className={css.navigationItem} key={index}>
+                  <Link className={css.navigationLink} to={{ name: route.name }}>
+                    {route.name}
+                  </Link>
+                </li>
+              ))}
+          </ul>
+        </nav>
+      )}
+    </div>
+  )
+}
+
+export default DevMenu

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}`,