smelte-sapper-template icon indicating copy to clipboard operation
smelte-sapper-template copied to clipboard

NavigationDrawer selected logic is wrong

Open tv42 opened this issue 5 years ago • 0 comments

          <ListItem
            selected={path.includes(item.to)}

https://github.com/matyunya/smelte-sapper-template/blob/780ab5b3f2324afcf7093faafc1dbff7a6268cc1/src/routes/_layout.svelte#L80-L81

That triggers whenever the current URL path happens to contain the destination. For example, if you add a new src/routes/aboutfoo.svelte that'll set "About" as active.

I did this, instead:

              selected={isActive(path, item.to)}
 function isActive(path, to) {
     if (to == path) {
         return true
     }
     if (path.startsWith(to+"/")) {
         return true
     }
     return false
 }

The second if marks an item selected if the current URL is below. Whether one wants that or not depends on whether the NavigationDrawer contains just one level, or multiple. Highlighting only the most exact matching entry gets a little tricky...

tv42 avatar Aug 08 '20 00:08 tv42