import { FunctionComponent } from "preact/src/index.d.ts";

export const Drawer: FunctionComponent = ({ children }) => {
  return (
    <div class="drawer lg:drawer-open">
      <input id="site-drawer" type="checkbox" class="drawer-toggle" />
      <div class="drawer-content pb-16">
        { children }
      </div>
      <div class="drawer-side">
        <label for="site-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
        <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
          <li><a href="/">Packages</a></li>
          <li><a href="/namespaces">Namespaces</a></li>
          <li><a href="/tags">Tags</a></li>
        </ul>
      </div>
    </div>
  )
}