gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 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 { Dropdown as BootstrapDropdown, Tooltip } from "bootstrap";
import { ComponentChildren } from "preact"; import { ComponentChildren } from "preact";
import Icon from "./Icon"; 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 "./FormList.css";
import { CommandNames } from "../../components/app_context"; import { CommandNames } from "../../components/app_context";
import { useStaticTooltip } from "./hooks"; import { useStaticTooltip } from "./hooks";
import { isMobile } from "../../services/utils";
interface FormListOpts { interface FormListOpts {
children: ComponentChildren; children: ComponentChildren;
@ -145,14 +146,25 @@ export function FormDropdownDivider() {
} }
export function FormDropdownSubmenu({ icon, title, children }: { icon: string, title: ComponentChildren, children: ComponentChildren }) { export function FormDropdownSubmenu({ icon, title, children }: { icon: string, title: ComponentChildren, children: ComponentChildren }) {
const [ openOnMobile, setOpenOnMobile ] = useState(false);
return ( return (
<li className="dropdown-item dropdown-submenu"> <li className={`dropdown-item dropdown-submenu ${openOnMobile ? "submenu-open" : ""}`}>
<span class="dropdown-toggle"> <span
className="dropdown-toggle"
onClick={(e) => {
e.stopPropagation();
if (isMobile()) {
setOpenOnMobile(!openOnMobile);
}
}}
>
<Icon icon={icon} /> <Icon icon={icon} />
{title} {title}
</span> </span>
<ul className="dropdown-menu"> <ul className={`dropdown-menu ${openOnMobile ? "show" : ""}`}>
{children} {children}
</ul> </ul>
</li> </li>