Overview of the Phoenix and LiveView Drawer Component

The Mishka Chelekom Drawer component allows you to create flexible and customizable sliding panels for displaying hidden content, such as navigation, sidebars, or additional information. It's a versatile component that can be positioned on the left, right, top, or bottom of the viewport, providing an intuitive and accessible way to display or hide content as needed. The drawer can be easily integrated with Phoenix and Phoenix LiveView, making it an ideal solution for enhancing user interactivity.

This Phoenix LiveView component is perfect for enhancing user experience by providing dynamic and interactive sliding panels that can be triggered by various actions, offering both visual appeal and functional utility.

About LiveView JS module commands

In the drawer 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 drawer 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 drawer hides.
• on_show: This attribute allows you to run a custom JavaScript command when the drawer is shown. Users can, for example, send data, log an event, or perform any other action when the drawer is displayed.
• on_hide_away: This attribute allows for the execution of a JavaScript command when the drawer is hidden by clicking outside of it. This could be useful for logging interactions or sending specific data back to the server.

Default Variant

The default style of the Mishka Chelekom drawer applies a solid background and border that change based on user interaction, making it perfect for delivering important notifications. With just a single setting, you can select from a range of color options, ensuring easy customization to match various design styles.

<.drawer id="unique_id" color="white"></.drawer>

<.drawer id="unique_id" color="primary"></.drawer>

<.drawer id="unique_id" color="secondary"></.drawer>

<.drawer id="unique_id" color="dark"></.drawer>

<.drawer id="unique_id" color="success"></.drawer>

<.drawer id="unique_id" color="warning"></.drawer>

<.drawer id="unique_id" color="danger"></.drawer>

<.drawer id="unique_id" color="info"></.drawer>

<.drawer id="unique_id" color="light"></.drawer>

<.drawer id="unique_id" color="misc"></.drawer>

<.drawer id="unique_id" color="dawn"></.drawer>

Outline Variant

The outline style of the Mishka Chelekom drawer features a border. Using a single setting, you can choose from various color variants to suit your design needs.

<.drawer id="unique_id" variant="outline" color="white"></.drawer>

<.drawer id="unique_id" variant="outline" color="primary"></.drawer>

<.drawer id="unique_id" variant="outline" color="secondary"></.drawer>

<.drawer id="unique_id" variant="outline" color="dark"></.drawer>

<.drawer id="unique_id" variant="outline" color="success"></.drawer>

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

<.drawer id="unique_id" variant="outline" color="danger"></.drawer>

<.drawer id="unique_id" variant="outline" color="info"></.drawer>

<.drawer id="unique_id" variant="outline" color="light"></.drawer>

<.drawer id="unique_id" variant="outline" color="misc"></.drawer>

<.drawer id="unique_id" variant="outline" color="dawn"></.drawer>

Shadow Variant

The shadow variant of the Mishka Chelekom drawer is similar to the default variant, but it also includes a subtle shadow along with a border and white background in light mode.

<.drawer id="unique_id" variant="shadow" color="white"></.drawer>

<.drawer id="unique_id" variant="shadow" color="primary"></.drawer>

<.drawer id="unique_id" variant="shadow" color="secondary"></.drawer>

<.drawer id="unique_id" variant="shadow" color="dark"></.drawer>

<.drawer id="unique_id" variant="shadow" color="success"></.drawer>

<.drawer id="unique_id" variant="shadow" color="warning"></.drawer>

<.drawer id="unique_id" variant="shadow" color="danger"></.drawer>

<.drawer id="unique_id" variant="shadow" color="info"></.drawer>

<.drawer id="unique_id" variant="shadow" color="light"></.drawer>

<.drawer id="unique_id" variant="shadow" color="misc"></.drawer>

<.drawer id="unique_id" variant="shadow" color="dawn"></.drawer>

Unbordered Variant

The unbordered variant of the Mishka Chelekom drawer is similar to the default variant, but without border.

<.drawer id="unique_id" variant="unbordered" color="white"></.drawer>

<.drawer id="unique_id" variant="unbordered" color="primary"></.drawer>

<.drawer id="unique_id" variant="unbordered" color="secondary"></.drawer>

<.drawer id="unique_id" variant="unbordered" color="dark"></.drawer>

<.drawer id="unique_id" variant="unbordered" color="success"></.drawer>

<.drawer id="unique_id" variant="unbordered" color="warning"></.drawer>

<.drawer id="unique_id" variant="unbordered" color="danger"></.drawer>

