Yml Settings

🍔 hamburger.yml

# Introduction

The hamburger.yml file is responsible for setting up the hamburger menu items navigation.

Here is an example of the hamburger.yml file:

        # logo: 'src/lib/assets/full_logo.png'
logoHref: '/dashboard'
logoClass: 'h-12 w-auto'
containerClass: ''
listClass: ''
activeBgClass: ''
activeTextClass: ''
activeIconClass: ''
bgClass: ''
textClass: ''
iconClass: ''

items:
  - icon:
      active: ['fas', 'cube']
      base: ['fal', 'cube']
      size: 'xl'
    title: Dashboard
    href: /dashboard
    items:
      - title: Dashboard 2
        href: /dashboard/2
        items:
          - title: Dashboard 3
            href: /dashboard/3
  - icon:
      active: ['fas', 'cube']
      base: ['fal', 'cube']
      size: 'xl'
    title: Dashboard 4
    href: /dashboard/4
  - icon:
      active: ['fas', 'cube']
      base: ['fal', 'cube']
      size: 'xl'
    title: Dashboard 5
    href: /dashboard/5
  - icon:
      active: ['fas', 'cube']
      base: ['fal', 'cube']
      size: 'xl'
    title: Profile
    href: /profile

      

# LogoHref

This is responsible for redirecting the user to when it clicks on the logo component of the drawer element of the hamburger component.

# LogoClass

This is responsible for adding extra tailwindcss classes to the logo element of the drawer element of the hamburger component.

# ContainerClass

This is responsible for adding extra tailwindcss classes to the drawer element of the hamburger component.

# ActiveBgClass

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

# ActiveTextClass

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

# ActiveIconClass

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

# ListClass

This is responsible for adding extra tailwindcss classes to the list element that has all the items of the drawer component.

# BgClass

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

# TextClass

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

# IconClass

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

# Items

This is responsible for displaying all the items of the drawer 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'
# You can also concatina items inside items, making your sidebar navigation behave like a tree structure, example
items:
  - title: Dashboard 2
    href: /dashboard/2