Skip to content

Sidebar Component

The Sidebar component is a reusable navigation menu that provides links to different sections of the application.

Purpose and Utility

The Sidebar component is designed to provide a consistent navigation experience. It includes:

  • A collapsible menu for better usability on smaller screens.
  • Links to key sections of the application.
  • A customizable logo area.

Example Usage

The Sidebar component is used in the Layout component to provide a navigation menu:

<template>
  <div>
    <Sidebar />
    <!-- ...existing code... -->
  </div>
</template>

The Sidebar component uses the NavLink component to render individual navigation links. Each NavLink represents a menu item in the sidebar. The NavLink component is highly customizable and supports:

  • Icons for visual representation of links.
  • Nested links for hierarchical navigation.
  • Badges and labels for additional context.
<template>
  <ul class="nav">
    <NavLink
      :activeItem="activeItem"
      :header="$t('menu.start')"
      link="/start"
      iconName="flaticon-home-1"
      isHeader
    />
    <NavLink
      :activeItem="activeItem"
      :header="$t('menu.userManagement')"
      link="/user-management"
      iconName="flaticon-user-1"
      isHeader
    />
  </ul>
</template>
  • activeItem: The currently active menu item.
  • header: The text displayed for the menu item.
  • link: The route path for the menu item.
  • iconName: The icon class for the menu item.
  • isHeader: A boolean indicating whether the link is a top-level menu item.

SCSS Variables

The Sidebar component uses the following SCSS variables for styling:

  • $sidebar-width-open: Width of the sidebar when open.
  • $sidebar-width-closed: Width of the sidebar when closed.
  • $sidebar-transition-time: Transition duration for sidebar animations.
  • --sidebar-bg-color: Background color of the sidebar.
  • --sidebar-color: Text color of the sidebar.

Notes

  • The Sidebar component uses SCSS for styling and supports responsive design.
  • The sidebar can be toggled between open and closed states.
  • The NavLink component is used to ensure consistency and reusability for navigation links.