gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 23:29:02 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

chore(react/global_menu): advanced submenu toggle on mobile

Browse Source
This commit is contained in:
Elian Doran 2025-08-29 12:40:16 +03:00
parent 0d1bd3e298
commit 5e4f529b26
No known key found for this signature in database
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/client/src/widgets/react/FormList.tsx
View File

@ -1,10 +1,11 @@
import { Dropdown as BootstrapDropdown, Tooltip } from "bootstrap";
import { ComponentChildren } from "preact";
import Icon from "./Icon";
import { useEffect, useMemo, useRef, type CSSProperties } from "preact/compat";
import { useEffect, useMemo, useRef, useState, type CSSProperties } from "preact/compat";
import "./FormList.css";
import { CommandNames } from "../../components/app_context";
import { useStaticTooltip } from "./hooks";
import { isMobile } from "../../services/utils";
interface FormListOpts {
children: ComponentChildren;
@ -145,14 +146,25 @@ export function FormDropdownDivider() {
}
export function FormDropdownSubmenu({ icon, title, children }: { icon: string, title: ComponentChildren, children: ComponentChildren }) {
const [ openOnMobile, setOpenOnMobile ] = useState(false);
return (
<li className="dropdown-item dropdown-submenu">
<span class="dropdown-toggle">
<li className={`dropdown-item dropdown-submenu ${openOnMobile ? "submenu-open" : ""}`}>
<span
className="dropdown-toggle"
onClick={(e) => {
e.stopPropagation();
if (isMobile()) {
setOpenOnMobile(!openOnMobile);
}
}}
>
<Icon icon={icon} />
{title}
</span>
<ul className="dropdown-menu">
<ul className={`dropdown-menu ${openOnMobile ? "show" : ""}`}>
{children}
</ul>
</li>