style(menu): set min width w/ overflow-x: auto

src/api/interface.js

@@ -537,6 +537,7 @@ const h = (type, props, ...children) => {
       ? document.createElementNS("http://www.w3.org/2000/svg", type)
       : document.createElement(type);
     for (const prop in props ?? {}) {
+      if (typeof props[prop] === "undefined") continue;
       if (htmlAttributes.includes(prop) || prop.startsWith("data-")) {
         if (typeof props[prop] === "boolean") {
           if (!props[prop]) continue;

src/core/menu/islands/Banner.mjs

@@ -12,11 +12,13 @@ const rectToStyle = (rect) =>
     .map((prop) => `${prop}: ${rect[prop]};`)
     .join("");
 
-function Star(rect) {
+function Star({ from, ...rect }) {
   const { html } = globalThis.__enhancerApi;
   return html`<svg
     viewBox="0 0 24 24"
-    class="absolute fill-none skew-y-2"
+    class="absolute fill-none skew-y-2${from
+      ? ` hidden ${from}:inline-block`
+      : ""}"
     xmlns="http://www.w3.org/2000/svg"
     style=${rectToStyle(rect)}
   >
@@ -64,7 +66,8 @@ function Banner({ version }) {
   // gradient bg?
   // brand font? links?
   return html`<div
-    class="relative flex h-[192px] overflow-hidden rounded-[4px] border-(& [color:#c084fc]"
+    class="notion-enhancer--menu-banner relative flex
+    overflow-hidden h-[192px] rounded-[4px] border-(& [color:#c084fc]"
     style="background: linear-gradient(225deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%), #a855f7;"
   >
     <${Circle} width="128px" height="128px" bottom="-64px" left="-64px" />
@@ -73,17 +76,20 @@ function Banner({ version }) {
     <${Circle} width="144px" height="144px" bottom="-72px" right="144px" />
     <${Star} width="36px" height="36px" top="136px" left="190px" />
     <${Star} width="48px" height="48px" top="32px" left="336px" />
-    <${Star} width="64px" height="64px" top="90px" left="448px" />
+    <${Star} width="64px" height="64px" top="90px" left="448px" from="lg" />
 
     <h1
-      class="pl-[64px] pb-[24px] my-auto
+      class="z-10 pl-[32px] md:pl-[48px] lg:pl-[64px] pb-[24px]
-      font-bold leading-tight tracking-tight"
+      font-bold leading-tight tracking-tight my-auto"
     >
       <span class="text-[26px]">Welcome to</span><br />
       <span class="text-[28px]">the notion-enhancer</span>
     </h1>
 
-    <div class="flex flex-col pr-[64px] pb-[24px] absolute bottom-0 right-0">
+    <div
+      class="absolute flex bottom-0 right-0
+      flex-col pr-[32px] md:pr-[48px] lg:pr-[64px] pb-[24px]"
+    >
       <i class="i-notion-enhancer text-[42px] mx-auto mb-[8px]"></i>
       <span
         class="text-[12px] py-[2px] px-[6px]

src/core/menu/islands/Footer.mjs

@@ -47,13 +47,13 @@ function Footer({ categories }) {
     updateFooter();
   });
 
-  return html`<div
+  return html`<footer
-    class="flex w-full px-[60px] py-[16px]
+    class="notion-enhancer--menu-footer px-[60px] py-[16px]
-    border-t-(& [color:var(--theme--fg-border)])
+    flex w-full bg-[color:var(--theme--bg-primary)]
-    bg-[color:var(--theme--bg-primary)]"
+    border-t-(& [color:var(--theme--fg-border)])"
   >
     ${buttons}
-  </div>`;
+  </footer>`;
 }
 
 export { Footer };

src/core/menu/islands/Sidebar.mjs

@@ -51,8 +51,8 @@ function SidebarButton({ id, icon, ...props }, ...children) {
 function Sidebar({ items, categories }) {
   const { html, isEnabled } = globalThis.__enhancerApi,
     $sidebar = html`<aside
-      class="notion-enhancer--menu-sidebar z-10 row-span-1
+      class="notion-enhancer--menu-sidebar h-full row-span-1
-    h-full overflow-y-auto bg-[color:var(--theme--bg-secondary)]"
+      overflow-y-auto bg-[color:var(--theme--bg-secondary)]"
     >
       ${items.map((item) => {
         if (typeof item === "object") {

src/core/menu/islands/View.mjs

@@ -4,14 +4,15 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-import { useState } from "../state.mjs";
+import { setState, useState } from "../state.mjs";
 
 function View({ id }, ...children) {
   const { html } = globalThis.__enhancerApi,
+    // set padding on last child to maintain pad on overflow
     $view = html`<article
       id=${id}
-      class="notion-enhancer--menu-view h-full w-full
+      class="notion-enhancer--menu-view absolute h-full w-full
-    absolute overflow-y-auto px-[60px] py-[36px]"
+      min-w-[580px] px-[60px] pt-[36px] !children:last:pb-[36px]"
     >
       ${children}
     </article>`;
@@ -26,6 +27,7 @@ function View({ id }, ...children) {
         const duration = 100,
           cssTransition = `opacity ${duration}ms`;
         if (isVisible && !nowActive) {
+          setState({ transitionInProgress: true });
           $view.style.transition = cssTransition;
           $view.style.opacity = "0";
           setTimeout(() => ($view.style.display = "none"), duration);
@@ -36,6 +38,7 @@ function View({ id }, ...children) {
             requestIdleCallback(() => {
               $view.style.transition = cssTransition;
               $view.style.opacity = "1";
+              setState({ transitionInProgress: false });
             });
           }, duration);
         }
@@ -47,6 +50,7 @@ function View({ id }, ...children) {
         const duration = 200,
           cssTransition = `opacity ${duration}ms, transform ${duration}ms`;
         if (isVisible && !nowActive) {
+          setState({ transitionInProgress: true });
           $view.style.transition = cssTransition;
           $view.style.transform = `translateX(${
             transition === "slide-to-right" ? "-100%" : "100%"
@@ -66,6 +70,9 @@ function View({ id }, ...children) {
             $view.style.transition = cssTransition;
             $view.style.transform = "";
             $view.style.opacity = "1";
+            setTimeout(() => {
+              setState({ transitionInProgress: false });
+            }, duration);
           });
         }
         break;

src/core/menu/menu.mjs

@@ -118,16 +118,18 @@ const render = async () => {
     />`,
     $main = html`
       <main class="flex flex-col overflow-hidden transition-[height]">
-        <!-- wrapper necessary for transitions -->
+        <!-- wrappers necessary for transitions and breakpoints -->
-        <div class="grow relative overflow-hidden">
+        <div class="grow overflow-auto">
-          <${View} id="welcome"><${Banner} version=${enhancerVersion} /><//>
+          <div class="relative h-full w-full">
-          <${View} id="core">
+            <${View} id="welcome"><${Banner} version=${enhancerVersion} /><//>
-            <${Options} mod=${mods.find(({ _src }) => _src === "core")} />
+            <${View} id="core">
-            <${Profiles} />
+              <${Options} mod=${mods.find(({ _src }) => _src === "core")} />
-          <//>
+              <${Profiles} />
-          ${[...categories, ...mods]
+            <//>
-            .filter(({ view }) => view)
+            ${[...categories, ...mods]
-            .map(({ view }) => view)}
+              .filter(({ view }) => view)
+              .map(({ view }) => view)}
+          </div>
         </div>
         <${Footer} categories=${categories} />
       </main>
@@ -135,6 +137,9 @@ const render = async () => {
   useState(["footerOpen"], ([footerOpen]) => {
     $main.style.height = footerOpen ? "100%" : "calc(100% + 33px)";
   });
+  useState(["transitionInProgress"], ([transitionInProgress]) => {
+    $main.children[0].style.overflow = transitionInProgress ? "hidden" : "";
+  });
 
   const $skeleton = document.querySelector("#skeleton");
   $skeleton.replaceWith($sidebar, $main);