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 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>