BitstylesPhoenix.Alpine3.Sidebar (bitstyles_phoenix v2.3.0) View Source

Components for rendering a sidebar layout powered by Alpine 3.

Full example

iex> assigns = %{}
...> render ~H"""
...> <.ui_js_sidebar_layout>
...>   <:large_sidebar>
...>     <a href="#" class="u-padding-l">
...>       <img src="assets/logo.svg" aria-hidden="true" width="100"/>
...>       <span class="u-sr-only">
...>         bitcrowd
...>       </span>
...>     </a>
...>   </:large_sidebar>
...>   <:small_sidebar :let={s} id="sidebar-small">
...>     <div class="u-flex">
...>       <a href="#" class="u-flex-grow-1 u-padding-l">
...>         <img src="assets/logo.svg" aria-hidden="true" width="100" />
...>         <span class="u-sr-only">bitcrowd</span>
...>       </a>
...>       <div>
...>         <.ui_js_sidebar_close sidebar={s}/>
...>       </div>
...>     </div>
...>   </:small_sidebar>
...>   <:sidebar_content>
...>     <.ui_sidebar_nav>
...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" variant="nav">Menu item #1</.ui_button></.ui_sidebar_nav_item>
...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" variant="nav">Menu item #2</.ui_button></.ui_sidebar_nav_item>
...>     </.ui_sidebar_nav>
...>   </:sidebar_content>
...>   <:main :let={s} class="u-margin-s-top">
...>     <.ui_content class="flex">
...>       <.ui_js_sidebar_open sidebar={s} class="u-margin-s-right"/>
...>       Main Content
...>     </.ui_content>
...>   </:main>
...> </.ui_js_sidebar_layout>
...> """
"""
<div class="u-flex u-height-100vh" x-data="{ sidebarOpen: false }">
  <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">
        <a href="#" class="u-padding-l">
          <img src="assets/logo.svg" aria-hidden="true" width="100"/>
          <span class="u-sr-only">
            bitcrowd
          </span>
        </a>
        <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto 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 href="#" class="a-button a-button--nav u-flex-grow-1">
              Menu item #1
            </a>
          </li>
          <li class="u-margin-xs-bottom u-flex">
            <a href="#" class="a-button a-button--nav u-flex-grow-1">
              Menu item #2
            </a>
          </li>
        </ul>
      </div>
      <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-80 u-fg-gray-30" @click.away="sidebarOpen = false" id="sidebar-small" x-cloak="x-cloak" x-show="sidebarOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
        <div class="u-flex">
          <a href="#" class="u-flex-grow-1 u-padding-l">
            <img src="assets/logo.svg" aria-hidden="true" width="100"/>
            <span class="u-sr-only">
              bitcrowd
            </span>
          </a>
          <div>
            <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-controls="sidebar-small" class="a-button a-button--icon a-button--icon-reversed" title="Close">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
                <use xlink:href="#icon-cross">
                </use>
              </svg>
              <span class="u-sr-only">
                Close
              </span>
            </button>
          </div>
        </div>
        <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto 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 href="#" class="a-button a-button--nav u-flex-grow-1">
              Menu item #1
            </a>
          </li>
          <li class="u-margin-xs-bottom u-flex">
            <a href="#" class="a-button a-button--nav u-flex-grow-1">
              Menu item #2
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <main class="u-flex-grow-1 u-overflow-y-auto u-margin-s-top">
    <div class="a-content flex">
      <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = true" aria-controls="sidebar-small" class="a-button a-button--icon u-hidden@l u-margin-s-right" title="Open sidebar">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
          <use xlink:href="#icon-hamburger">
          </use>
        </svg>
        <span class="u-sr-only">
          Open sidebar
        </span>
      </button>
      Main Content
    </div>
  </main>
</div>
"""

Requires additional content on the page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.5.1/cdn.min.js" defer></script>
<svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
  <symbol id="icon-cross" viewBox="0 0 100 100">
    <path d="M84.12,76.7,57.43,50,84.12,23.3a5.25,5.25,0,0,0-7.42-7.42L50,42.57,23.3,15.88a5.25,5.25,0,0,0-7.42,7.42L42.57,50,15.88,76.7a5.25,5.25,0,1,0,7.42,7.42L50,57.43,76.7,84.12a5.25,5.25,0,1,0,7.42-7.42Z"/>
  </symbol>
  <symbol id="icon-hamburger" viewBox="0 0 100 100">
    <path d="M6,25.57a4.58,4.58,0,0,1,3.23-7.82H88.9a4.58,4.58,0,0,1,0,9.15H9.25A4.54,4.54,0,0,1,6,25.57ZM88.9,45.43H9A4.59,4.59,0,0,0,4.68,50a4.56,4.56,0,0,0,4.57,4.57H88.9A4.58,4.58,0,0,0,93.48,50h0A4.59,4.59,0,0,0,88.9,45.43Zm0,27.67H9.25a4.58,4.58,0,0,0,0,9.15H88.9a4.58,4.58,0,1,0,0-9.15Z"/>
  </symbol>
</svg>

Link to this section Summary

Functions

A sidebar close icon to be rendered on the open sidebar for closing the sidebar. For examles see ui_js_sidebar_layout/1.

Renders a sidebar layout with Alpine3.

A sidebar open icon to be rendered on the main content for opening the sidebar. For examles see ui_js_sidebar_layout/1.

Link to this section Functions

Link to this function

ui_js_sidebar_close(assigns)

View Source

A sidebar close icon to be rendered on the open sidebar for closing the sidebar. For examles see ui_js_sidebar_layout/1.

Attributes

  • label - A screen reader label for the icon. Defaults to "Close".
  • sidebar - The reference to the sidebar it controls. This is a tuple with the sidebar's x_name and the sidebars id. The ui_js_sidebar_layout/1 can provide this as a block argument in the small sidebar block.
Link to this function

ui_js_sidebar_layout(assigns)

View Source

Renders a sidebar layout with Alpine3.

Supports all attributes and slots from BitstylesPhoenix.Component.Sidebar.ui_sidebar_layout/1.

Attributes

  • x_name - The name of the boolean x-data property for alpine to store the menu state. Defaults to "sidebarOpen".

The small_sidebar and main/inner blocks will additionally provide a block argument with the sidebar context for ui_js_sidebar_open/1 and ui_js_sidebar_close/1.

Prevent page-flickering

The sidebar small layout sets the x-cloak property on the menu to avoid flickering on initial page load. To make this work, you need to add the following snippet to your stylesheets:

[x-cloak] { display: none !important; }

See https://alpinejs.dev/directives/cloak for more information on x-cloak.

Link to this function

ui_js_sidebar_open(assigns)

View Source

A sidebar open icon to be rendered on the main content for opening the sidebar. For examles see ui_js_sidebar_layout/1.

Attributes

  • label - A screen reader label for the icon. Defaults to "Open sidebar".
  • sidebar - The reference to the sidebar it controls. This is a tuple with the sidebar's x_name and the sidebars id. The ui_js_sidebar_layout/1 can provide this as a block argument in the main or inner block.