profile popover in footer

internal/server/server.go

@@ -62,6 +62,7 @@ func NewRouter(
 	}))
 	r.Static("/styles", "./styles")
 	r.Static("/favicon", "./favicon")
+	r.Static("/images", "./images")
 
 	// html (must be before the api endpoints, because the webpage middleware has to be installed beforehand
 

styles/index.css

@@ -216,6 +216,9 @@
   .m-\[2em\] {
     margin: 2em;
   }
+  .mt-\[0\.25em\] {
+    margin-top: 0.25em;
+  }
   .mt-\[1em\] {
     margin-top: 1em;
   }
@@ -252,12 +255,18 @@
   .table {
     display: table;
   }
+  .h-\[2rem\] {
+    height: 2rem;
+  }
   .max-h-full {
     max-height: 100%;
   }
   .min-h-full {
     min-height: 100%;
   }
+  .w-fit {
+    width: fit-content;
+  }
   .w-full {
     width: 100%;
   }
@@ -270,6 +279,9 @@
   .min-w-fit {
     min-width: fit-content;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .grow {
     flex-grow: 1;
   }
@@ -303,6 +315,12 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
+  .gap-\[1em\] {
+    gap: 1em;
+  }
   .gap-y-\[2em\] {
     row-gap: 2em;
   }
@@ -315,6 +333,9 @@
   .overflow-y-hidden {
     overflow-y: hidden;
   }
+  .rounded-\[50\%\] {
+    border-radius: 50%;
+  }
   .rounded-lg {
     border-radius: var(--radius);
   }
@@ -325,9 +346,26 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-b-\[1px\] {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-b-\[2px\] {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
   .border-sidebar-border {
     border-color: var(--sidebar-border);
   }
+  .border-b-\[1px_solid\] {
+    border-bottom-color: 1px solid;
+  }
+  .border-b-\[1px_solid_black\] {
+    border-bottom-color: 1px solid black;
+  }
+  .bg-accent {
+    background-color: var(--accent);
+  }
   .bg-background {
     background-color: var(--background);
   }
@@ -343,6 +381,9 @@
   .pt-\[1em\] {
     padding-top: 1em;
   }
+  .pr-\[2em\] {
+    padding-right: 2em;
+  }
   .pb-\[1em\] {
     padding-bottom: 1em;
   }
@@ -389,6 +430,83 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[left\] {
+    transition-property: left;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[scale\] {
+    transition-property: scale;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[top\] {
+    transition-property: top;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[y\] {
+    transition-property: y;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .group-hover\:scale-120 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-scale-x: 120%;
+        --tw-scale-y: 120%;
+        --tw-scale-z: 120%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
+  .hover\:scale-110 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 110%;
+        --tw-scale-y: 110%;
+        --tw-scale-z: 110%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
+  .hover\:scale-120 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 120%;
+        --tw-scale-y: 120%;
+        --tw-scale-z: 120%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
+  .hover\:scale-150 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 150%;
+        --tw-scale-y: 150%;
+        --tw-scale-z: 150%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
+  .hover\:cursor-pointer {
+    &:hover {
+      @media (hover: hover) {
+        cursor: pointer;
+      }
+    }
+  }
   .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
@@ -428,6 +546,18 @@
       padding-block: calc(8vw - 0.5em);
     }
   }
+  .dark\:invert {
+    @media (prefers-color-scheme: dark) {
+      --tw-invert: invert(100%);
+      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+    }
+  }
+  .dark\:invert-\[100\%\] {
+    @media (prefers-color-scheme: dark) {
+      --tw-invert: invert(100%);
+      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+    }
+  }
 }
 @layer base {
   select {
@@ -802,6 +932,21 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -820,6 +965,9 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
     }
   }
 }

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>