DBuit / sidebar-card

406 stars 39 forks source link

Sidebar Menu doesn't follow external URL changes #28

Closed bluesheep closed 10 months ago

bluesheep commented 3 years ago

When an external service changes the url of the page, the Sidebar doesn't change its highlighted section.

I change the URL using browser_mod service

service: browser_mod.navigate
data:
  navigation_path: /study-tablet/lighting
  deviceID:
    - browser_study-tablet

My sidebar config is as follows:

  sidebarMenu:
    - action: navigate
      navigation_path: /study-tablet/info
      name: Info
      active: true
    - action: navigate
      navigation_path: /study-tablet/lighting
      name: Lighting
      active: true
wtrbuit commented 2 years ago

@bluesheep is this still an issue? I see your config has active: true on both menu items. Can you remove all but the first and check if it works?

mvanlijden commented 2 years ago

Same issue here, with only the one active: true you mentioned. If I press my weather card and go to page, the menu item for weather isn't highlighted.

sidebar:
  width:
    mobile: 0
    tablet: 15
    desktop: 15
  breakpoints:
    mobile: 1200
    tablet: 2000
  date: true
  digitalClock: true
  hideTopMenu: true
  showTopMenuOnMobile: true
  style: |
      .sidebarMenu li{
          line-height: 14px !important;
      }
      .sidebarMenu li ha-icon {
        margin-top: -6px !important;
      }
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace-wallpanel/home
      name: Home
      active: true
      icon: mdi:home-outline
    - action: navigate
      navigation_path: /lovelace-wallpanel/weer-detail
      name: Weer
      icon: mdi:weather-partly-cloudy
    - action: navigate
      navigation_path: /lovelace-wallpanel/boven
      name: Boven
      icon: mdi:bed
    - action: navigate
      navigation_path: /lovelace-wallpanel/zolder
      name: Zolder
      icon: mdi:chair-rolling
    - action: navigate
      navigation_path: /lovelace-wallpanel/lampen
      name: Verlichting
      icon: mdi:lightbulb
    - action: navigate
      navigation_path: /lovelace-wallpanel/cameras
      name: Cameras
      icon: mdi:video-wireless
    - action: navigate
      navigation_path: /lovelace-wallpanel/media
      name: Media
      icon: mdi:television-play
    - action: navigate
      navigation_path: /lovelace-wallpanel/energy-dash
      name: Energy Dash
      icon: mdi:solar-power
  bottomCard:
    type: vertical-stack
    cardStyle: |
      :host {
        width: 100%;
      }
    cardOptions:
      cards:
        - type: weather-forecast
          entity: weather.openweathermap_hourly
          show_forecast: false
          name: ' '
          tap_action:
            action: navigate
            navigation_path: /lovelace-wallpanel/weer-detail
        - type: picture-entity
          camera_image: camera.buienradar
          entity: camera.buienradar
          show_state: false
          show_name: false
          camera_view: live