<.drawer id="unique_id" variant="unbordered" color="info"></.drawer>

<.drawer id="unique_id" variant="unbordered" color="light"></.drawer>

<.drawer id="unique_id" variant="unbordered" color="misc"></.drawer>

<.drawer id="unique_id" variant="unbordered" color="dawn"></.drawer>

Transparent Variant

The transparent variant of the Mishka Chelekom drawer is similar to the default variant, but without border and background color.

<.drawer id="unique_id" variant="transparent" color="white"></.drawer>

<.drawer id="unique_id" variant="transparent" color="primary"></.drawer>

<.drawer id="unique_id" variant="transparent" color="secondary"></.drawer>

<.drawer id="unique_id" variant="transparent" color="dark"></.drawer>

<.drawer id="unique_id" variant="transparent" color="success"></.drawer>

<.drawer id="unique_id" variant="transparent" color="warning"></.drawer>

<.drawer id="unique_id" variant="transparent" color="danger"></.drawer>

<.drawer id="unique_id" variant="transparent" color="info"></.drawer>

<.drawer id="unique_id" variant="transparent" color="light"></.drawer>

<.drawer id="unique_id" variant="transparent" color="misc"></.drawer>

<.drawer id="unique_id" variant="transparent" color="dawn"></.drawer>

Border prop

The border prop offers values like "extra_small" , "small" , "medium" , "large" , and "extra_large" .

<.drawer id="unique_id" border="extra_small"></.drawer>

<.drawer id="unique_id" border="small"></.drawer>

<.drawer id="unique_id" border="medium"></.drawer>

<.drawer id="unique_id" border="large"></.drawer>

<.drawer id="unique_id" border="extra_large"></.drawer>

Size prop

The size prop allows developers to control the overall size of the drawer component. It offers predefined values such as extra_small , small , medium , large , and extra_large , which adjust the width or height of the drawer depending on its position. For drawers positioned on the left or right of the screen, the prop adjusts the width, while for drawers positioned at the top or bottom, it controls the height. This flexibility ensures the drawer can fit various design requirements, making it adaptable for different content and use cases.

<.drawer id="unique_id" size="extra_small"></.drawer>

<.drawer id="unique_id" size="small"></.drawer>

<.drawer id="unique_id" size="medium"></.drawer>

<.drawer id="unique_id" size="large"></.drawer>

<.drawer id="unique_id" size="extra_large"></.drawer>

Title and title class prop

The title attribute allows you to set a custom title for the drawer component, providing a clear and descriptive heading for its content. The title_class attribute enables you to apply a custom class to the title, allowing for flexible styling and integration with your design system. If no specific class is provided, a default appearance is used, but the option to customize the title ensures consistency with the rest of your design.

<.drawer title="Drawer Title" title_class="your_classes"></.drawer>

Position prop

The position prop controls where the drawer will be displayed on the screen. By default, it is set to left , which positions the drawer on the left side of the viewport. The other available values are right , top , and bottom , which place the drawer on the corresponding sides of the screen. Each of these positions adjusts the drawer's layout and ensures that it takes the appropriate space and orientation based on the selected position. This flexibility allows developers to choose the best placement for the drawer depending on the design and user interaction requirements.

<.drawer id="unique_id" position="left"></.drawer>

<.drawer id="unique_id" position="right"></.drawer>

<.drawer id="unique_id" position="top"></.drawer>

<.drawer id="unique_id" position="bottom"></.drawer>

Show prop

The show attribute in the drawer component determines whether the drawer is visible as soon as the page mounts. If this attribute is set to true, the drawer will automatically open when the page loads, making the content immediately accessible without requiring user interaction. By default, this attribute is set to false, keeping the drawer hidden until it is explicitly triggered.

<.drawer id="unique_id" show={true}></.drawer>
<!--You can omit specifying the show prop if its value is false-->
<.drawer id="unique_id" show={false}></.drawer>
<.drawer id="unique_id"></.drawer>

Header slot

The header slot allows you to define a customizable header for the drawer component. This slot is optional, and when used, it accepts HEEx content, giving you the flexibility to include any markup or dynamic content within the header. The header slot can be populated with titles, icons, buttons, or any other elements relevant to the drawer's context. This feature ensures that the header of the drawer can be fully tailored to fit your design and functionality needs, enhancing the drawer's usability and visual presentation.

<.drawer id="unique_id">
  <:header>
    <div>Content within header slot</div>
  </:header>
</.drawer>