1. Yml Settings
  2. 🧗‍♀️ sidebar.yml

Yml Settings

🧗‍♀️ sidebar.yml

Introduction

The sidebar.yml file is responsible for setting up the sidebar navigation items, what I mean by that is, the navigation buttons on the sidebar is loaded by loading at the items array of sidebar.yml file.

Here is an example of the sidebar.yml file:

        components:
  main:
    style: 'default' #default, minimal, detailed
    # position: 'right'
    containerClass: 'bg-white'
    listClass: ''
    activeBgClass: ''
    activeTextClass: ''
    activeIconClass: ''
    bgClass: ''
    textClass: ''
    iconClass: ''
    floatingBtnClass: ''
    floatingBtnIcon:
      # active: ['fas', 'cube']
      # base: ['fal', 'cube']
      # size: 'md'
    subSidebarClass: ''
    items:
      - icon:
          active: ['fas', 'cube']
          base: ['fal', 'cube']
          size: 'xl'
        title: Dashboard
        href: /dashboard
        match:
          end: true
          caseSensitive: true
          patterns:
            - '/dashboard/[dashboard_id]'
            - '/dashboard/[dashboard_id]/[dashboard_event]'
        items:
          - title: Dashboard 7
            href: /dashboard/7
            items:
              - title: Dashboard 10
                href: /dashboard/10
          - title: Dashboard 8
            href: /dashboard/8
          - title: Dashboard 9
            href: /dashboard/9
      - icon:
          active: ['fas', 'cube']
          base: ['fal', 'cube']
          size: 'xl'
        title: Profile
        href: /profile

  right:
    style: 'detailed' #default, minimal, detailed
    position: 'right'
    containerClass: 'bg-white'
    listClass: ''
    activeBgClass: 'bg-primary text-[--settings-text-contrast-primary-color]'
    activeTextClass: ''
    activeIconClass: ''
    bgClass: ''
    textClass: ''
    iconClass: ''
    items:
      - icon:
          active: ['fas', 'cube']
          base: ['fal', 'cube']
          size: 'xl'
        title: Dashboard
        href: /dashboard
        match:
          end: true
          caseSensitive: true
          patterns:
            - '/dashboard/[dashboard_id]'
            - '/dashboard/[dashboard_id]/[dashboard_event]'
      - icon:
          active: ['fas', 'cube']
          base: ['fal', 'cube']
          size: 'xl'
        title: Dashboard 2
        href: /dashboard/1
        items:
          - title: Dashboard 6
            href: /dashboard/6
      - icon:
          active: ['fas', 'cube']
          base: ['fal', 'cube']
          size: 'xl'
        title: Dashboard 3
        href: /dashboard/2

Components

[Component Key]

This is the name you want to set your sidebar component to be, this name will be the name used on the sidebar.list item in the layout.yml file.

Style

This is the style of the sidebar component, currently we have three styles to choose from:

  • default is a simple sidebar where for each item, the icon is displayed on top of the title and the buttons are in a square shape.
  • minimal is a very simple sidebar where for each item, it only shows the icon, and when you hover over the item it displays the title in a tooltip element.
  • detailed is a bigger sidebar where for each item, it displays the icon and title in a horizontal display.
Position

This is the position of your sidebar component, which can be either left or right.

ContainerClass

This is responsible for adding extra tailwindcss classes to the container element of the sidebar component.

ListClass

This is responsible for adding extra tailwindcss classes to the list element of the sidebar component.

ActiveBgClass

This is responsible for adding extra tailwindcss classes to the background of the active element of the sidebar component.

ActiveTextClass

This is responsible for adding extra tailwindcss classes to the text of the active element of the sidebar component.

ActiveIconClass

This is responsible for adding extra tailwindcss classes to the icon of the active element of the sidebar component.

BgClass

This is responsible for adding extra tailwindcss classes to the background of the all the items of the sidebar component.

TextClass

This is responsible for adding extra tailwindcss classes to the text of the all the items of the sidebar component.

IconClass

This is responsible for adding extra tailwindcss classes to the icon of the all the items of the sidebar component.

FloatingBtnClass

This is responsible for adding extra tailwindcss classes to the floating button element the sidebar component.

FloatingBtnIcon

This is responsible for displaying the icon on the floating button. The objects schema is like this:

        active: ['icon type', 'icon name'],
base: ['icon type', 'icon name'],
size: 'size of the icon'
subSidebarClass

This is responsible for adding extra tailwindcss classes to the sub sidebar element the sidebar component.

Items

This is responsible for displaying all the items of the sidebar navigation element, it is an array of objects. and the objects schema is like this:

        icon:
  active: ['icon type', 'icon name'],
  base: ['icon type', 'icon name'],
  size: 'size of the icon'
title: 'title of the page'
href: 'href of the page'
# This match field is optional, but it lets you keep the sidebar item component in a active state as long as the options are true.
match:
  # This will look for the entire url
  end: true
  # This will add with case sensitive matching
  caseSensitive: true
  # This is the list of patterns to match against, this is an example
  patterns:
    - '/dashboard/[dashboard_id]'
    - '/dashboard/[dashboard_id]/[dashboard_event]'
# You can also concatina items inside items, making your sidebar navigation behave like a tree structure, example
items:
  - title: Dashboard 2
    href: /dashboard/2
Previous <- 🎩 header.yml
Next 🐾 footer.yml ->