BitstylesPhoenix.Component.Sidebar (bitstyles_phoenix v2.2.0) View Source
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" 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>
...> <.ui_sidebar_section border="top">
...> <.ui_dropdown variant={["top", "full-width"]}>
...> <:button variant="nav-large">
...> <div class="a-button__icon a-avatar">
...> <img src="https://placekitten.com/100/150" 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-80 u-fg-gray-30">
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-70-bottom u-margin-xs-bottom">
Menu
</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 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-70-top u-margin-xs-top">
<div class="u-relative">
<button type="button" class="a-button a-button--nav-large">
<div class="a-button__icon a-avatar">
<img src="https://placekitten.com/100/150" 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 a-list-reset a-dropdown--top a-dropdown--full-width u-margin-s-bottom">
<li>
<a href="#" class="a-button 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-80 u-fg-gray-30">
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-70-bottom u-margin-xs-bottom">
Menu
</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 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-70-top u-margin-xs-top">
<div class="u-relative">
<button type="button" class="a-button a-button--nav-large">
<div class="a-button__icon a-avatar">
<img src="https://placekitten.com/100/150" 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 a-list-reset a-dropdown--top a-dropdown--full-width u-margin-s-bottom">
<li>
<a href="#" class="a-button 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>
"""
Link to this section Summary
Functions
Renders a sidebar component.
A navigation menu for usage in the sidebar.
A navigation menu item for usage in ui_sidebar_nav/1
.
A navigation section with a bottom or top border. See top level module doc for an example.
Link to this section Functions
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 outerdiv
SeeBitstylesPhoenix.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 sidebarsmall_sidebar
- Content that is only shown on small screens in the sidebarsidebar_content
- Content that is shown on all screens in the sidebarmain
- 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 SeeBitstylesPhoenix.Helper.classnames/1
for usage.fg
- The forground color class for the text. Defaults togray-30
resulting infg-gray-30
.bg
- The background color class for the sidebar. Defaults togray-80
resulting infg-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 SeeBitstylesPhoenix.Helper.classnames/1
for usage.fg
- The forground color class for the text. Defaults togray-30
resulting infg-gray-30
.bg
- The background color class for the sidebar. Defaults togray-80
resulting infg-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 SeeBitstylesPhoenix.Helper.classnames/1
for usage.- All other attributes are passed on to the large and small sidebar
div
s
Attributes - main
slot
class
- Extra classes to pass to themain
tag. SeeBitstylesPhoenix.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>
"""
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 outerdiv
SeeBitstylesPhoenix.Helper.classnames/1
for usage.border
- Either:top
or:bottom
(optional)border_color
- The border color, defaults togray-70
resulting inu-border-gray-70-top
for a:top
border.- All other attributes are passed on to the outer
div