kaas

src/components/sidebar.tsx

@@ -1,29 +1,25 @@
 import { TbLayoutSidebarLeftCollapse, TbLayoutSidebarLeftExpand } from "solid-icons/tb";
-import { createMemo, createSignal, onMount, ParentComponent, Show } from "solid-js";
-import { Dynamic, Portal, render } from "solid-js/web";
+import { createMemo, createSignal, ParentComponent, Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
 import css from "./sidebar.module.css";
 
 export const Sidebar: ParentComponent<{ as?: string, open?: boolean, name?: string }> = (props) => {
-    const [open, setOpen] = createSignal(props.open ?? true)
-    const cssClass = createMemo(() => open() ? css.open : css.closed);
+    const [open, setOpen] = createSignal(props.open ?? true);
     const name = createMemo(() => props.name ?? 'sidebar');
 
-    const toggle = () => setOpen(o => !o);
+    return <Dynamic component={props.as ?? 'div'} class={`${css.root} ${open() ? css.open : css.closed}`}>
+        <button
+            role="button"
+            onclick={() => setOpen(o => !o)}
+            title={`${open() ? 'close' : 'open'} ${name()}`}
+        >
+            <Show when={open()} fallback={<TbLayoutSidebarLeftExpand />}>
+                <TbLayoutSidebarLeftCollapse />
+            </Show>
+        </button>
 
-    let ref: Element;
-    return <Dynamic component={props.as ?? 'div'} class={`${css.root} ${cssClass()}`} ref={ref}>
-        <Portal mount={ref!} useShadow={true}>
-            <button onclick={() => toggle()} role="button" title={`${open() ? 'close' : 'open'} ${name()}`}>
-                <Show when={open()} fallback={<TbLayoutSidebarLeftExpand />}>
-                    <TbLayoutSidebarLeftCollapse />
-                </Show>
-            </button>
-
-            <div class={css.content}>
-                <slot />
-            </div>
-        </Portal>
-
-        {props.children}
+        <div class={css.content}>
+            {props.children}
+        </div>
     </Dynamic>
 };