chore: add mobile search, and fix mobile's header ssr

mbaraa · Apr 22, 2024 · 24fa8e0 · 24fa8e0
1 parent 2cb33d9
commit 24fa8e0
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 16 deletions.
diff --git a/components/layouts/default.templ b/components/layouts/default.templ
@@ -2,7 +2,7 @@ package layouts
 
 import "dankmuzikk/components/ui/header"
 
-templ Default(children ...templ.Component) {
+templ Default(isMobile bool, children ...templ.Component) {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
@@ -51,7 +51,7 @@ templ Default(children ...templ.Component) {
                 min-height: 100dvh;
             '
 		>
-			@header.Header()
+			@header.Header(isMobile)
 			for _, child := range children {
 				@child
 			}

diff --git a/components/pages/index.templ b/components/pages/index.templ
@@ -2,8 +2,8 @@ package pages
 
 import "dankmuzikk/components/layouts"
 
-templ Index() {
-	@layouts.Default(main())
+templ Index(isMobile bool) {
+	@layouts.Default(isMobile, main())
 }
 
 templ main() {

diff --git a/components/ui/header/header.templ b/components/ui/header/header.templ
@@ -3,8 +3,27 @@ package header
 import "dankmuzikk/components/ui/search"
 
 templ mobileHeader() {
-	<div class={ "md:hidden" }>
-		mobile
+	<div class={ "md:hidden", "h-[250px]", "relative" }>
+		<div class={ "font-AudioNugget", "text-white" }>
+			<a href="/" class={ "flex", "justify-center", "items-center", "flex-col", "gap-y-3", "h-min" }>
+				<img
+					src="/static/android-chrome-512x512.png"
+					alt="DankMuzikk Logo"
+					class={ "w-[55px]", "rounded-md" }
+				/>
+				<h1 class={ "text-3xl" }>DankMuzikk</h1>
+			</a>
+		</div>
+		<div class={ "absolute", "bottom-[60px]" }>
+			<p class={ "text-white", "font-MyriadPro", "text-xl" }>
+				Hey,
+				<br/>
+				Wanna play some tunes?
+			</p>
+		</div>
+		<div class={ "absolute", "bottom-[0px]" }>
+			@search.Search()
+		</div>
 	</div>
 }
 
@@ -31,9 +50,12 @@ templ desktopHeader() {
 	</div>
 }
 
-templ Header() {
+templ Header(isMobile bool) {
 	<header class={ "bg-accent", "p-[20px]" }>
-		@mobileHeader()
-		@desktopHeader()
+		if isMobile {
+			@mobileHeader()
+		} else {
+			@desktopHeader()
+		}
 	</header>
 }
diff --git a/components/ui/search/search.templ b/components/ui/search/search.templ
@@ -1,7 +1,7 @@
 package search
 
 templ Search() {
-	<div class={ "!text-accent", "!font-MyriadPro", "md:w-[300px]", "xl:w-[500px]" }>
+	<div class={ "!text-accent", "!font-MyriadPro", "w-[92vw]", "md:w-[300px]", "xl:w-[500px]" }>
 		<form
 			class={ "w-full" }
 			hx-get="/api/search-suggession"
@@ -19,7 +19,7 @@ templ Search() {
 				placeholder="Search for some tunes"
 			/>
 		</form>
-		<div class={ "absolute", "md:top-[80px]", "z-10", "md:w-[300px]", "xl:w-[500px]" } id="search-results"></div>
+		<div class={ "absolute", "top-[55px]", "md:top-[80px]", "z-10", "w-[92vw]", "md:w-[300px]", "xl:w-[500px]" } id="search-results"></div>
 	</div>
 	//
 	<script lang="javascript">

diff --git a/components/ui/search/search_suggestions.templ b/components/ui/search/search_suggestions.templ
@@ -5,8 +5,12 @@ import "fmt"
 templ SearchSuggestions(suggestions []string, originalQuery string) {
 	<ul id="search-suggestions" class={ "grid", "grid-cols-1", "w-full", "bg-[#FFFFFFBB]", "rounded-lg", "p-[10px]" }>
 		for i, suggestion := range suggestions {
-			<li class={ "focus-within:bg-primary", "focus-within:text-white", "text-lg", "p-1", "rounded" }>
-				<a href="https://google.com" class={ "w-full" } id={ fmt.Sprintf("search-suggestion-%d", i) }>
+			<li
+				class={ "focus-within:bg-primary", "focus-within:text-white",
+                        "text-lg", "p-1", "first:rounded-t", "last:rounded-b",
+                        "border-b", "border-b-primary", "last:border-b-0" }
+			>
+				<a href="https://google.com" class={ "w-full", "p-[10px]" } id={ fmt.Sprintf("search-suggestion-%d", i) }>
 					if len(suggestion) <= len(originalQuery) {
 						<span><b>{ suggestion }</b></span>
 					} else {

diff --git a/handlers/pages.go b/handlers/pages.go
@@ -1,12 +1,15 @@
 package handlers
 
 import (
+	"context"
 	"dankmuzikk/components/pages"
 	"net/http"
-
-	"github.com/a-h/templ"
+	"strings"
 )
 
 func HandleHomePage(hand *http.ServeMux) {
-	hand.Handle("/", templ.Handler(pages.Index()))
+	hand.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		isMobile := strings.Contains(strings.ToLower(r.Header.Get("User-Agent")), "mobile")
+		pages.Index(isMobile).Render(context.Background(), w)
+	})
 }