diff --git a/apps/playground/src/App.tsx b/apps/playground/src/App.tsx index a9e2477c..8e493882 100644 --- a/apps/playground/src/App.tsx +++ b/apps/playground/src/App.tsx @@ -10,11 +10,11 @@ import { import { createStore } from 'solid-js/store'; import Alert from './components/Alert'; import Breadcrumbs from './components/Breadcrumbs'; -import Menu from './components/Menu'; import MonacoEditor from './components/MonacoEditor'; import ProgressBar from './components/ProgressBar'; import Sidebar from './components/Sidebar'; import Tab from './components/Tab'; +import Menu from './components/menu/Menu'; import { DeobfuscateContextProvider } from './context/DeobfuscateContext'; import { settings } from './hooks/useSettings'; import { useWorkspaces, type Workspace } from './indexeddb'; diff --git a/apps/playground/src/components/Menu.tsx b/apps/playground/src/components/Menu.tsx deleted file mode 100644 index aec5085c..00000000 --- a/apps/playground/src/components/Menu.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import { For } from 'solid-js'; -import { setSettings, settings, type Settings } from '../hooks/useSettings'; -import { useWorkspaces, type Workspace } from '../indexeddb'; -import { openFile } from '../utils/files'; - -interface Props { - onFileOpen?: (content: string) => void; - onSave?: () => void; - onRestore?: (workspace: Workspace) => void; -} - -export default function Menu(props: Props) { - const { workspaces } = useWorkspaces(); - - return ( - - ); -} diff --git a/apps/playground/src/components/menu/Menu.tsx b/apps/playground/src/components/menu/Menu.tsx new file mode 100644 index 00000000..7b848b8b --- /dev/null +++ b/apps/playground/src/components/menu/Menu.tsx @@ -0,0 +1,124 @@ +import { For, createSignal, onCleanup, onMount } from 'solid-js'; +import { setSettings, settings, type Settings } from '../../hooks/useSettings'; +import { useWorkspaces, type Workspace } from '../../indexeddb'; +import { openFile } from '../../utils/files'; +import MenuButton from './MenuButton'; +import MenuDropdown from './MenuDropdown'; +import MenuHeader from './MenuHeader'; +import MenuSetting from './MenuSetting'; + +interface Props { + onFileOpen?: (content: string) => void; + onSave?: () => void; + onRestore?: (workspace: Workspace) => void; +} + +export default function Menu(props: Props) { + const { workspaces } = useWorkspaces(); + const [openedMenu, setOpenedMenu] = createSignal< + 'file' | 'settings' | undefined + >(); + let menuRef: HTMLUListElement | undefined; + + onMount(() => { + document.addEventListener('click', onClickOutside); + }); + + onCleanup(() => { + document.removeEventListener('click', onClickOutside); + }); + + function onClickOutside(event: MouseEvent) { + if (menuRef && !menuRef.contains(event.target as Node)) { + setOpenedMenu(undefined); + } + } + + return ( + + ); +} diff --git a/apps/playground/src/components/menu/MenuButton.tsx b/apps/playground/src/components/menu/MenuButton.tsx new file mode 100644 index 00000000..38be3232 --- /dev/null +++ b/apps/playground/src/components/menu/MenuButton.tsx @@ -0,0 +1,32 @@ +import { Index, Show, type JSX, type ParentProps } from 'solid-js'; + +interface Props { + shortcut?: string[]; + class?: string; + onClick?: () => void; +} + +export default function MenuButton(props: ParentProps) { + const onClick: JSX.EventHandler = (event) => { + event.target.closest('details')?.removeAttribute('open'); + props.onClick?.(); + }; + + return ( +
  • + + {props.children} + + + {(key, index) => ( + <> + 0}>+ + {key()} + + )} + + + +
    • + ); +} diff --git a/apps/playground/src/components/menu/MenuDropdown.tsx b/apps/playground/src/components/menu/MenuDropdown.tsx new file mode 100644 index 00000000..3e6f67f5 --- /dev/null +++ b/apps/playground/src/components/menu/MenuDropdown.tsx @@ -0,0 +1,23 @@ +import type { JSX, ParentProps } from 'solid-js'; + +interface Props { + title: JSX.Element; +} + +export default function MenuDropdown(props: ParentProps) { + return ( +
  • +
    +
    + {props.title} +
    +
      + {props.children} +
    +
    +
    • + ); +} diff --git a/apps/playground/src/components/menu/MenuHeader.tsx b/apps/playground/src/components/menu/MenuHeader.tsx new file mode 100644 index 00000000..9cde90c0 --- /dev/null +++ b/apps/playground/src/components/menu/MenuHeader.tsx @@ -0,0 +1,24 @@ +import type { JSX, ParentProps } from 'solid-js'; + +interface Props { + title: JSX.Element; + open?: boolean; + href?: string; + onOpen?: () => void; +} + +export default function MenuHeader(props: ParentProps) { + return ( +
  • +
    { + if (e.currentTarget.open) props.onOpen?.(); + }} + > + {props.title} +
      {props.children}
    +
    +
    • + ); +} diff --git a/apps/playground/src/components/menu/MenuSetting.tsx b/apps/playground/src/components/menu/MenuSetting.tsx new file mode 100644 index 00000000..d0a8c0ea --- /dev/null +++ b/apps/playground/src/components/menu/MenuSetting.tsx @@ -0,0 +1,9 @@ +import type { ParentProps } from 'solid-js'; + +export default function MenuSetting(props: ParentProps) { + return ( +
  • + +
    • + ); +}