Renders a drawer with a brand
, top
, and bottom
slot.
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.
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>
<.drawer> <:header> <Phoenix.Component.link navigate="/"> Pet Clinic </Phoenix.Component.link> </:header> <:main> Main </:main> <:footer> Footer </:footer> </.drawer>