View Source BitstylesPhoenix.Component.Sidebar (bitstyles_phoenix v2.4.0)

The sidebar component without any JS.

Sidebar with items 

iex> assigns = %{}
...> render ~H"""
...> <.ui_sidebar_layout>
...>   <:large_sidebar>Large header</:large_sidebar>
...>   <:small_sidebar>Small header</:small_sidebar>
...>   <:sidebar_content>
...>     <.ui_sidebar_section border="bottom">
...>       Menu
...>     </.ui_sidebar_section>
...>     <.ui_sidebar_nav>
...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" color="transparent">Menu item #1</.ui_button></.ui_sidebar_nav_item>
...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" color="transparent">Menu item #2</.ui_button></.ui_sidebar_nav_item>
...>     </.ui_sidebar_nav>
...>     <.ui_sidebar_section border="top">
...>       <.ui_dropdown variant={["top", "full-width"]}>
...>         <:button color="transparent">
...>           <div class="a-button__icon a-avatar">
...>             <img src="https://placehold.co/100x150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar" />
...>           </div>
...>           <span class="a-button__label">Jane Dobermann</span>
...>         </:button>
...>         <:menu>
...>           <.ui_dropdown_option href="#">Logout</.ui_dropdown_option>
...>         </:menu>
...>       </.ui_dropdown>
...>     </.ui_sidebar_section>
...>   </:sidebar_content>
...>   Main Content
...> </.ui_sidebar_layout>
...> """
"""
<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-darker u-fg-text">
        Large header
        <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-dark-bottom u-margin-xs-bottom">
          Menu
        </div>
        <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none 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 href="#" class="a-button a-button--transparent u-flex-grow-1">
              Menu item #1
            </a>
          </li>
          <li class="u-margin-xs-bottom u-flex">
            <a href="#" class="a-button a-button--transparent u-flex-grow-1">
              Menu item #2
            </a>
          </li>
        </ul>
        <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-dark-top u-margin-xs-top">
          <div class="u-relative">
            <button type="button" class="a-button a-button--transparent">
              <div class="a-button__icon a-avatar">
                <img src="https://placehold.co/100x150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar"/>
              </div>
              <span class="a-button__label">
                Jane Dobermann
              </span>
            </button>
            <ul class="a-dropdown u-overflow-y-auto u-list-none a-dropdown--top a-dropdown--full-width u-margin-s-bottom">
              <li>
                <a href="#" class="a-button a-button--transparent a-button--menu">
                  Logout
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text">
        Small header
        <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-dark-bottom u-margin-xs-bottom">
          Menu
        </div>
        <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none 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 href="#" class="a-button a-button--transparent u-flex-grow-1">
              Menu item #1
            </a>
          </li>
          <li class="u-margin-xs-bottom u-flex">
            <a href="#" class="a-button a-button--transparent u-flex-grow-1">
              Menu item #2
            </a>
          </li>
        </ul>
        <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-dark-top u-margin-xs-top">
          <div class="u-relative">
            <button type="button" class="a-button a-button--transparent">
              <div class="a-button__icon a-avatar">
                <img src="https://placehold.co/100x150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar"/>
              </div>
              <span class="a-button__label">
                Jane Dobermann
              </span>
            </button>
            <ul class="a-dropdown u-overflow-y-auto u-list-none a-dropdown--top a-dropdown--full-width u-margin-s-bottom">
              <li>
                <a href="#" class="a-button a-button--transparent a-button--menu">
                  Logout
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <main class="u-flex-grow-1 u-overflow-y-auto">
    Main Content
  </main>
</div>
"""

Summary

Functions

ui_sidebar_layout(assigns)

Renders a sidebar component.

ui_sidebar_nav(assigns)

A navigation menu for usage in the sidebar.

ui_sidebar_nav_item(assigns)

A navigation menu item for usage in ui_sidebar_nav/1.

ui_sidebar_section(assigns)

A navigation section with a bottom or top border. See top level module doc for an example.

Functions

Link to this function

ui_sidebar_layout(assigns)

View Source

Renders a sidebar component.

In order for the sidebar to be collapsible in small screens, you need to provide extra JS attributes.

Attributes

  • class - Extra classes to pass to the outer div See BitstylesPhoenix.Helper.classnames/1 for usage.
  • All other attributes are passed on to the outer div

