x/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(navbar): update styles to vercel design specification

Browse Source
This commit is contained in:
Prad Nu
2026-01-05 15:48:02 -05:00
parent dd299f76e0
commit 4cb1b15642
2 changed files with 34 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
components/navbar.templ
View File

@@ -206,80 +206,85 @@ templ AppNavStyles() {
padding: 0;
}
wa-page::part(header) { border-bottom: 1px solid var(--wa-color-neutral-200); }
wa-page::part(subheader) { border-bottom: none; }
wa-page::part(main-content) { background: var(--wa-color-surface-alt); }
/* Header Bar */
/* Header Bar - Vercel style */
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 12px;
height: 48px;
padding: 0 16px;
}
.header-nav {
display: flex;
align-items: center;
gap: 2px;
gap: 0;
}
.nav-logo {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 6px;
gap: 6px;
padding: 6px 8px;
text-decoration: none;
color: var(--wa-color-primary);
font-weight: 600;
font-size: 13px;
border-radius: 4px;
font-size: 14px;
border-radius: 6px;
}
.nav-logo:hover { background: var(--wa-color-neutral-100); }
.nav-logo wa-icon { font-size: 16px; }
.nav-sep { color: var(--wa-color-neutral-300); font-size: 14px; padding: 0 2px; }
.nav-logo wa-icon { font-size: 18px; }
.nav-sep { color: var(--wa-color-neutral-400); font-size: 18px; font-weight: 300; padding: 0 4px; }
.nav-btn {
display: flex;
align-items: center;
gap: 3px;
padding: 4px 6px;
gap: 4px;
padding: 6px 8px;
border: none;
background: none;
font: inherit;
font-size: 13px;
font-size: 14px;
font-weight: 500;
color: var(--wa-color-neutral-700);
border-radius: 4px;
border-radius: 6px;
cursor: pointer;
}
.nav-btn:hover { background: var(--wa-color-neutral-100); }
.nav-btn wa-icon { font-size: 10px; color: var(--wa-color-neutral-400); }
.menu-label { display: block; padding: 6px 12px; font-size: 11px; color: var(--wa-color-neutral-500); }
.user-info { padding: 8px 12px; }
.user-info strong { display: block; font-size: 13px; }
.user-info span { font-size: 11px; color: var(--wa-color-neutral-500); }
.nav-btn wa-icon { font-size: 12px; color: var(--wa-color-neutral-500); }
.menu-label { display: block; padding: 6px 12px; font-size: 12px; color: var(--wa-color-neutral-500); text-transform: uppercase; letter-spacing: 0.5px; }
.user-info { padding: 10px 14px; }
.user-info strong { display: block; font-size: 14px; }
.user-info span { font-size: 12px; color: var(--wa-color-neutral-500); }
/* Tab Bar */
/* Tab Bar - Vercel style: content-width tabs, left-aligned */
.tab-bar {
display: flex;
align-items: stretch;
gap: 0;
padding: 0 12px;
padding: 0 16px;
border-bottom: 1px solid var(--wa-color-neutral-200);
}
.tab {
display: flex;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
font-size: 13px;
gap: 8px;
padding: 10px 12px;
flex-shrink: 0;
width: auto;
font-size: 14px;
font-weight: 500;
color: var(--wa-color-neutral-600);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s;
}
.tab:hover { color: var(--wa-color-neutral-900); }
.tab.active { color: var(--wa-color-primary); border-bottom-color: var(--wa-color-primary); }
.tab wa-icon { font-size: 14px; }
.tab.active { color: var(--wa-color-neutral-900); border-bottom-color: var(--wa-color-neutral-900); }
.tab wa-icon { font-size: 15px; }
/* Content */
.content-container { max-width: 1200px; margin: 0 auto; padding: 16px; }
.content-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
</style>
}

2
components/navbar_templ.go
View File

