ui: services navigation

src/routes/+layout.svelte

@@ -20,6 +20,30 @@
         <img src="/icons/laptop.png" alt="" class="nav-icon" />
         Library
       </a>
+      <details class="nav-collapsible">
+         <summary class="nav-item">
+         <img src="/icons/world-star.png" alt="" class="nav-icon" />
+       Services
+          </summary>
+        <div class="nav-submenu">
+          <a href="/services/spotify" class="nav-item nav-subitem">
+            <img src="/icons/spotify.png" alt="" class="nav-icon" />
+            Spotify
+          </a>
+          <a href="/services/deezer" class="nav-item nav-subitem">
+            <img src="/icons/deezer.png" alt="" class="nav-icon" />
+            Deezer
+          </a>
+          <a href="/services/soulseek" class="nav-item nav-subitem">
+            <img src="/icons/soulseek.png" alt="" class="nav-icon" />
+            Soulseek
+          </a>
+          <a href="/services/musicbrainz" class="nav-item nav-subitem">
+            <img src="/icons/musicbrainz.svg" alt="" class="nav-icon" />
+            MusicBrainz
+          </a>
+        </div>
+      </details>
       <details class="nav-collapsible">
         <summary class="nav-item">
           <img src="/icons/cassette-tape.png" alt="" class="nav-icon" />
@@ -40,10 +64,6 @@
           </a>
         </div>
       </details>
-      <a href="/services" class="nav-item">
-        <img src="/icons/world-star.png" alt="" class="nav-icon" />
-        Services
-      </a>
     </nav>
   </aside>
 

static/icons/musicbrainz.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 27 30" height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><title>MusicBrainz Simple Icon</title><g transform="translate(1.5)"><path d="m13 1-12 7v14l12 7z" fill="#ba478f"/><path d="m14 1 12 7v14l-12 7z" fill="#eb743b"/></g></svg>