Getting Started
Layout
Components
Design
Sidebar
Sidebar component allows you to have a container that can slide in from the left or right side of the screen. This container can hold various types of content based on your requirements.
This component is comprised of two essential elements:
- Button : Place it anywhere and it will trigger the show/hide functionality of the sidebar section.
- Section: The section represents the actual content that will be displayed within the sidebar.
<div class="null-container null-text-align-end">
<div id="" class="null-sidebar-icon-container null-padding-top-20 null-cursor-pointer null-display-inline-block null-padding-bottom-20">
<!-- Add whatever icon you want -->
<svg class="null-sidebar-icon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024"
height="25px" width="25px" xmlns="http://www.w3.org/2000/svg">
<path
d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z">
</path>
</svg>
</div><!--End null-sidebar-icon-container-->
</div><!--End null-container-->
<section class="null-sidebar-section null-background-white null-display-flex null-scroll">
<div class="null-container">
<div class="null-sidebar-container"> <!--Add Your Content Here-->
<div class="null-sidebar">
<div class="null-padding-top-20 null-color-main">
<h2 class="null-text-align-center">Add Your Content Here!</h2>
</div><!--End null-padding-top-20-->
</div><!--End null-sidebar-->
</div><!--End null-sidebar-container-->
</div><!--End null-container-->
</section><!--End null-sidebar-section-->