Sidebar Components

    Layout sidebar component.

      Layout Content

      Usage

      import { Sidebar, SidebarBody } from '@paljs/ui/Sidebar';

      Sidebar can be placed on the left, or the right side of the layout, or on start/end position of layout (depends on document direction, left to right or right to left) It can be fixed (shown above the content) or can push the layout when opened.

      There are four states - hidden visible compacted expanded. By default, sidebar content is fixed and saves its position while the page is being scrolled.

      Compacted sidebar example:

        Layout Content

        Sidebar also supports a responsive behavior, listening to window size change and changing its size respectably.

        Sidebar header container.

        Placeholder which contains a sidebar header content, placed at the very top of the sidebar outside of the scroll area. just html element.

        <header></header>

        SidebarBody

        Sidebar scroll area container.

        <SidebarBody>body</SidebarBody>

        Sidebar footer container.

        Placeholder which contains a sidebar footer content, placed at the very bottom of the sidebar outside of the scroll area.

        just html element

        <footer></footer>

        you can use sidebar ref methods like this example:

        import React, { useRef } from 'react';
        
        function Layout() {
          const sidebarRef = useRef();
        
          return (
            <Sidebar ref={sidebarRef} />
            <button onClick={() => sidebarRef.current.toggle()}></button>
          );
        }