profile popover in footer

templates/layout.html.tmpl

@@ -111,12 +111,6 @@
 						</a>
 					</li>
 
-					<li class="pt-[1em] pb-[1em]">
-						<a href="/api/auth/logout" hx-boost="false" class="p-[1em] font-display">
-							Log Out
-						</a>
-					</li>
-
 				{{- end }}
 				</ul>
 			</nav>
@@ -133,7 +127,8 @@
 				<a href="mailto:support@inventory-plus-plus.com" class="p-[1em] font-display text-center">Support</a>
 			</address>
 		{{- if .Identity.Claims.Picture }}
-			<div
+			<button
+				popovertarget="identity-popover"
 				class="
 					col-3
 					max-w-full
@@ -152,6 +147,89 @@
 						margin: 1rem 0;
 					"
 				/>
+			</button>
+			<div
+				popover="auto"
+				id="identity-popover"
+				class="
+					border-[1px] border-sidebar-border rounded-lg
+					bg-card
+					p-[1em]
+				"
+				style="
+					top: calc(100% - 15rem);
+  					left: calc(100% - 20rem);
+					box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
+				"
+			>
+				<div class="
+					flex
+					justify-start
+					items-center
+					gap-[1em]
+
+					pb-[1em]
+					border-b-[2px]
+					border-sidebar-border
+				">
+					<div
+						class="
+							flex
+							justify-center
+							items-center
+						"
+						style="
+							flex-basis: 3rem;
+							flex-shrink: 0;
+						"
+					>
+						<img
+							src="{{ .Identity.Claims.Picture }}"
+							class="rounded-[50%]"
+						/>
+					</div>
+
+					<div>
+						<div class="font-display" style="word-break: break-word;">
+							{{ .Identity.Claims.Name }}
+						</div>
+
+						<div style="word-break: break-word;">
+							{{ or .Identity.Claims.Nickname .Identity.Claims.Subject }}
+						</div>
+
+					</div>
+
+				</div>
+
+				<a
+					href="/api/auth/logout"
+					hx-boost="false"
+					class="
+						w-fit
+						flex
+						items-center
+						p-[1em]
+
+						font-display
+						hover:underline
+						cursor-pointer
+						gap-[1em]
+
+						group
+						hover:bg-accent
+						rounded-lg
+						mt-[0.25em]
+						pr-[2em]
+					"
+				>
+					<img
+						src="/images/door.png"
+						class="h-[2rem] group-hover:scale-120 transition-[scale] dark:invert"
+					/>
+					Log Out
+				</a>
+
 			</div>
 		{{- end }}
 		</footer>