Nav Bar Card

hc_nav_bar:
  variables:
    color1: var(--color-dark-gray)
    color2: var(--color-dark-gray)
    color3: var(--color-dark-gray)
    color4: var(--color-dark-gray)
    color5: var(--color-dark-gray)
    bgcolor1: var(--color-light-gray-nav)
    bgcolor2: var(--color-light-gray-nav)
    bgcolor3: var(--color-light-gray-nav)
    bgcolor4: var(--color-light-gray-nav)
    bgcolor5: var(--color-light-gray-nav)
  tap_action:
    action: none
  styles:
    grid:
      - grid-template-areas: '". item_1 item_2 item_3 item_4 item_5 ."'
      - grid-template-columns: 1fr repeat(5, min-content) 1fr
      - grid-template-rows: 1fr
      - column-gap: 1.5rem
    card:
      - height: 70px
      - width: 90vw
      - border-radius: 40px
      - overflow: visible
      - position: fixed
      - box-shadow: 0px 25px 80px rgba(0, 0, 0, 0.5);
      - margin: 0
      - bottom: 10px
      - left: 5%
      - z-index: 4
      - padding-bottom: 50px
  custom_fields:
    item_1:
      card:
        type: custom:button-card
        icon: |
          [[[
            if (variables.bgcolor1 == 'var(--navbar-icon-color)') {
              return 'fapro:house-fill'
            } else {
              return 'fapro:house'
            }
          ]]]
        tap_action:
          action: navigate
          navigation_path: 'home'
        styles:
          icon:
            - color: '[[[ return variables.color1 ]]]'
          card:
            - height: 40px
            - width: 40px
            - margin: 0
            - padding: 10
            - border-radius: 500px
            - background: '[[[ return variables.bgcolor1 ]]]'
            - align-self: start
    item_2:
      card:
        type: custom:button-card
        icon: |
          [[[
            if (variables.bgcolor2 == 'var(--navbar-icon-color)') {
              return 'fapro:fan-fill'
            } else {
              return 'fapro:fan'
            }
          ]]]
        tap_action:
          action: navigate
          navigation_path: 'climate'
        styles:
          icon:
            - color: '[[[ return variables.color2 ]]]'
          card:
            - height: 40px
            - width: 40px
            - margin: 0
            - padding: 10
            - border-radius: 500px
            - background: '[[[ return variables.bgcolor2 ]]]'
            - align-self: start
    item_3:
      card:
        type: custom:button-card
        icon: |
          [[[
            if (variables.bgcolor3 == 'var(--navbar-icon-color)') {
              return 'fapro:lightbulb-solid'
            } else {
              return 'fapro:lightbulb-regular'
            }
          ]]]
        tap_action:
          action: navigate
          navigation_path: 'lights'
        styles:
          card:
            - height: 40px
            - width: 40px
            - margin: 0
            - padding: 10
            - border-radius: 500px
            - background: '[[[ return variables.bgcolor3 ]]]'
            - align-self: center
          icon:
            - color: '[[[ return variables.color3 ]]]'
            - width: 17px
    item_4:
      card:
        type: custom:button-card
        icon: |
          [[[
            if (variables.bgcolor4 == 'var(--navbar-icon-color)') {
              return 'fapro:door-closed-fill'
            } else {
              return 'fapro:door-closed'
            }
          ]]]
        tap_action:
          action: navigate
          navigation_path: 'doors-windows'
        styles:
          card:
            - height: 40px
            - width: 40px
            - margin: 0
            - padding: 10
            - border-radius: 500px
            - background: '[[[ return variables.bgcolor4 ]]]'
            - align-self: start
          icon:
            - color: '[[[ return variables.color4 ]]]'
            - width: 17px
    item_5:
      card:
        type: custom:button-card
        icon: |
          [[[
            if (variables.bgcolor5 == 'var(--navbar-icon-color)') {
              return 'fapro:devices-fill'
            } else {
              return 'fapro:devices'
            }
          ]]]
        tap_action:
          action: navigate
          navigation_path: 'appliances'
        styles:
          card:
            - height: 40px
            - width: 40px
            - margin: 0
            - padding: 10
            - border-radius: 500px
            - background: '[[[ return variables.bgcolor5 ]]]'
            - align-self: start
          icon:
            - color: '[[[ return variables.color5 ]]]'
            - width: 17px