BitstylesPhoenix.Component.Sidebar.ui_sidebar_layout

You're seeing just the function ui_sidebar_layout, go back to BitstylesPhoenix.Component.Sidebar module for more information.
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 (ususally 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-80 u-fg-gray-30">
        Large header
        <div>
          Sidebar
        </div>
      </div>
      <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-80 u-fg-gray-30">
        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-80 u-fg-gray-30">
      </div>
      <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-80 u-fg-gray-30">
      </div>
    </nav>
  </header>
  <main class="u-flex-grow-1 u-overflow-y-auto">
    Main Content
  </main>
</div>
"""