From 66209b7ec3ad091defe0163a2b10fc02983f68fd Mon Sep 17 00:00:00 2001
From: Andy Pack <andy@sarsoo.xyz>
Date: Thu, 26 Jan 2023 21:54:09 +0000
Subject: [PATCH] bottom menu bar, fixing links, fixing header colour

---
 Selector.MAUI/App.xaml                   |  2 +-
 Selector.MAUI/Pages/Now.razor            |  1 +
 Selector.MAUI/Shared/MainLayout.razor    | 12 +++---
 Selector.MAUI/Shared/NavMenu.razor       | 51 +++++++++++++-----------
 Selector.MAUI/Shared/NavMenu.razor.css   | 38 +++++++++++++-----
 Selector.MAUI/Shared/PlayCountCard.razor |  4 +-
 Selector.MAUI/wwwroot/css/app.css        |  5 +++
 7 files changed, 71 insertions(+), 42 deletions(-)

diff --git a/Selector.MAUI/App.xaml b/Selector.MAUI/App.xaml
index 302d45f..84d781b 100644
--- a/Selector.MAUI/App.xaml
+++ b/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">
diff --git a/Selector.MAUI/Pages/Now.razor b/Selector.MAUI/Pages/Now.razor
index 59ca089..9719aad 100644
--- a/Selector.MAUI/Pages/Now.razor
+++ b/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]
diff --git a/Selector.MAUI/Shared/MainLayout.razor b/Selector.MAUI/Shared/MainLayout.razor
index 32143fc..2ed101d 100644
--- a/Selector.MAUI/Shared/MainLayout.razor
+++ b/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">
diff --git a/Selector.MAUI/Shared/NavMenu.razor b/Selector.MAUI/Shared/NavMenu.razor
index 4e3c98d..4b2be8b 100644
--- a/Selector.MAUI/Shared/NavMenu.razor
+++ b/Selector.MAUI/Shared/NavMenu.razor
@@ -1,30 +1,33 @@
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="">Selector</a>
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
-            <span class="navbar-toggler-icon"></span>
-        </button>
+
+<div class="bottom-bar">
+    <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
+        <nav class="flex-column menu-items">
+            <div class="nav-item px-3">
+                <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">
-    <nav class="flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="oi oi-home" aria-hidden="true"></span> Home
-            </NavLink>
+    <div class="top-row ps-3 navbar navbar-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="">Selector</a>
+            <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+                <span class="navbar-toggler-icon"></span>
+            </button>
         </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>
 
 @code {
diff --git a/Selector.MAUI/Shared/NavMenu.razor.css b/Selector.MAUI/Shared/NavMenu.razor.css
index db47d63..c53b704 100644
--- a/Selector.MAUI/Shared/NavMenu.razor.css
+++ b/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 {
-    background-color: rgba(255,255,255,0.25);
-    color: white;
-}
+    .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;
-}
+    .nav-item ::deep a:hover {
+        background-color: rgba(255,255,255,0.1);
+        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;
diff --git a/Selector.MAUI/Shared/PlayCountCard.razor b/Selector.MAUI/Shared/PlayCountCard.razor
index 5d35f01..4266c9a 100644
--- a/Selector.MAUI/Shared/PlayCountCard.razor
+++ b/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 albumLink => $"https://www.last.fm/user/{Username}/library/music/{Track.Album.Artists.First().Name}/${Track.Album.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 artistLink => $"https://www.last.fm/user/{Username}/library/music/{Track.Artists.First().Name}";
     private string userLink => $"https://www.last.fm/user/{Username}";
 
diff --git a/Selector.MAUI/wwwroot/css/app.css b/Selector.MAUI/wwwroot/css/app.css
index 66d53f6..1e4b332 100644
--- a/Selector.MAUI/wwwroot/css/app.css
+++ b/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;
 }*/