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 outer div See BitstylesPhoenix.Helper.classnames/1 for usage.
  • icon_file - The external SVG file with icons to be passed on to BitstylesPhoenix.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>
"""