Modified account page to be mobile friendly

view/component/account/changeusername.templ

@@ -16,11 +16,11 @@ templ ChangeUsername(err string, username string) {
 		x-data={ "{ err: '" + err + "'}" }
 	>
 		<div
-			class="flex"
+			class="flex flex-col sm:flex-row"
 			x-data={ "{username: '" + username + "'}" }
 		>
 			<div
-				class="flex items-center relative"
+				class="flex flex-col sm:flex-row sm:items-center relative"
 			>
 				<label
 					for="username"
@@ -31,15 +31,15 @@ templ ChangeUsername(err string, username string) {
 					id="username"
 					name="username"
 					class="py-1 px-4 rounded-lg text-md
-                bg-surface0 border border-surface2
+                    bg-surface0 border border-surface2 w-50 sm:ml-5
-                disabled:opacity-50 ml-5 disabled:pointer-events-none"
+                    disabled:opacity-50 ml-0 disabled:pointer-events-none"
 					required
 					aria-describedby="username-error"
 					x-model="username"
 				/>
 				<div
-					class="absolute inset-y-0 end-0 
+					class="absolute inset-y-0 sm:start-66 start-43 pt-9
-                        pointer-events-none pe-3 pt-2"
+                        pointer-events-none sm:pe-3 sm:pt-2"
 					x-show="err"
 					x-cloak
 				>
@@ -60,9 +60,9 @@ templ ChangeUsername(err string, username string) {
 					</svg>
 				</div>
 			</div>
-			<div>
+			<div class="mt-2 sm:mt-0">
 				<button
-					class="rounded-lg bg-blue py-1 px-2 text-mantle ml-2
+					class="rounded-lg bg-blue py-1 px-2 text-mantle sm:ml-2
                 hover:cursor-pointer hover:bg-blue/75 transition"
 					x-cloak
 					x-show={ "username !=='" + user.Username + "'" }
@@ -85,7 +85,7 @@ templ ChangeUsername(err string, username string) {
 			</div>
 		</div>
 		<p
-			class="block text-red ml-24 mt-1 transition"
+			class="block text-red sm:ml-24 mt-1 transition"
 			x-cloak
 			x-show="err"
 			x-text="err"

view/component/account/container.templ

@@ -4,9 +4,11 @@ templ AccountContainer(subpage string) {
 	<div
 		id="account-container"
 		class="flex max-w-200 min-h-100 mx-auto bg-mantle mt-10 rounded-xl"
+		x-data="{big:window.innerWidth >=768, open:false}"
+		@resize.window="big = window.innerWidth >= 768"
 	>
 		@SelectMenu(subpage)
-		<div class="mt-5 w-full">
+		<div class="mt-5 w-full md:ml-[200px] ml-[40px] transition-all duration-300">
 			<div
 				class="pl-5 text-2xl text-subtext1 border-b 
                     border-overlay0 w-[90%] mx-auto"

view/component/account/selectmenu.templ

@@ -30,14 +30,42 @@ templ SelectMenu(activePage string) {
 	page := fmt.Sprintf("{page:'%s'}", activePage)
 	}}
 	<form
-		class="flex bg-surface0 w-fit border-e border-overlay0
-        rounded-l-xl"
 		hx-post="/account-select-page"
 		hx-target="#account-container"
 		hx-swap="outerHTML"
+		class="relative"
 	>
-		<div>
+		<div
-			<div class="px-4 py-6">
+			class="bg-surface0 border-e border-overlay0 ease-in-out
+            absolute top-0 left-0 z-1
+            rounded-l-xl h-full overflow-hidden transition-all duration-300"
+			x-bind:style="(open || big) ? 'width: 200px;' : 'width: 40px;'"
+		>
+			<div x-show="!big">
+				<button
+					type="button"
+					@click="open = !open"
+					class="block rounded-lg p-2.5 md:hidden transition
+                    bg-surface0 text-subtext0 hover:text-overlay2/75"
+				>
+					<span class="sr-only">Toggle menu</span>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="size-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M4 6h16M4 12h16M4 18h16"
+						></path>
+					</svg>
+				</button>
+			</div>
+			<div class="px-4 py-6" x-show="(open || big)">
 				<ul class="mt-6 space-y-1" x-data={ page }>
 					for _, item := range menuItems {
 						{{

view/component/nav/sidenav.templ

@@ -8,7 +8,7 @@ templ sideNav(navItems []NavItem) {
 	<div
 		x-show="open"
 		x-transition
-		class="absolute w-full bg-mantle sm:hidden"
+		class="absolute w-full bg-mantle sm:hidden z-10"
 	>
 		<div class="px-4 py-6">
 			<ul class="space-y-1">

view/layout/global.templ

@@ -55,7 +55,7 @@ templ Global() {
 				class="flex flex-col h-screen justify-between"
 			>
 				@nav.Navbar()
-				<div id="page-content" class="mb-auto">
+				<div id="page-content" class="mb-auto px-5">
 					{ children... }
 				</div>
 				@footer.Footer()