bottom menu bar, fixing links, fixing header colour

Selector.MAUI/App.xaml

@@ -6,7 +6,7 @@
     <Application.Resources>
         <ResourceDictionary>
 
-            <Color x:Key="PageBackgroundColor">#512bdf</Color>
+            <Color x:Key="PageBackgroundColor">#2b2b2b</Color>
             <Color x:Key="PrimaryTextColor">White</Color>
 
             <Style TargetType="Label">

Selector.MAUI/Pages/Now.razor

@@ -12,6 +12,7 @@
 <NowPlayingCard Track="@nowCache.LastPlaying?.Track" Episode="@nowCache.LastPlaying?.Episode" />
 <PlayCountCard Track="@nowCache.LastPlaying?.Track" Count="@nowCache.LastPlayCount" Username="@nowCache.LastPlayCount?.Username" />
 
+<div class="v-space"></div>
 
 @code {
     [Inject]

Selector.MAUI/Shared/MainLayout.razor

@@ -4,12 +4,6 @@
 @inject SessionManager session
 
 <div class="page">
-    @if (session.IsLoggedIn)
-    {
-        <div class="sidebar">
-            <NavMenu />
-        </div>
-    }
     <main>
         <div class="top-row px-4">
             <a href="https://sarsoo.xyz/posts/selector/" class="dash-underline-lg link-dark" target="_blank">About</a>
@@ -19,6 +13,12 @@
             @Body
         </article>
     </main>
+    @if (session.IsLoggedIn)
+    {
+        <div class="sidebar">
+            <NavMenu />
+        </div>
+    }
 </div>
 
 @*<footer class="footer text-muted">

Selector.MAUI/Shared/NavMenu.razor

@@ -1,30 +1,33 @@
-<div class="top-row ps-3 navbar navbar-dark">
+
-    <div class="container-fluid">
+<div class="bottom-bar">
-        <a class="navbar-brand" href="">Selector</a>
+    <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+        <nav class="flex-column menu-items">
-            <span class="navbar-toggler-icon"></span>
+            <div class="nav-item px-3">
-        </button>
+                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                    <span class="oi oi-home" aria-hidden="true"></span> Home
+                </NavLink>
+            </div>
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="now">
+                    <span class="oi oi-dashboard" 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>
-</div>
 
-<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
+    <div class="top-row ps-3 navbar navbar-dark">
-    <nav class="flex-column">
+        <div class="container-fluid">
-        <div class="nav-item px-3">
+            <a class="navbar-brand" href="">Selector</a>
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+            <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
-                <span class="oi oi-home" aria-hidden="true"></span> Home
+                <span class="navbar-toggler-icon"></span>
-            </NavLink>
+            </button>
         </div>
-        <div class="nav-item px-3">
+    </div>
-            <NavLink class="nav-link" href="now">
-                <span class="oi oi-dashboard" 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>
 
 @code {

Selector.MAUI/Shared/NavMenu.razor.css

@@ -4,13 +4,17 @@
 
 .top-row {
     height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
+    background-color: rgba(0,0,0,1);
 }
 
 .navbar-brand {
     font-size: 1.1rem;
 }
 
+.menu-items {
+    background-color: #3c3c3c;
+}
+
 .oi {
     width: 2rem;
     font-size: 1.1rem;
@@ -18,6 +22,12 @@
     top: -2px;
 }
 
+.bottom-bar {
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
+}
+
 .nav-item {
     font-size: 0.9rem;
     padding-bottom: 0.5rem;
@@ -40,21 +50,31 @@
         line-height: 3rem;
     }
 
-.nav-item ::deep a.active {
+    .nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.25);
+        background-color: rgba(255,255,255,0.25);
-    color: white;
+        color: white;
-}
+    }
 
-.nav-item ::deep a:hover {
+    .nav-item ::deep a:hover {
-    background-color: rgba(255,255,255,0.1);
+        background-color: rgba(255,255,255,0.1);
-    color: white;
+        color: white;
-}
+    }
 
 @media (min-width: 641px) {
     .navbar-toggler {
         display: none;
     }
 
+    .menu-items {
+        background-color: rgb(0, 0, 0, 0);
+    }
+
+    .bottom-bar {
+        position: static;
+        bottom: 0px;
+        width: 100%;
+    }
+
     .collapse {
         /* Never collapse the sidebar for wide screens */
         display: block;

Selector.MAUI/Shared/PlayCountCard.razor

@@ -58,8 +58,8 @@
     [Parameter]
     public string Username { get; set; }
 
-    private string trackLink => $"https://www.last.fm/user/{Username}/library/music/{Track.Artists.First().Name}/_/${Track.Name}";
+    private string trackLink => $"https://www.last.fm/user/{Username}/library/music/{Track.Artists.First().Name}/_/{Track.Name}";
-    private string albumLink => $"https://www.last.fm/user/{Username}/library/music/{Track.Album.Artists.First().Name}/${Track.Album.Name}";
+    private string albumLink => $"https://www.last.fm/user/{Username}/library/music/{Track.Album.Artists.First().Name}/{Track.Album.Name}";
     private string artistLink => $"https://www.last.fm/user/{Username}/library/music/{Track.Artists.First().Name}";
     private string userLink => $"https://www.last.fm/user/{Username}";
 

Selector.MAUI/wwwroot/css/app.css

@@ -13,6 +13,11 @@ h1:focus {
     outline: none;
 }
 
+.v-space {
+    height: 3.5rem;
+    display: block;
+}
+
 /*a, .btn-link {
     color: #0071c1;
 }*/