ui tweaks, added settings skeleton

Selector.MAUI/Pages/Index.razor

@@ -4,9 +4,7 @@
 @inject NowHubCache nowCache
 @inject ILogger<Index> logger
 
-<h1>Hello, world!</h1>
+<h1>run that</h1>
-
-Welcome to your new app.
 
 @code {
 

Selector.MAUI/Pages/Settings.razor

@@ -0,0 +1,11 @@
+@page "/settings"
+
+<h1>Settings</h1>
+
+@code {
+
+    protected async override Task OnInitializedAsync()
+    {
+
+    }
+}

Selector.MAUI/Shared/MainLayout.razor

@@ -15,7 +15,7 @@
             <a href="https://sarsoo.xyz/posts/selector/" class="dash-underline-lg link-dark" target="_blank">About</a>
         </div>
 
-        <article class="content px-4">
+        <article class="content px-4 text-center">
             @Body
         </article>
     </main>

Selector.MAUI/Shared/NavMenu.razor

@@ -19,6 +19,11 @@
                 <span class="oi oi-plus" aria-hidden="true"></span> Now
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="settings">
+                <span class="oi oi-cog" aria-hidden="true"></span> Settings
+            </NavLink>
+        </div>
     </nav>
 </div>
 

Selector.MAUI/Shared/NowPlayingCard.razor

@@ -14,7 +14,7 @@
             }
         </h6>
         <div style="width: 100%">
-            <SpotifyLogo Link="@Track.ExternalUrls.FirstOrDefault(x => x.Key == "Spotify").Value" />
+            <SpotifyLogo Link="@Track.ExternalUrls?.FirstOrDefault(x => x.Key == "Spotify").Value" />
             <img src="/live.gif" style="height: 20px; float: right">
         </div>
     </div>
@@ -30,7 +30,7 @@ else if (Episode is not null) {
             @Episode.Show.Publisher
         </h6>
         <div style="width: 100%">
-            <SpotifyLogo Link="@Episode.ExternalUrls.FirstOrDefault(x => x.Key == "Spotify").Value" />
+            <SpotifyLogo Link="@Episode.ExternalUrls?.FirstOrDefault(x => x.Key == "Spotify").Value" />
             <img src="/live.gif" style="height: 20px; float: right">
         </div>
     </div>

Selector.MAUI/Shared/SpotifyLogo.razor.css

@@ -1,63 +0,0 @@
-.navbar-toggler {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
-.top-row {
-    height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
-}
-
-.navbar-brand {
-    font-size: 1.1rem;
-}
-
-.oi {
-    width: 2rem;
-    font-size: 1.1rem;
-    vertical-align: text-top;
-    top: -2px;
-}
-
-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-}
-
-    .nav-item:first-of-type {
-        padding-top: 1rem;
-    }
-
-    .nav-item:last-of-type {
-        padding-bottom: 1rem;
-    }
-
-    .nav-item ::deep a {
-        color: #d7d7d7;
-        border-radius: 4px;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        line-height: 3rem;
-    }
-
-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.25);
-    color: white;
-}
-
-.nav-item ::deep a:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
-}
-
-@media (min-width: 641px) {
-    .navbar-toggler {
-        display: none;
-    }
-
-    .collapse {
-        /* Never collapse the sidebar for wide screens */
-        display: block;
-    }
-}
-