feat(components): add sidebar component
This commit is contained in:
181
components/sidebar.templ
Normal file
181
components/sidebar.templ
Normal file
@@ -0,0 +1,181 @@
|
||||
package components
|
||||
|
||||
// SidebarItem represents a navigation item in the sidebar
|
||||
type SidebarItem struct {
|
||||
ID string
|
||||
Icon string
|
||||
Label string
|
||||
Href string
|
||||
Active bool
|
||||
Badge string
|
||||
}
|
||||
|
||||
// DefaultSidebarItems returns the main navigation items
|
||||
func DefaultSidebarItems(activeTab string) []SidebarItem {
|
||||
return []SidebarItem{
|
||||
{ID: "overview", Icon: "house", Label: "Overview", Href: "/dashboard?tab=overview", Active: activeTab == "overview" || activeTab == ""},
|
||||
{ID: "transactions", Icon: "right-left", Label: "Transactions", Href: "/dashboard?tab=transactions", Active: activeTab == "transactions"},
|
||||
{ID: "tokens", Icon: "wallet", Label: "Tokens", Href: "/dashboard?tab=tokens", Active: activeTab == "tokens"},
|
||||
{ID: "nfts", Icon: "images", Label: "NFTs", Href: "/dashboard?tab=nfts", Active: activeTab == "nfts"},
|
||||
{ID: "activity", Icon: "clock-rotate-left", Label: "Activity", Href: "/dashboard?tab=activity", Active: activeTab == "activity"},
|
||||
}
|
||||
}
|
||||
|
||||
// SecondarySidebarItems returns the bottom navigation items
|
||||
func SecondarySidebarItems() []SidebarItem {
|
||||
return []SidebarItem{
|
||||
{ID: "settings", Icon: "gear", Label: "Settings", Href: "/settings", Active: false},
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar renders the Supabase-style icon sidebar
|
||||
templ Sidebar(items []SidebarItem, secondaryItems []SidebarItem) {
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-inner">
|
||||
<!-- Logo -->
|
||||
<a href="/dashboard" class="sidebar-logo">
|
||||
<wa-icon name="cube"></wa-icon>
|
||||
</a>
|
||||
<!-- Main Navigation -->
|
||||
<nav class="sidebar-nav">
|
||||
for _, item := range items {
|
||||
<wa-tooltip content={ item.Label } placement="right">
|
||||
<a
|
||||
href={ templ.SafeURL(item.Href) }
|
||||
class={ "sidebar-item", templ.KV("active", item.Active) }
|
||||
hx-get={ item.Href }
|
||||
hx-target="#main-content"
|
||||
hx-push-url="true"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<wa-icon name={ item.Icon }></wa-icon>
|
||||
if item.Badge != "" {
|
||||
<span class="sidebar-badge">{ item.Badge }</span>
|
||||
}
|
||||
</a>
|
||||
</wa-tooltip>
|
||||
}
|
||||
</nav>
|
||||
<!-- Secondary Navigation (bottom) -->
|
||||
<nav class="sidebar-nav sidebar-nav-bottom">
|
||||
for _, item := range secondaryItems {
|
||||
<wa-tooltip content={ item.Label } placement="right">
|
||||
<a
|
||||
href={ templ.SafeURL(item.Href) }
|
||||
class={ "sidebar-item", templ.KV("active", item.Active) }
|
||||
>
|
||||
<wa-icon name={ item.Icon }></wa-icon>
|
||||
</a>
|
||||
</wa-tooltip>
|
||||
}
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
}
|
||||
|
||||
// SidebarStyles renders the CSS for the sidebar
|
||||
templ SidebarStyles() {
|
||||
<style>
|
||||
/* Sidebar Container */
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--sidebar-width, 64px);
|
||||
height: 100vh;
|
||||
background: var(--wa-color-neutral-900);
|
||||
border-right: 1px solid var(--wa-color-neutral-800);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
.sidebar-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 auto 16px;
|
||||
background: linear-gradient(135deg, #17c2ff, #0090ff);
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-logo wa-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.sidebar-nav-bottom {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* Sidebar Item */
|
||||
.sidebar-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
color: var(--wa-color-neutral-400);
|
||||
text-decoration: none;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
background: var(--wa-color-neutral-800);
|
||||
color: var(--wa-color-neutral-100);
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
background: var(--wa-color-neutral-800);
|
||||
color: var(--wa-color-primary);
|
||||
}
|
||||
|
||||
.sidebar-item wa-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.sidebar-badge {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
background: var(--wa-color-danger);
|
||||
border-radius: 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Main content offset */
|
||||
.app-layout {
|
||||
margin-left: var(--sidebar-width, 64px);
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
277
components/sidebar_templ.go
Normal file
277
components/sidebar_templ.go
Normal file
@@ -0,0 +1,277 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.3.977
|
||||
package components
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
import "github.com/a-h/templ"
|
||||
import templruntime "github.com/a-h/templ/runtime"
|
||||
|
||||
// SidebarItem represents a navigation item in the sidebar
|
||||
type SidebarItem struct {
|
||||
ID string
|
||||
Icon string
|
||||
Label string
|
||||
Href string
|
||||
Active bool
|
||||
Badge string
|
||||
}
|
||||
|
||||
// DefaultSidebarItems returns the main navigation items
|
||||
func DefaultSidebarItems(activeTab string) []SidebarItem {
|
||||
return []SidebarItem{
|
||||
{ID: "overview", Icon: "house", Label: "Overview", Href: "/dashboard?tab=overview", Active: activeTab == "overview" || activeTab == ""},
|
||||
{ID: "transactions", Icon: "right-left", Label: "Transactions", Href: "/dashboard?tab=transactions", Active: activeTab == "transactions"},
|
||||
{ID: "tokens", Icon: "wallet", Label: "Tokens", Href: "/dashboard?tab=tokens", Active: activeTab == "tokens"},
|
||||
{ID: "nfts", Icon: "images", Label: "NFTs", Href: "/dashboard?tab=nfts", Active: activeTab == "nfts"},
|
||||
{ID: "activity", Icon: "clock-rotate-left", Label: "Activity", Href: "/dashboard?tab=activity", Active: activeTab == "activity"},
|
||||
}
|
||||
}
|
||||
|
||||
// SecondarySidebarItems returns the bottom navigation items
|
||||
func SecondarySidebarItems() []SidebarItem {
|
||||
return []SidebarItem{
|
||||
{ID: "settings", Icon: "gear", Label: "Settings", Href: "/settings", Active: false},
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar renders the Supabase-style icon sidebar
|
||||
func Sidebar(items []SidebarItem, secondaryItems []SidebarItem) templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var1 == nil {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<aside class=\"sidebar\"><div class=\"sidebar-inner\"><!-- Logo --><a href=\"/dashboard\" class=\"sidebar-logo\"><wa-icon name=\"cube\"></wa-icon></a><!-- Main Navigation --><nav class=\"sidebar-nav\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
for _, item := range items {
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<wa-tooltip content=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var2 string
|
||||
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 42, Col: 37}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\" placement=\"right\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var3 = []any{"sidebar-item", templ.KV("active", item.Active)}
|
||||
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var3...)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<a href=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var4 templ.SafeURL
|
||||
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(item.Href))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 44, Col: 38}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" class=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var5 string
|
||||
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var3).String())
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 1, Col: 0}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\" hx-get=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var6 string
|
||||
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(item.Href)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 46, Col: 25}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\" hx-target=\"#main-content\" hx-push-url=\"true\" hx-swap=\"innerHTML\"><wa-icon name=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var7 string
|
||||
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 51, Col: 32}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\"></wa-icon> ")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
if item.Badge != "" {
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<span class=\"sidebar-badge\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var8 string
|
||||
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.Badge)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 53, Col: 48}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</span>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</a></wa-tooltip>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</nav><!-- Secondary Navigation (bottom) --><nav class=\"sidebar-nav sidebar-nav-bottom\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
for _, item := range secondaryItems {
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<wa-tooltip content=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var9 string
|
||||
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 62, Col: 37}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\" placement=\"right\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var10 = []any{"sidebar-item", templ.KV("active", item.Active)}
|
||||
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var10...)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<a href=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var11 templ.SafeURL
|
||||
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(item.Href))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 64, Col: 38}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\" class=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var12 string
|
||||
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var10).String())
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 1, Col: 0}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\"><wa-icon name=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var13 string
|
||||
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 67, Col: 32}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\"></wa-icon></a></wa-tooltip>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</nav></div></aside>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return nil
|
||||
})
|
||||
}
|
||||
|
||||
// SidebarStyles renders the CSS for the sidebar
|
||||
func SidebarStyles() templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var14 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var14 == nil {
|
||||
templ_7745c5c3_Var14 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<style>\n\t\t/* Sidebar Container */\n\t\t.sidebar {\n\t\t\tposition: fixed;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\twidth: var(--sidebar-width, 64px);\n\t\t\theight: 100vh;\n\t\t\tbackground: var(--wa-color-neutral-900);\n\t\t\tborder-right: 1px solid var(--wa-color-neutral-800);\n\t\t\tz-index: 100;\n\t\t}\n\t\t\n\t\t.sidebar-inner {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\theight: 100%;\n\t\t\tpadding: 12px 0;\n\t\t}\n\t\t\n\t\t/* Logo */\n\t\t.sidebar-logo {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 40px;\n\t\t\theight: 40px;\n\t\t\tmargin: 0 auto 16px;\n\t\t\tbackground: linear-gradient(135deg, #17c2ff, #0090ff);\n\t\t\tborder-radius: 10px;\n\t\t\tcolor: white;\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t\n\t\t.sidebar-logo wa-icon {\n\t\t\tfont-size: 20px;\n\t\t}\n\t\t\n\t\t/* Navigation */\n\t\t.sidebar-nav {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t\tpadding: 0 12px;\n\t\t}\n\t\t\n\t\t.sidebar-nav-bottom {\n\t\t\tmargin-top: auto;\n\t\t}\n\t\t\n\t\t/* Sidebar Item */\n\t\t.sidebar-item {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 40px;\n\t\t\theight: 40px;\n\t\t\tborder-radius: 8px;\n\t\t\tcolor: var(--wa-color-neutral-400);\n\t\t\ttext-decoration: none;\n\t\t\ttransition: all 0.15s ease;\n\t\t}\n\t\t\n\t\t.sidebar-item:hover {\n\t\t\tbackground: var(--wa-color-neutral-800);\n\t\t\tcolor: var(--wa-color-neutral-100);\n\t\t}\n\t\t\n\t\t.sidebar-item.active {\n\t\t\tbackground: var(--wa-color-neutral-800);\n\t\t\tcolor: var(--wa-color-primary);\n\t\t}\n\t\t\n\t\t.sidebar-item wa-icon {\n\t\t\tfont-size: 20px;\n\t\t}\n\t\t\n\t\t/* Badge */\n\t\t.sidebar-badge {\n\t\t\tposition: absolute;\n\t\t\ttop: 4px;\n\t\t\tright: 4px;\n\t\t\tmin-width: 16px;\n\t\t\theight: 16px;\n\t\t\tpadding: 0 4px;\n\t\t\tbackground: var(--wa-color-danger);\n\t\t\tborder-radius: 8px;\n\t\t\tfont-size: 10px;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: white;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\t\t\n\t\t/* Main content offset */\n\t\t.app-layout {\n\t\t\tmargin-left: var(--sidebar-width, 64px);\n\t\t\tmin-height: 100vh;\n\t\t}\n\t</style>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return nil
|
||||
})
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
Reference in New Issue
Block a user