BitstylesPhoenix.Component.Sidebar.ui_sidebar
You're seeing just the function
ui_sidebar
, go back to BitstylesPhoenix.Component.Sidebar module for more information.
Renders a sidebar component.
In order for this component to work you have to provide extra JS like shown in the examples.
Attributes
class
- Extra classes to pass to the outerdiv
SeeBitstylesPhoenix.Helper.classnames/1
for usage.icon_file
- The external SVG file with icons to be passed on toBitstylesPhoenix.Component.Icon.ui_icon/1
for the dropdown icon. Only needed if SVG icons are not provided inline and if not rendering custom button content.- All other attributes are passed on to the outer
div
Bare sidebar
iex> assigns = %{}
...> render ~H"""
...> <.ui_sidebar>
...> <:large><span class="u-fg--gray-30">Large content</span></:large>
...> <:small><span class="u-fg--gray-30">Small content</span></:small>
...> Content
...> </.ui_sidebar>
...> """
"""
<div class="u-flex u-height-100vh">
<header role="banner" class="u-flex">
<nav class="u-flex">
<div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg--gray-80">
<span class="u-fg--gray-30">
Large content
</span>
</div>
<div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg--gray-80">
<span class="u-fg--gray-30">
Small content
</span>
</div>
</nav>
</header>
<main class="u-flex-grow-1 u-overflow--y">
Content
</main>
</div>
"""
Sidebar with items
iex> assigns = %{}
...> render ~H"""
...> <.ui_sidebar>
...> <:large>Large header</:large>
...> <:small>Small header</:small>
...> <:item><%= ui_button "Menu item #1", to: "#", class: "u-flex-grow-1", variant: "nav" %></:item>
...> <:item><%= ui_button "Menu item #2", to: "#", class: "u-flex-grow-1", variant: "nav" %></:item>
...> Content
...> </.ui_sidebar>
...> """
"""
<div class="u-flex u-height-100vh">
<header role="banner" class="u-flex">
<nav class="u-flex">
<div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg--gray-80">
Large header
<ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow--y a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
<li class="u-margin-xs-bottom u-flex">
<a class="a-button a-button--nav u-flex-grow-1" href="#">
Menu item #1
</a>
</li>
<li class="u-margin-xs-bottom u-flex">
<a class="a-button a-button--nav u-flex-grow-1" href="#">
Menu item #2
</a>
</li>
</ul>
</div>
<div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg--gray-80">
Small header
<ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow--y a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
<li class="u-margin-xs-bottom u-flex">
<a class="a-button a-button--nav u-flex-grow-1" href="#">
Menu item #1
</a>
</li>
<li class="u-margin-xs-bottom u-flex">
<a class="a-button a-button--nav u-flex-grow-1" href="#">
Menu item #2
</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="u-flex-grow-1 u-overflow--y">
Content
</main>
</div>
"""