diff --git a/internal/handlers/navigation.go b/internal/handlers/navigation.go new file mode 100644 index 0000000..e984a0a --- /dev/null +++ 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 index 122cfd1..98e8f67 100644 --- 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 index 1c29659..4167379 100644 --- a/internal/views/navigation.templ +++ b/internal/views/navigation.templ @@ -96,7 +96,12 @@ templ (m Menu) NewAppBar() { @item.Item() }
  • - + @IconSolid("user") Account @@ -105,4 +110,92 @@ templ (m Menu) NewAppBar() { + @SlideOverTarget() +} + +templ SlideOverTarget() { +
    +} + +templ SlideOver() { +
    +
    +
    +
    + Ryan Faerman + KQ4JXI + + @IconSolid("xmark") + +
    +
    + + + + +
    +
    +
    } diff --git a/internal/views/navigation_templ.go b/internal/views/navigation_templ.go index f57882f..da7e308 100644 --- a/internal/views/navigation_templ.go +++ b/internal/views/navigation_templ.go @@ -199,7 +199,15 @@ func (m Menu) NewAppBar() templ.Component { return templ_7745c5c3_Err } } - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
  • ") + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
  • ") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -216,6 +224,213 @@ func (m Menu) NewAppBar() templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } + templ_7745c5c3_Err = SlideOverTarget().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + if !templ_7745c5c3_IsBuffer { + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W) + } + return templ_7745c5c3_Err + }) +} + +func SlideOverTarget() templ.Component { + return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) { + templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer) + if !templ_7745c5c3_IsBuffer { + templ_7745c5c3_Buffer = templ.GetBuffer() + defer templ.ReleaseBuffer(templ_7745c5c3_Buffer) + } + ctx = templ.InitializeContext(ctx) + templ_7745c5c3_Var8 := templ.GetChildren(ctx) + if templ_7745c5c3_Var8 == nil { + templ_7745c5c3_Var8 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
    ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + if !templ_7745c5c3_IsBuffer { + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W) + } + return templ_7745c5c3_Err + }) +} + +func SlideOver() templ.Component { + return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) { + templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer) + if !templ_7745c5c3_IsBuffer { + templ_7745c5c3_Buffer = templ.GetBuffer() + defer templ.ReleaseBuffer(templ_7745c5c3_Buffer) + } + ctx = templ.InitializeContext(ctx) + templ_7745c5c3_Var9 := templ.GetChildren(ctx) + if templ_7745c5c3_Var9 == nil { + templ_7745c5c3_Var9 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
    ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Var10 := `Ryan Faerman` + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var10) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Var11 := `KQ4JXI` + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var11) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = IconSolid("xmark").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
    ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } if !templ_7745c5c3_IsBuffer { _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W) }