The sidebar comes with 4 slots:

  • large_sidebar - Content that is only shown on large screens in the sidebar
  • small_sidebar - Content that is only shown on small screens in the sidebar
  • sidebar_content - Content that is shown on all screens in the sidebar
  • main - The main content of the page (next to the sidebar)

Instead of the main slot you can also just use the inner content of the sidebar, but the slot is valuable if you want to provide extra attributes on the main tag. The large_siebar and small_sidebar slots are displayed before the sidebar_content in the layout, since typically they host the logo/header/brand name, while the main navigation is hosted in the sidebar_content slot and shown on all screens. The reason for this separation is that the sidebar in the small screen is meant to start out hidden and only be shown when needed and therefore needs control buttons to close it again (usually at the top of the screen). If you have different requirements you can simply omit the sidebar_content block and render the shared content twice yourself.

Attributes - small_sidebar slot

  • class - Extra classes to pass to the div containing the small sidebar See BitstylesPhoenix.Helper.classnames/1 for usage.
  • fg - The forground color class for the text. Defaults to gray-30 resulting in fg-gray-30.
  • bg - The background color class for the sidebar. Defaults to gray-80 resulting in fg-gray-80.
  • All other attributes are passed on to the small sidebar div

Attributes - large_sidebar slot

  • class - Extra classes to pass to the div containing the large sidebar See BitstylesPhoenix.Helper.classnames/1 for usage.
  • fg - The forground color class for the text. Defaults to gray-30 resulting in fg-gray-30.
  • bg - The background color class for the sidebar. Defaults to gray-80 resulting in fg-gray-80.
  • All other attributes are passed on to the large sidebar div

Attributes - sidebar_content slot

  • class - Extra classes to pass to the div containing the large and small sidebar See BitstylesPhoenix.Helper.classnames/1 for usage.
  • All other attributes are passed on to the large and small sidebar divs

Attributes - main slot

  • class - Extra classes to pass to the main tag. See BitstylesPhoenix.Helper.classnames/1 for usage.
  • All other attributes are passed on to the main tag.

See the bitstyles sidebar docs for more examples.

Bare sidebar 

iex> assigns = %{}
...> render ~H"""
...> <.ui_sidebar_layout>
...>   <:large_sidebar>Large header</:large_sidebar>
...>   <:small_sidebar>Small header</:small_sidebar>
...>   <:sidebar_content><div>Sidebar</div></:sidebar_content>
...>   <:main>Main Content</:main>
...> </.ui_sidebar_layout>
...> """
"""
<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-darker u-fg-text">
        Large header
        <div>
          Sidebar
        </div>
      </div>
      <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text">
        Small header
        <div>
          Sidebar
        </div>
      </div>
    </nav>
  </header>
  <main class="u-flex-grow-1 u-overflow-y-auto">
    Main Content
  </main>
</div>
"""

All slots are optional 

iex> assigns = %{}
...> render ~H"""
...> <.ui_sidebar_layout>
...>   Main Content
...> </.ui_sidebar_layout>
...> """
"""
<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-darker u-fg-text">
      </div>
      <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text">
      </div>
    </nav>
  </header>
  <main class="u-flex-grow-1 u-overflow-y-auto">
    Main Content
  </main>
</div>
"""
Link to this function

ui_sidebar_nav(assigns)

View Source

A navigation menu for usage in the sidebar.

Attributes

  • class - Extra classes to pass to the outer ul See BitstylesPhoenix.Helper.classnames/1 for usage.
  • All other attributes are passed on to the outer ul

You can add items ui_sidebar_nav_item/1 to add items to the navigation.

Link to this function

ui_sidebar_nav_item(assigns)

View Source

A navigation menu item for usage in ui_sidebar_nav/1.

Attributes

  • class - Extra classes to pass to the li See BitstylesPhoenix.Helper.classnames/1 for usage.

The component is meant to be used with ui_button to add links here like showcased in the top level module documentation.

Link to this function

ui_sidebar_section(assigns)

View Source

A navigation section with a bottom or top border. See top level module doc for an example.

Attributes

  • class - Extra classes to pass to the outer div See BitstylesPhoenix.Helper.classnames/1 for usage.
  • border - Either :top or :bottom (optional)
  • border_color - The border color, defaults to gray-dark resulting in u-border-gray-dark-top for a :top border.
  • All other attributes are passed on to the outer div