@@ -521,7 +521,7 @@ func AppNavStyles() templ.Component {
templ_7745c5c3_Var25 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<style>\n\t\t/* Reset wa-page slots */\n\t\twa-page::part(header), wa-page::part(subheader) {\n\t\t\tbackground: var(--wa-color-surface);\n\t\t\tpadding: 0;\n\t\t}\n\t\twa-page::part(header) { border-bottom: 1px solid var(--wa-color-neutral-200); }\n\t\twa-page::part(main-content) { background: var(--wa-color-surface-alt); }\n\n\t\t/* Header Bar */\n\t\t.app-header {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\theight: 40px;\n\t\t\tpadding: 0 12px;\n\t\t}\n\t\t.header-nav {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 2px;\n\t\t}\n\t\t.nav-logo {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t\tpadding: 4px 6px;\n\t\t\ttext-decoration: none;\n\t\t\tcolor: var(--wa-color-primary);\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 13px;\n\t\t\tborder-radius: 4px;\n\t\t}\n\t\t.nav-logo:hover { background: var(--wa-color-neutral-100); }\n\t\t.nav-logo wa-icon { font-size: 16px; }\n\t\t.nav-sep { color: var(--wa-color-neutral-300); font-size: 14px; padding: 0 2px; }\n\t\t.nav-btn {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 3px;\n\t\t\tpadding: 4px 6px;\n\t\t\tborder: none;\n\t\t\tbackground: none;\n\t\t\tfont: inherit;\n\t\t\tfont-size: 13px;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--wa-color-neutral-700);\n\t\t\tborder-radius: 4px;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.nav-btn:hover { background: var(--wa-color-neutral-100); }\n\t\t.nav-btn wa-icon { font-size: 10px; color: var(--wa-color-neutral-400); }\n\t\t.menu-label { display: block; padding: 6px 12px; font-size: 11px; color: var(--wa-color-neutral-500); }\n\t\t.user-info { padding: 8px 12px; }\n\t\t.user-info strong { display: block; font-size: 13px; }\n\t\t.user-info span { font-size: 11px; color: var(--wa-color-neutral-500); }\n\n\t\t/* Tab Bar */\n\t\t.tab-bar {\n\t\t\tdisplay: flex;\n\t\t\tgap: 0;\n\t\t\tpadding: 0 12px;\n\t\t\tborder-bottom: 1px solid var(--wa-color-neutral-200);\n\t\t}\n\t\t.tab {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 6px;\n\t\t\tpadding: 8px 12px;\n\t\t\tfont-size: 13px;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--wa-color-neutral-600);\n\t\t\ttext-decoration: none;\n\t\t\tborder-bottom: 2px solid transparent;\n\t\t\tmargin-bottom: -1px;\n\t\t}\n\t\t.tab:hover { color: var(--wa-color-neutral-900); }\n\t\t.tab.active { color: var(--wa-color-primary); border-bottom-color: var(--wa-color-primary); }\n\t\t.tab wa-icon { font-size: 14px; }\n\n\t\t/* Content */\n\t\t.content-container { max-width: 1200px; margin: 0 auto; padding: 16px; }\n\t</style>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<style>\n\t\t/* Reset wa-page slots */\n\t\twa-page::part(header), wa-page::part(subheader) {\n\t\t\tbackground: var(--wa-color-surface);\n\t\t\tpadding: 0;\n\t\t}\n\t\twa-page::part(header) { border-bottom: 1px solid var(--wa-color-neutral-200); }\n\t\twa-page::part(subheader) { border-bottom: none; }\n\t\twa-page::part(main-content) { background: var(--wa-color-surface-alt); }\n\n\t\t/* Header Bar - Vercel style */\n\t\t.app-header {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\theight: 48px;\n\t\t\tpadding: 0 16px;\n\t\t}\n\t\t.header-nav {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 0;\n\t\t}\n\t\t.nav-logo {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 6px;\n\t\t\tpadding: 6px 8px;\n\t\t\ttext-decoration: none;\n\t\t\tcolor: var(--wa-color-primary);\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tborder-radius: 6px;\n\t\t}\n\t\t.nav-logo:hover { background: var(--wa-color-neutral-100); }\n\t\t.nav-logo wa-icon { font-size: 18px; }\n\t\t.nav-sep { color: var(--wa-color-neutral-400); font-size: 18px; font-weight: 300; padding: 0 4px; }\n\t\t.nav-btn {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t\tpadding: 6px 8px;\n\t\t\tborder: none;\n\t\t\tbackground: none;\n\t\t\tfont: inherit;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--wa-color-neutral-700);\n\t\t\tborder-radius: 6px;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.nav-btn:hover { background: var(--wa-color-neutral-100); }\n\t\t.nav-btn wa-icon { font-size: 12px; color: var(--wa-color-neutral-500); }\n\t\t.menu-label { display: block; padding: 6px 12px; font-size: 12px; color: var(--wa-color-neutral-500); text-transform: uppercase; letter-spacing: 0.5px; }\n\t\t.user-info { padding: 10px 14px; }\n\t\t.user-info strong { display: block; font-size: 14px; }\n\t\t.user-info span { font-size: 12px; color: var(--wa-color-neutral-500); }\n\n\t\t/* Tab Bar - Vercel style: content-width tabs, left-aligned */\n\t\t.tab-bar {\n\t\t\tdisplay: flex;\n\t\t\talign-items: stretch;\n\t\t\tgap: 0;\n\t\t\tpadding: 0 16px;\n\t\t\tborder-bottom: 1px solid var(--wa-color-neutral-200);\n\t\t}\n\t\t.tab {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tgap: 8px;\n\t\t\tpadding: 10px 12px;\n\t\t\tflex-shrink: 0;\n\t\t\twidth: auto;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--wa-color-neutral-600);\n\t\t\ttext-decoration: none;\n\t\t\tborder-bottom: 2px solid transparent;\n\t\t\tmargin-bottom: -1px;\n\t\t\ttransition: color 0.15s;\n\t\t}\n\t\t.tab:hover { color: var(--wa-color-neutral-900); }\n\t\t.tab.active { color: var(--wa-color-neutral-900); border-bottom-color: var(--wa-color-neutral-900); }\n\t\t.tab wa-icon { font-size: 15px; }\n\n\t\t/* Content */\n\t\t.content-container { max-width: 1200px; margin: 0 auto; padding: 24px; }\n\t</style>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}