Lovelace: custom sidebar card

custom_header:
  hide_header: true

resources:
  - url: /local/sidebar-card.js
    type: module   
  - type: module
    url: /local/custom-header.js
    

sidebar:
  digitalClock: true
  sidebarMenu:
    - action: navigate
      navigation_path: "/lovelace/home"
      name: "Home"
      active: true
      hold_action:
        action: none
      style:
        border-radius: 5vw
        left: 11.7%
        top: 26%
        width: 20.5078125%

    - action: navigate
      navigation_path: "/lovelace/lights"
      name: "Lights"
      active: true
    - action: navigate
      navigation_path: "/lovelace/music"
      name: "Music"
      active: true
    - action: navigate
      navigation_path: "/lovelace/media"
      name: "Media"
      active: true

  style: |
    :host {
        --sidebar-background: #FFF;
        --sidebar-text-color: #000;
        --face-color: #FFF;
        --face-border-color: #FFF;
        --clock-hands-color: #000;
        --clock-seconds-hand-color: #FF4B3E;
        --clock-middle-background: #FFF;
        --clock-middle-border: #000;
    }
  template: |
    <li>
      {% if now().hour  < 5 %} Good Night {{'\U0001F634'}}
      {% elif now().hour < 12 %} Goodmorning {{'\u2615\uFE0F'}}
      {% elif now().hour < 18 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
      {% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %}
    </li>

views:
  - view:

Kind of new to yaml…, but how do i associate a “page” with the side bar?