Yml Settings

🧱 layout.yml

# Introduction

The layout.yml file is responsible for setting up the layout UI of your authorized routes, what I mean by that is, the layout of your app once the user is logged in.

Here is an example of the layout.yml file:

        display:
  mode: desktop #desktop  #mobile
  navigation: ['header', 'sidebar'] #header #sidebar
  spacing:
    header: 'mt-32'

# Global settings
header:
  enabled: true
  logoHref: '/dashboard'
  logoClass: 'w-10 mr-10 ml-3'
  defaultTitle: ''
  containerClass: ''
  class: ''
  leftSideClass: ''
  centerSideClass: ''
  rightSideClass: ''

  breadcrumb:
    enabled: true
    placement: 'under' #under | over
    containerClass: ''
    itemClass: ''
    iconClass: ''
    cutButtonClass: ''
    cutItemClass: ''
    icon:
    maxItems: 4

  profileButton:
    enabled: true
    defaultLink: '/profile'
    iconHexColor:
    links:
      - name: Profile
        href: /profile
      - name: Change Password
        href: /profile?tab=change_password

  subHeader:
    enabled: false
    mobile: true
    defaultTitle: ''
    defaultDescription: 'Welcome to Tangle Media'
    opacity: 0
    class: ''
    filterClass: ''
    leftSideClass: ''
    centerSideClass: 'lg:ml-24'
    rightSideClass: ''
    titleClass: ''
    descriptionClass: ''

sidebar:
  list: ['main', 'right']
  enabled: true

footer:
  list: ['main']
  enabled: false
  mobile: true
  showTitle: true

      

# Breakdown

Let's break down each piece of the yml file, so that we can better understand what happens when the internal @tanglemedia packages read from this file.

# Display

# Mode

This can be either desktop or mobile and all it does is set some margins and paddings for a better UI for either a app that will be used more as a desktop or as a mobile.

# Navigation

This is a list of all your navigation types available, currently the only navigation types available are sidebar, and header, so the navigation can only be ["sidebar", "header"] or ["sidebar"] or ["header"] or [""].

If you have in the list the header value, then the layout will automatically add the top header navigation component and slot to your layout screen. To configure the top header navigation component, check out the header.yml file.

If you have in the list the sidebar value, then the layout will automatically add the sidebar navigation component and slot to your layout screen. To configure the sidebar navigation component, check out the sidebar.yml file.

# Spacing

# Header

This can be used to add spacing and other tailwindcss classes to all the sidebar and page content components.

# Header

# Enabled

This is responsible for displaying or not your header component on your layout component.

# LogoHref

This is responsible for redirecting the user when it clicks on the logo button on the header component.

# LogoClass

This is responsible for adding extra tailwindcss classes to the logo container element.

# DefaultTitle

This is the default title for the header component. If empty it will automatically look at the route name and display that.

# ContainerClass

This is responsible for adding extra tailwindcss classes to the header container element.

# Class

This is responsible for adding extra tailwindcss classes to the wrapper component that contains header container element.

# LeftSideClass

This is responsible for adding extra tailwindcss classes to the left side of the header container element.

# CenterSideClass

This is responsible for adding extra tailwindcss classes to the center side of the header container element.

# RightSideClass

This is responsible for adding extra tailwindcss classes to the right side of the header container element.

# Breadcrumb

# Enabled

This is responsible for displaying or not your breadcrumb component on your layout component.

# Placement

This is responsible for the positioninig of the breadcrumb component, it can either be under or over the header title element.

# ContainerClass

This is responsible for adding extra tailwindcss classes to the breadcrumb container element.

# ItemClass

This is responsible for adding extra tailwindcss classes to the breadcrumb items container element.

# IconClass

This is responsible for adding extra tailwindcss classes to the breadcrumb icons container element.

# CutButtonClass

This is responsible for adding extra tailwindcss classes to the cut/elipsis button element.

# CutItemClass

This is responsible for adding extra tailwindcss classes to the dropdown items container element.

# Icon

This is responsible for changing the default icon of the breadcrumb items.

# MaxItems

This is responsible for setting the maximum number of items to be displayed in the scree, if you have more that the maximum number of items, the extra items will be displayed in a dropdown menu.

# ProfileButton

# Enabled

This is responsible for displaying or not your profile button component on your layout component.

# DefaultLink

This is responsible for redirecting the user when the user clicks on the user avatar button on the dropdown menu.

# IconHexColor

This is responsible for changing the color of the icon avatar of the profile button component inb case there is no avatar image to it.

# Links

This is responsible for displaying extra links to the profile button dropdown menu.

# SubHeader

# Enabled

This is responsible for displaying or not your sub header component on your layout component.

# Mobile

This is responsible for displaying or not your sub header component on your layout component when in smaller screens.

# DefaulTitle

This is the default title for the sub header component. If empty it will automatically look at the route name and display that.

# DefaultDescription

This is the default description for the sub header component. If empty it won't display anything.

# Opacity

This is responsible for setting the opacity of the background image of the sub header component.

# Class

This is responsible for adding extra tailwindcss classes to the sub header container element.

# FilterClass

This is responsible for adding extra tailwindcss classes to the opacity container of your sub header container element.

# LeftSideClass

This is responsible for adding extra tailwindcss classes to the left side of your sub header container element.

# CenterSideClass

This is responsible for adding extra tailwindcss classes to the center side of your sub header container element.

# RightSideClass

This is responsible for adding extra tailwindcss classes to the right side of your sub header container element.

# TitleClass

This is responsible for adding extra tailwindcss classes to the title element of your sub header container element.

# DescriptionClass

This is responsible for adding extra tailwindcss classes to the description element of your sub header container element.

# Sidebar

# Enabled

This is responsible for displaying or not your sidebar components on your layout component.

# List

This is the list of names of your sidebar components key from your sidebar.yml file.

# Footer

# Enabled

This is responsible for displaying or not your footer on your layout component.

# Mobile

This is responsible for displaying or not your footer on your layout component for only smaller screens.

# ShowTitle

This is responsible for displaying or not the title of each item of your footer on your layout component.

# List

This is the list of names of your footer component key from your footer.yml file.