Merge pull request #5 from mbaraa/feat/mobile-nav

Feat: Mobile navigator

views/components/mobilenav/mobilenav.templ

@@ -0,0 +1,32 @@
+package mobilenav
+
+templ MobileNav() {
+	<div
+		class={ "fixed", "bottom-0", "left-0", "h-auto", "w-full" }
+	>
+		<nav
+			class={ "bg-primary",  "h-[70px]", "m-[5px]", "rounded-[10px]", "flex", "justify-center", "items-center" }
+		>
+			<ul class={ "w-full", "m-0", "p-5", "list-none", "flex", "justify-between" }>
+				<li>
+					<a href="/"><img src="/static/images/nav-home-icon.svg" alt="Home"/></a>
+				</li>
+				<li>
+					<a href="/playlists"><img src="/static/images/nav-playlists-icon.svg" alt="Playlists"/></a>
+				</li>
+				<li>
+					<a href="/profile"><img src="/static/images/nav-profile-icon.svg" alt="Profile"/></a>
+				</li>
+				<li>
+					<a href="/about"><img src="/static/images/nav-about-icon.svg" alt="About"/></a>
+				</li>
+			</ul>
+		</nav>
+	</div>
+	<div class="hidden">
+		<img src="/static/images/nav-home-selected-icon.svg" alt="Home"/>
+		<img src="/static/images/nav-playlists-selected-icon.svg" alt="Playlists"/>
+		<img src="/static/images/nav-profile-selected-icon.svg" alt="Profile"/>
+		<img src="/static/images/nav-about-selected-icon.svg" alt="About"/>
+	</div>
+}

views/components/player/mobile_player.templ

@@ -3,7 +3,7 @@ package player
 templ mobilePlayer() {
 	<div
 		class={
-			"absolute", "bottom-0", "w-screen", "h-[120px]", "bg-accent", "rounded-t-3xl",
+			"absolute", "bottom-[80px]", "w-screen", "h-[120px]", "bg-accent", "rounded-[30px]",
 			"font-Ubuntu", "flex", "items-center", "justify-between", "gap-x-1", "p-[10px]",
 			"text-white",
 		}

views/layouts/default.templ

@@ -5,6 +5,7 @@ import (
 	"dankmuzikk/views/components/player"
 	"dankmuzikk/views/components/loading"
 	"fmt"
+	"dankmuzikk/views/components/mobilenav"
 )
 
 templ Default(isMobile bool, themeName string, children ...templ.Component) {
@@ -63,10 +64,19 @@ templ Default(isMobile bool, themeName string, children ...templ.Component) {
 			for _, child := range children {
 				@child
 			}
+			<!--
+                For when opened on a desktop and the client's width is really small,
+                and a similar thing isn't being done for mobile, since mobile clients can't change width w/o reloading.
+                And since desktops don't really mind rendering the same shit twice.
+            -->
+			<div style="display: contents" class={ "md:hidden" }>
+				@mobilenav.MobileNav()
+			</div>
 			<div id="loading" class="hidden">
 				@loading.Loading()
 			</div>
 			@player.PlayerSticky(isMobile)
+			//
 			<script src="/static/js/utils.js"></script>
 			<script type="module">
 			    function registerServiceWorkers() {