add slide-from-right panel

ryanfaerman · Jan 31, 2024 · e91d144 · e91d144
1 parent 368e54f
commit e91d144
Show file tree

Hide file tree

Showing 4 changed files with 447 additions and 2 deletions.
diff --git a/internal/handlers/navigation.go b/internal/handlers/navigation.go
@@ -0,0 +1,30 @@
+package handlers
+
+import (
+	"net/http"
+
+	"github.com/go-chi/chi"
+	"github.com/ryanfaerman/netctl/internal/middleware"
+	"github.com/ryanfaerman/netctl/internal/views"
+	"github.com/ryanfaerman/netctl/web/named"
+)
+
+type Navigation struct{}
+
+func init() {
+	global.handlers = append(global.handlers, Navigation{})
+}
+
+func (h Navigation) Routes(r chi.Router) {
+	r.Use(middleware.HTMXOnly)
+	r.Get(named.Route("slide-over-show", "/-/slide-over/show"), h.SlideOverShow)
+	r.Get(named.Route("slide-over-hide", "/-/slide-over/hide"), h.SlideOverHide)
+}
+
+func (h Navigation) SlideOverShow(w http.ResponseWriter, r *http.Request) {
+	views.SlideOver().Render(r.Context(), w)
+}
+
+func (h Navigation) SlideOverHide(w http.ResponseWriter, r *http.Request) {
+	views.SlideOverTarget().Render(r.Context(), w)
+}
diff --git a/internal/handlers/static/custom.css b/internal/handlers/static/custom.css
@@ -1009,3 +1009,110 @@ textarea {
   display: none;
 }
 
+.slide-overlay {
+	height: 100%;
+	background-color: #000;
+	width: 100%;
+	position: fixed;
+	z-index: 200;
+	opacity: .1;
+}
+
+
+.htmx-swapping .slide-over {
+  /* background: red; */
+  /* width: 0; */
+}
+
+@keyframes slide-over-from-right {
+    0% {
+        transform: translateX(320px);
+    }
+    100% {
+        transform: translateX(0px);
+    }
+}
+.slide-over {
+	position: fixed;
+	top: 0;
+
+	background: var(--background-color);
+	z-index: 210;
+	height: 100%;
+	width: 300px;
+
+  padding: 0.5rem 1rem;
+
+  border-radius: 0.4rem;
+  animation: slide-over-from-right 100ms ease-in;
+}
+
+.slide-over[data-slide-from="right"] {
+  right: 0;
+	border-left: 1px solid var(--border-color);
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.slide-over header {
+	width: 100%;
+	height: fit-content;
+
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+ grid-template-rows: auto;
+  grid-template-areas: 
+    "title close"
+    "subtitle ." ;
+
+
+  column-gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.slide-over header .title {
+  grid-area: title;
+  font-size: 1.2em;
+  font-weight: bold;
+}
+.slide-over header .subtitle {
+  grid-area: subtitle;
+  font-size: 1.0em;
+  color: var(--text-color-softer);
+}
+
+.slide-over header .close {
+  grid-area: close;
+  text-align: right;
+  cursor: pointer;
+  font-size: 1.3em;
+  color: var(--text-color-softer);
+}
+
+.slide-over ul {
+  border-top: 1px solid var(--background-color-softer);
+  list-style: none;
+  margin-bottom: 0;
+  padding: 1rem 0;
+}
+
+.slide-over ul a {
+  color: var(--text-color-softer);
+  text-decoration: none;
+}
+
+.slide-over ul li {
+  padding: 0.75rem 0.5rem;
+  border-radius: 0.3em;
+  margin-bottom: 0;
+}
+
+.slide-over ul li:hover {
+  background: var(--background-color-softer);
+}
+
+.slide-over a i {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  width: 1.5em;
+}
diff --git a/internal/views/navigation.templ b/internal/views/navigation.templ
@@ -96,7 +96,12 @@ templ (m Menu) NewAppBar() {
 						@item.Item()
 					}
 					<li>
-						<a href="#" class="tab">
+						<a
+							class="tab"
+							hx-get={ named.URLFor("slide-over-show") }
+							hx-target="#slide-over-target"
+							hx-swap="outerHTML"
+						>
 							@IconSolid("user")
 							Account
 						</a>
@@ -105,4 +110,92 @@ templ (m Menu) NewAppBar() {
 			</nav>
 		</div>
 	</header>
+	@SlideOverTarget()
+}
+
+templ SlideOverTarget() {
+	<div id="slide-over-target"></div>
+}
+
+templ SlideOver() {
+	<div id="slide-over-target">
+		<div
+			class="slide-overlay"
+			hx-get={ named.URLFor("slide-over-hide") }
+			hx-target="#slide-over-target"
+			hx-swap="outerHTML"
+		></div>
+		<div class="slide-over" data-slide-from="right">
+			<header>
+				<span class="title name">Ryan Faerman</span>
+				<span class="subtitle callsign">KQ4JXI</span>
+				<a
+					class="close"
+					hx-get={ named.URLFor("slide-over-hide") }
+					hx-target="#slide-over-target"
+					hx-swap="outerHTML"
+				>
+					@IconSolid("xmark")
+				</a>
+			</header>
+			<div class="content">
+				<ul>
+					<li>
+						<a href={ templ.URL(named.URLFor("account-profile-self")) }>
+							@IconSolid("user")
+							Your Profile
+						</a>
+					</li>
+				</ul>
+				<ul>
+					<li>
+						<a href="#">
+							@IconSolid("book")
+							Your Logbooks
+						</a>
+					</li>
+					<li>
+						<a href="#">
+							@IconSolid("users-rectangle")
+							Your Nets
+						</a>
+					</li>
+					<li>
+						<a href="#">
+							@IconSolid("people-group")
+							Your Clubs
+						</a>
+					</li>
+					<li>
+						<a href="#">
+							@IconSolid("sliders")
+							Settings
+						</a>
+					</li>
+				</ul>
+				<ul>
+					<li>
+						<a href="#">
+							@IconSolid("book-open")
+							Net Control Docs
+						</a>
+					</li>
+					<li>
+						<a href="#">
+							@IconSolid("clipboard-question")
+							Net Control Support
+						</a>
+					</li>
+				</ul>
+				<ul>
+					<li>
+						<a href="#">
+							@IconSolid("sign-out")
+							Sign Out
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
 }