Side menu improvements

[Wolfr]

https://sveltekit-jui.vercel.app/styleguide/components/side-menu

• [ ] Side menu needs an example of active state
• [x] Side menu with icons: needs file or something as an example
• [x] Side menu with icons: need to fix spacing

[PaxPax]

While writing the search filter, I ran across a couple of things. Should the SideMenu get it's own header text? For example we could now do <SideMenu bind:header> instead of treating the SideMenuSectionHeader as the header for the SideMenu if that makes sense?

[Wolfr]

It might interesting to restrict some components to what they are meant for, by using for example export let title instead of using a <slot>. Although this means the framework is less flexible. If you need a button on the top right of a section header for some reason, you are stuck (but for code cleanliness should maybe create a new component then anyway).

This is a tough balance 🤔 . I'll give it some thought.

[PaxPax]

It might interesting to restrict some components to what they are meant for, by using for example export let title instead of using a <slot>. Although this means the framework is less flexible. If you need a button on the top right of a section header for some reason, you are stuck (but for code cleanliness should maybe create a new component then anyway).

This is a tough balance 🤔 . I'll give it some thought.

That's what I was thinking as well, it would lead to a cleaner developer experience and a predictable experience, but it would introduce a lot of duplication on our side.

*edit: Looking more into it, I strongly believe it should look something like

  <SideMenu bind:header>
    <SideMenuSectionHeader bind:sectionHeader>
        <SideMenuItem>
           <!-- slot could be fine here or straight text-->
        </SideMenuItem>
        <SideMenuItem />
        <SideMenuItem />
    </SideMenuSectionHeader>
    <SideMenuSectionHeader bind:sectionHeader>
      <SideMenuItem />
    </SideMenuSectionHeader>
</SideMenu>

vs now

    <SideMenu>
      <SideMenuItem href="/styleguide/">Intro</SideMenuItem>
      {#each groups as group}
        <SideMenuSectionHeader>{group.category}</SideMenuSectionHeader>
        {#each group.values as item}
          <SideMenuItem href="/styleguide/{group.category}/{item.url}">{#if item.prettyName}{item.prettyName}{:else} 
           {prettyTitle(item.url)}{/if}</SideMenuItem>
        {/each}
      {/each}
    </SideMenu>