Sidebar

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.

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.

The sidebar component supports six distinct variants: base, default, outline, gradient, bordered, and transparent. Each variant can be styled with a variety of colors, including natural, primary, secondary, dark, success, warning, danger, info, silver, misc, and dawn. The default and bordered variants have also white and dark colors which are the same colors in the dark and light mode. The base variant ignores color.

<!--Default variant is base which ignores color-->
<!--You don't need to specify name of variant and color for base variant-->
<.sidebar id="unique_id" variant="base"></.sidebar>

<.sidebar id="unique_id" variant="default" 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="bordered" color="dark"></.sidebar>

<.sidebar id="unique_id" variant="gradient" color="success"></.sidebar>

<.sidebar id="unique_id" variant="outline" color="warning"></.sidebar>

<.sidebar id="unique_id" variant="gradient" color="danger"></.sidebar>

<.sidebar id="unique_id" variant="bordered" color="info"></.sidebar>

<.sidebar id="unique_id" variant="transparent" color="silver"></.sidebar>

<.sidebar id="unique_id" variant="default" color="misc"></.sidebar>

<.sidebar id="unique_id" variant="default" color="dawn"></.sidebar>

The border prop offers values like "extra_small", "small", "medium", "large", and "extra_large". Only Bordered and Outline variants can have border by default.

<.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>

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>

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>

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>

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_position_value")}
>
  Open Sidebar
</button>

Controls whether the minimize button is shown. Accepts a boolean value. Default is false.

<.sidebar id="sidebar-minimize" minimize>
  <:item
    icon="hero-user"
    icon_class="text-gray-500"
    label="Profile"
    label_class="text-sm text-gray-700"
    link="/profile"
  />
  <:item
    icon="hero-bell"
    icon_class="text-red-400"
    label="Notifications"
    label_class="font-medium"
    link="/notifications"
  />
</.sidebar>

Slot for defining individual sidebar navigation items. Each :item can have the following attributes:

• icon: Icon name to display.
• icon_class: CSS class for the icon element.
• label: Text label shown in the item.
• label_class: CSS class for the label text.
• link: The URL the item links to.
• class: CSS class for the whole item container.

This slot can be used multiple times to render a list of navigational links inside the sidebar.

<.sidebar id="sidebar-items">
  <:item
    icon="hero-user"
    icon_class="text-gray-500"
    label="Profile"
    label_class="text-sm text-gray-700"
    link="/profile"
  />
  <:item
    icon="hero-bell"
    icon_class="text-red-400"
    label="Notifications"
    label_class="font-medium"
    link="/notifications"
  />
</.sidebar>