Doggo Storybook 0.9.0

Drawer

Renders a drawer with a brand, top, and bottom slot.

Read more Read less

All slots are optional, and you can render any content in them. If you want to use the drawer as a sidebar, you can use the vertical_nav/1 and vertical_nav_section/1 components.

Usage

Minimal example:

<.drawer>
  <:main>Content</:main>
</.drawer>

With all slots:

<.drawer>
  <:header>Doggo</:header>
  <:main>Content at the top</:main>
  <:footer>Content at the bottom</:footer>
</.drawer>

With navigation and sections:

<.drawer>
  <:header>
    <.link navigate={~p"/"}>App</.link>
  </:header>
  <:main>
    <.vertical_nav label="Main">
      <:item>
        <.link navigate={~p"/dashboard"}>Dashboard</.link>
      </:item>
      <:item>
        <.vertical_nav_nested>
          <:title>Content</:title>
          <:item current_page>
            <.link navigate={~p"/posts"}>Posts</.link>
          </:item>
          <:item>
            <.link navigate={~p"/comments"}>Comments</.link>
          </:item>
        </.vertical_nav_nested>
      </:item>
    </.vertical_nav>
    <.vertical_nav_section>
      <:title>Search</:title>
      <:item><input type="search" placeholder="Search" /></:item>
    </.vertical_nav_section>
  </:main>
  <:footer>
    <.vertical_nav label="User menu">
      <:item>
        <.link navigate={~p"/settings"}>Settings</.link>
      </:item>
      <:item>
        <.link navigate={~p"/logout"}>Logout</.link>
      </:item>
    </.vertical_nav>
  </:footer>
</.drawer>
Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
rest :global Any additional HTML attributes.
footer :slot Slot for content that is rendered at the end of the drawer, potentially pinned to the bottom, if there is enough room. 
<:footer>
  Footer
</:footer>
header :slot Optional slot for the brand name or logo. 
<:header>
  <Phoenix.Component.link navigate="/">
    Pet Clinic
  </Phoenix.Component.link>
</:header>
main :slot Slot for content that is rendered after the brand, at the start of the side bar. 
<:main>
  Main
</:main>