Overview of the Phoenix LiveView Sidebar Component
The Mishka Chelekom sidebar component is a highly versatile Phoenix LiveView tool for creating interactive and customizable sidebars. It is perfect for navigation menus, collapsible content, and other dynamic interface elements, offering various configuration options for sizes, colors, and border styles to fit your app's design.
This Phoenix LiveView component also supports toggling visibility, different positioning options, and custom triggers for click or interaction events, providing a flexible and dynamic solution for improving user engagement and accessibility.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.
Note: id prop is required and each sidebar should have unique id.Note: The sidebar is displayed by default on desktop but hidden on smaller screens. Since we have multiple examples here and they might not display correctly, we've added a button so you can see how the sidebar works. On smaller screens, it will function like a drawer component, and you can use a JS module to add a button, such as a hamburger menu, to toggle its visibility, allowing users to easily open and close the sidebar.
In the first examples, we've already added a button for displaying the sidebar on mobile, and the code is provided in the "on mobile" section for reference. To see this in action, you can either change the user agent or reduce the screen size to view the mobile version of the example.
About LiveView JS module commands
In the sidebar component, there are three attributes that allow users to execute custom LiveView JS commands when certain actions like showing or hiding occur. These attributes are:
- on_hide: This attribute lets the user execute an additional JavaScript command when the sidebar is hidden, alongside the default toggle action. For instance, a user might want to push some data to the server or trigger another function when the sidebar hides.
- on_show: This attribute allows you to run a custom JavaScript command when the sidebar is shown. Users can, for example, send data, log an event, or perform any other action when the sidebar is displayed.
- on_hide_away: This attribute allows for the execution of a JavaScript command when the sidebar is hidden by clicking outside of it. This could be useful for logging interactions or sending specific data back to the server.
These attributes give developers more control over the interactions with the sidebar, allowing for complex actions to be performed using custom JavaScript beyond just the default show/hide behavior.
Sidebar variant and color props
The sidebar component
supports five distinct variants:
default
,
outline
,
unbordered
,
transparent
, and
shadow
. Each variant can be styled with a variety of colors, including
white
,
primary
,
secondary
,
dark
,
success
,
warning
,
danger
,
info
,
light
,
misc
, and
dawn
.
<.sidebar id="unique_id" color="white"></.sidebar> <.sidebar id="unique_id" variant="outline" color="primary"></.sidebar> <.sidebar id="unique_id" variant="transparent" color="secondary"></.sidebar> <.sidebar id="unique_id" variant="unbordered" color="dark"></.sidebar> <.sidebar id="unique_id" variant="shadow" color="success"></.sidebar> <.sidebar id="unique_id" variant="outline" color="warning"></.sidebar> <.sidebar id="unique_id" variant="shadow" color="danger"></.sidebar> <.sidebar id="unique_id" variant="unbordered" color="info"></.sidebar> <.sidebar id="unique_id" variant="transparent" color="light"></.sidebar> <.sidebar id="unique_id" variant="default" color="misc"></.sidebar> <.sidebar id="unique_id" color="dawn"></.sidebar>
Border prop
The border prop offers values like
"extra_small"
,
"small"
,
"medium"
,
"large"
, and
"extra_large"
.
<.sidebar id="unique_id" border="extra_small"></.sidebar> <.sidebar id="unique_id" border="small"></.sidebar> <.sidebar id="unique_id" border="medium"></.sidebar> <.sidebar id="unique_id" border="large"></.sidebar> <.sidebar id="unique_id" border="extra_large"></.sidebar>
Size prop
The
size
prop allows developers to control the overall size of the sidebar component. It offers predefined values such as
extra_small
,
small
,
medium
,
large
, and
extra_large
, which adjust the width or height of the sidebar depending on its position. For sidebars positioned on the left or right of the screen, the prop adjusts the width, while for sidebars positioned at the top or bottom, it controls the height. This flexibility ensures the sidebar can fit various design requirements, making it adaptable for different content and use cases.
<.sidebar id="unique_id" size="extra_small"></.sidebar> <.sidebar id="unique_id" size="small"></.sidebar> <.sidebar id="unique_id" size="medium"></.sidebar> <.sidebar id="unique_id" size="large"></.sidebar> <.sidebar id="unique_id" size="extra_large"></.sidebar>
Position prop
The
position
prop supports values like
start
and
end
, with the default being
start
. Based on the text direction (LTR or RTL), this positions the sidebar at the start of the page.
<.sidebar id="unique_id" position="start"></.sidebar> <.sidebar id="unique_id" position="end"></.sidebar>
Hide position prop
The
hide_position
attribute determines the direction the sidebar hides on mobile, with
"left"
sliding it off to the left and
"right"
sliding it off to the right for a smooth user experience.
<.sidebar id="unique_id" hide_position="left"></.sidebar> <.sidebar id="unique_id" hide_position="right"></.sidebar>
On small devices
You can add the
Sidebar.show_sidebar("unique_id", "hide_position")
function to a button, allowing you to toggle the sidebar on smaller devices.
<button phx-click={Sidebar.show_sidebar("unique_sidebar_id", "hide_poistion_value")} > Open Sidebar </button>