slide out menus ftw

ryanfaerman · Feb 1, 2024 · 0c7bd53 · 0c7bd53
1 parent 3c1d24b
commit 0c7bd53
Show file tree

Hide file tree

Showing 4 changed files with 449 additions and 36 deletions.
diff --git a/internal/handlers/navigation.go b/internal/handlers/navigation.go
@@ -17,12 +17,20 @@ func init() {
 
 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-show", "/-/slide-over/show/{side}"), 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)
+	side := chi.URLParam(r, "side")
+	if side != "left" && side != "right" {
+		side = "right"
+	}
+	if side == "right" {
+		views.RightNav().Show().Render(r.Context(), w)
+	} else {
+		views.LeftNav().Show().Render(r.Context(), w)
+	}
 }
 
 func (h Navigation) SlideOverHide(w http.ResponseWriter, r *http.Request) {

diff --git a/internal/handlers/static/custom.css b/internal/handlers/static/custom.css
@@ -279,18 +279,32 @@ html {
   padding: 0 1rem;
 }
 
+.local-bar .menu-button {
+  border: 1px solid var(--border-color-softer);
+  color: var(--text-color-softer);
+  width: 1.5rem;
+  height: 2rem;
+  text-align: center;
+  cursor: pointer;
+}
+
+.local-bar .menu-button:hover {
+  border-color: var(--border-color);
+  color: var(--text-color-normal);
+}
+
 .local-bar .app-name {
-  margin-left: 1em;
   padding-right: 2em;
   border-right: 1px solid var(--border-color-softer);
 }
 
-.local-bar .app-name a {
+.app-name a {
   font-weight: bold;
   font-variant: small-caps;
+  color: inherit;
 }
 
-.local-bar .app-name a:hover {
+.app-name a:hover {
   background-color: transparent;
   color: var(--text-color-normal);
 }
@@ -432,7 +446,7 @@ html {
   border-top: 1px solid var(--border-color-softer);
   background: var(--background-color-softer);
   position: sticky;
-  top: 17rem;
+  top: 18rem;
   z-index: 10;
 }
 
@@ -1016,6 +1030,7 @@ textarea {
 	position: fixed;
 	z-index: 200;
 	opacity: .1;
+  top: 0;
 }
 
 
@@ -1032,6 +1047,14 @@ textarea {
         transform: translateX(0px);
     }
 }
+@keyframes slide-over-from-left {
+    0% {
+        transform: translateX(-320px);
+    }
+    100% {
+        transform: translateX(0px);
+    }
+}
 .slide-over {
 	position: fixed;
 	top: 0;
@@ -1044,14 +1067,24 @@ textarea {
   padding: 0.5rem 1rem;
 
   border-radius: 0.4rem;
-  animation: slide-over-from-right 100ms ease-in;
+
+  overflow-y: auto;
 }
 
 .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;
+  animation: slide-over-from-right 100ms ease-in;
+}
+
+.slide-over[data-slide-from="left"] {
+  left: 0;
+  border-right: 1px solid var(--border-color);
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  animation: slide-over-from-left 100ms ease-in;
 }
 
 .slide-over header {
@@ -1081,6 +1114,19 @@ textarea {
   color: var(--text-color-softer);
 }
 
+.slide-over header .app-name {
+  font-size: 1.6em;
+  color: var(--text-color-softer);
+  font-weight: bold;
+}
+
+.slide-over header a {
+  text-decoration: none;
+}
+.slide-over header a:hover {
+  color: var(--text-color-normal);
+}
+
 .slide-over header .close {
   grid-area: close;
   text-align: right;
@@ -1089,6 +1135,7 @@ textarea {
   color: var(--text-color-softer);
 }
 
+
 .slide-over ul {
   border-top: 1px solid var(--background-color-softer);
   list-style: none;
@@ -1099,6 +1146,8 @@ textarea {
 .slide-over ul a {
   color: var(--text-color-softer);
   text-decoration: none;
+  display: inline-block;
+  width: 100%;
 }
 
 .slide-over ul li {

diff --git a/internal/views/navigation.templ b/internal/views/navigation.templ
@@ -79,6 +79,16 @@ templ (m Menu) NewAppBar() {
 		<div class="local-bar">
 			<nav>
 				<ul>
+					<li>
+						<a
+							class="tab menu-button"
+							hx-get={ named.URLFor("slide-over-show", "left") }
+							hx-target="#slide-over-target"
+							hx-swap="outerHTML"
+						>
+							@IconSolid("bars")
+						</a>
+					</li>
 					<li class="app-name">
 						<a href="/">
 							@IconSolid("tower-cell")
@@ -98,7 +108,7 @@ templ (m Menu) NewAppBar() {
 					<li>
 						<a
 							class="tab"
-							hx-get={ named.URLFor("slide-over-show") }
+							hx-get={ named.URLFor("slide-over-show", "right") }
 							hx-target="#slide-over-target"
 							hx-swap="outerHTML"
 						>
@@ -117,15 +127,118 @@ templ SlideOverTarget() {
 	<div id="slide-over-target"></div>
 }
 
-templ SlideOver() {
+type SideMenu struct {
+	Header   templ.Component
+	Sections []Menu
+	OnRight  bool
+}
+
+func (v SideMenu) side() string {
+	if v.OnRight {
+		return "right"
+	}
+	return "left"
+}
+
+templ (v SideMenu) Show() {
+	<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={ v.side() }>
+			<header>
+				@v.Header
+				<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">
+				for _, section := range v.Sections {
+					<ul>
+						for _, item := range section {
+							@item.Item()
+						}
+					</ul>
+				}
+			</div>
+		</div>
+	</div>
+}
+
+templ LeftNavHeader() {
+	<div class="title app-name">
+		<a href="/">
+			@IconSolid("tower-cell")
+			Net Control
+		</a>
+	</div>
+}
+
+func LeftNav() SideMenu {
+	return SideMenu{
+		Header:  LeftNavHeader(),
+		OnRight: false,
+		Sections: []Menu{
+			{
+				{Value: "Home", URL: "/", Icon: IconAttrs{Name: "house"}},
+				{Value: "Nets", URL: "#", Icon: IconAttrs{Name: "users-rectangle"}},
+				{Value: "Stations", URL: "#", Icon: IconAttrs{Name: "walkie-talkie"}},
+				{Value: "Clubs", URL: "#", Icon: IconAttrs{Name: "people-group"}},
+				{Value: "Contests", URL: "#", Icon: IconAttrs{Name: "trophy"}},
+			},
+			{
+				{Value: "Testing Locations", URL: "#", Icon: IconAttrs{Name: "map-location-dot"}},
+				{Value: "Marketplace", URL: "#", Icon: IconAttrs{Name: "store"}},
+			},
+		},
+	}
+}
+
+templ RightNavHeader() {
+	<span class="title name">Ryan Faerman</span>
+	<span class="subtitle callsign">KQ4JXI</span>
+}
+
+func RightNav() SideMenu {
+	return SideMenu{
+		Header:  RightNavHeader(),
+		OnRight: true,
+		Sections: []Menu{
+			{
+				{Value: "Your Profile", URL: named.URLFor("account-profile-self"), Icon: IconAttrs{Name: "user"}},
+				{Value: "Your Logbooks", URL: "#", Icon: IconAttrs{Name: "book"}},
+				{Value: "Your Nets", URL: "#", Icon: IconAttrs{Name: "users-rectangle"}},
+				{Value: "Your Clubs", URL: "#", Icon: IconAttrs{Name: "people-group"}},
+				{Value: "Settings", URL: "#", Icon: IconAttrs{Name: "sliders"}},
+			},
+			{
+				{Value: "Net Control Docs", URL: "#", Icon: IconAttrs{Name: "book-open"}},
+				{Value: "Net Control Support", URL: "#", Icon: IconAttrs{Name: "clipboard-question"}},
+			},
+			{
+				{Value: "Sign Out", URL: named.URLFor("session-destroy"), Icon: IconAttrs{Name: "sign-out"}},
+			},
+		},
+	}
+}
+
+templ SlideOver(side string) {
 	<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">
+		<div class="slide-over" data-slide-from={ side }>
 			<header>
 				<span class="title name">Ryan Faerman</span>
 				<span class="subtitle callsign">KQ4JXI</span>