mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-04 04:39:03 +00:00
44 lines
1.4 KiB
JavaScript
44 lines
1.4 KiB
JavaScript
/**
|
|
* notion-enhancer
|
|
* (c) 2023 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
|
* (https://notion-enhancer.github.io/) under the MIT license
|
|
*/
|
|
|
|
function MenuButton(
|
|
{ icon, notifications, themeOverridesLoaded, ...props },
|
|
...children
|
|
) {
|
|
const { html, extendProps } = globalThis.__enhancerApi;
|
|
extendProps(props, {
|
|
tabindex: 0,
|
|
role: "button",
|
|
class: `notion-enhancer--menu-button flex select-none
|
|
cursor-pointer rounded-[6px] text-[14px] font-medium
|
|
transition hover:bg-[color:var(--theme--bg-hover)]
|
|
w-full h-[30px] px-[8px] py-[4px] items-center`,
|
|
});
|
|
return html`<div ...${props}>
|
|
<div class="flex items-center justify-center size-[22px] mr-[8px]">
|
|
<i class="i-${icon}"></i>
|
|
</div>
|
|
<div>${children}</div>
|
|
|
|
<div class="ml-auto my-auto${notifications > 0 ? "" : " hidden"}">
|
|
<!-- accents are squashed into one variable for theming:
|
|
use rgb to match notion if overrides not loaded -->
|
|
<div
|
|
class="flex justify-center size-[16px] font-semibold mb-[2px]
|
|
text-([10px] [color:var(--theme--accent-secondary\\_contrast)])
|
|
bg-[color:var(--theme--accent-secondary)] rounded-[3px]
|
|
dark:bg-[color:${themeOverridesLoaded
|
|
? "var(--theme--accent-secondary)"
|
|
: "rgb(180,65,60)"}]"
|
|
>
|
|
<span class="ml-[-0.5px]">${notifications}</span>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
export { MenuButton };
|