<script lang="ts">
  import cx from "classnames"
  import type {Snippet} from "svelte"

  interface Props {
    class?: string
    visible?: boolean
    children?: Snippet
  }

  const {children, visible = false, ...props}: Props = $props()
</script>

<div
  class={cx(
    "mt-sai mb-sai max-h-screen w-60 min-h-0 shrink-0 flex-col gap-1 bg-base-300 z-nav md:shadow-[6px_0_24px_-12px_rgba(0,0,0,0.35)]",
    visible ? "flex" : "hidden md:flex",
    props.class,
  )}>
  {@render children?.()}
</div>
