Skip to content

Commit 9a1e9b9

Browse files
patriksvenssonpatriksvensson
committed
Add Discord link to header
1 parent f6c29d9 commit 9a1e9b9

1 file changed

Lines changed: 80 additions & 27 deletions

File tree

‎Spectre.Docs/Components/Shared/SharedHeader.razor‎

Lines changed: 80 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
11
@inject NavigationManager NavigationManager
22

3-
<header class="sticky top-0 h-16 z-50 w-full border-b border-base-200 dark:border-base-800 bg-white/95 dark:bg-base-900/95 backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-base-900/60">
3+
<header
4+
class="sticky top-0 h-16 z-50 w-full border-b border-base-200 dark:border-base-800 bg-white/95 dark:bg-base-900/95 backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-base-900/60">
45
<div class="w-full max-w-[98rem] mx-auto px-4 sm:px-6 lg:px-8">
56
<div class="flex items-center justify-between h-16">
67
<!-- Left side - Sidebar toggle and Logo -->
78
<div class="flex items-center space-x-3">
89
<!-- Sidebar toggle button (only visible when sidebar exists and ShowSidebarToggle is true) -->
910
@if (ShowSidebarToggle && HasTableOfContents)
1011
{
11-
<button id="sidebar-toggle" class="lg:hidden p-2 rounded-md text-base-600 dark:text-base-400 hover:bg-base-100 dark:hover:bg-base-800 transition-colors" aria-label="Toggle sidebar">
12+
<button id="sidebar-toggle"
13+
class="lg:hidden p-2 rounded-md text-base-600 dark:text-base-400 hover:bg-base-100 dark:hover:bg-base-800 transition-colors"
14+
aria-label="Toggle sidebar">
1215
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
13-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
16+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
17+
d="M4 6h16M4 12h16M4 18h16"></path>
1418
</svg>
1519
</button>
1620
}
1721

1822
<!-- Logo and Title -->
1923
<a href="/" class="flex items-center space-x-2">
20-
<svg xmlns="http://www.w3.org/2000/svg" id="logo" class="w-auto mr-3 h-10 hidden md:block fill-primary-700 dark:fill-primary-500/90" viewBox="0 0 1270.000000 1270.000000" preserveAspectRatio="xMidYMid meet">
24+
<svg xmlns="http://www.w3.org/2000/svg" id="logo"
25+
class="w-auto mr-3 h-10 hidden md:block fill-primary-700 dark:fill-primary-500/90"
26+
viewBox="0 0 1270.000000 1270.000000" preserveAspectRatio="xMidYMid meet">
2127
<g transform="translate(0.000000,1270.000000) scale(0.100000,-0.100000)">
2228
<path d="M799 10610 c-199 -48 -354 -191 -414 -383 l-25 -78 0 -3084 0 -3084
2329
25 -79 c45 -141 155 -270 289 -335 124 -61 -80 -57 2819 -57 l2646 0 5 -43 c3
@@ -78,95 +84,141 @@
7884
</g>
7985
</svg>
8086

81-
<span class="text-xl lg:text-2xl font-bold bg-gradient-to-r from-primary-600 to-tertiary-one-600 dark:from-primary-400 dark:to-tertiary-one-400 bg-clip-text text-transparent">
87+
<span
88+
class="text-xl lg:text-2xl font-bold bg-gradient-to-r from-primary-600 to-tertiary-one-600 dark:from-primary-400 dark:to-tertiary-one-400 bg-clip-text text-transparent">
8289
Spectre.Console
8390
</span>
8491
</a>
8592
</div>
8693

8794
<!-- Navigation -->
8895
<nav class="hidden md:flex items-center space-x-1 text-xs lg:text-sm font-medium">
89-
<a href="/" class="px-2 lg:px-3 py-2 rounded-md @(CurrentSection == "" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
96+
<a href="/"
97+
class="px-2 lg:px-3 py-2 rounded-md @(CurrentSection == "" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
9098
Home
9199
</a>
92-
<a href="/console" class="px-2 lg:px-3 py-2 rounded-md @(CurrentSection == "Console" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
100+
<a href="/console"
101+
class="px-2 lg:px-3 py-2 rounded-md @(CurrentSection == "Console" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
93102
Console
94103
</a>
95-
<a href="/cli" class="px-2 lg:px-3 py-2 rounded-md @(CurrentSection == "Cli" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
104+
<a href="/cli"
105+
class="px-2 lg:px-3 py-2 rounded-md @(CurrentSection == "Cli" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
96106
CLI
97107
</a>
98-
<a href="/blog" class="px-2 lg:px-3 py-2 rounded-md @(CurrentSection == "Blog" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
108+
<a href="/blog"
109+
class="px-2 lg:px-3 py-2 rounded-md @(CurrentSection == "Blog" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors duration-250">
99110
Blog
100111
</a>
101-
<a href="https://github.com/spectreconsole" class="px-2 lg:px-3 py-2 rounded-md text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800 transition-colors">
112+
<a href="https://github.com/spectreconsole"
113+
class="px-2 lg:px-3 py-2 rounded-md text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800 transition-colors">
102114
GitHub
103115
</a>
116+
<a href="https://discord.gg/DxqCxpmA2K"
117+
class="px-2 lg:px-3 py-2 rounded-md text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800 transition-colors">
118+
Discord
119+
</a>
104120
</nav>
105121

106122
<!-- Right side actions -->
107123
<div class="flex items-center space-x-4">
108124
<!-- Search Box (only show if ShowSearch is true) -->
109125
@if (ShowSearch)
110126
{
111-
<div class="relative w-8 md:w-32 lg:w-64 bg-base-100 dark:bg-base-800/50 border border-base-200 dark:border-base-700 rounded-full lg:rounded-md ">
127+
<div
128+
class="relative w-8 md:w-32 lg:w-64 bg-base-100 dark:bg-base-800/50 border border-base-200 dark:border-base-700 rounded-full lg:rounded-md ">
112129
<input
113130
id="search-input"
114131
type="text"
115132
class="transition-all text-xs lg:text-sm w-full h-8 lg:h-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:border-transparent"
116133
readonly
117134
/>
118-
<svg class="transition-all absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-base-500 dark:text-base-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
135+
<svg
136+
class="transition-all absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-base-500 dark:text-base-400 pointer-events-none"
137+
fill="none" stroke="currentColor" viewBox="0 0 24 24">
119138
<circle cx="11" cy="11" r="8"></circle>
120139
<path d="M21 21l-4.35-4.35"></path>
121140
</svg>
122-
<div class="transition-all text-xs md:text-sm hidden md:block absolute left-10 top-1/2 transform -translate-y-1/2 text-base-600 dark:text-base-400 pointer-events-none">Search</div>
141+
<div
142+
class="transition-all text-xs md:text-sm hidden md:block absolute left-10 top-1/2 transform -translate-y-1/2 text-base-600 dark:text-base-400 pointer-events-none">
143+
Search
144+
</div>
123145
</div>
124146
}
125147

126148
<!-- Theme toggle button -->
127-
<button data-theme-toggle class="p-2 rounded-md text-base-600 dark:text-base-400 hover:bg-base-100 dark:hover:bg-base-800 transition-colors" aria-label="Toggle theme">
149+
<button data-theme-toggle
150+
class="p-2 rounded-md text-base-600 dark:text-base-400 hover:bg-base-100 dark:hover:bg-base-800 transition-colors"
151+
aria-label="Toggle theme">
128152
<svg class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
129-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
153+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
154+
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
130155
</svg>
131156
<svg class="w-5 h-5 block dark:hidden" stroke="currentColor" viewBox="0 0 24 24">
132-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
157+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
158+
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
133159
</svg>
134160
</button>
135161

136162
<!-- Mobile menu button -->
137-
<button id="mobile-menu-button" class="md:hidden p-2 rounded-md text-base-600 dark:text-base-400 hover:bg-base-100 dark:hover:bg-base-800 transition-colors" aria-label="Toggle menu">
163+
<button id="mobile-menu-button"
164+
class="md:hidden p-2 rounded-md text-base-600 dark:text-base-400 hover:bg-base-100 dark:hover:bg-base-800 transition-colors"
165+
aria-label="Toggle menu">
138166
<svg viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
139-
<path d="M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 6.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM9.5 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"></path>
167+
<path
168+
d="M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 6.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM9.5 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"></path>
140169
</svg>
141170
</button>
142171
</div>
143172
</div>
144173
</div>
145174

146175
<!-- Mobile Navigation -->
147-
<nav id="mobile-menu" data-expanded="false" class="md:hidden data-[expanded=false]:hidden bg-base-100 dark:bg-base-950 border-b border-base-200 dark:border-base-800 shadow-md">
176+
<nav id="mobile-menu" data-expanded="false"
177+
class="md:hidden data-[expanded=false]:hidden bg-base-100 dark:bg-base-950 border-b border-base-200 dark:border-base-800 shadow-md">
148178
<div class="px-2 pt-2 pb-3 space-y-1">
149-
<a href="/" class="block px-3 py-2 rounded-md text-base font-medium @(CurrentSection == "" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors">
179+
<a href="/"
180+
class="block px-3 py-2 rounded-md text-base font-medium @(CurrentSection == "" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors">
150181
Home
151182
</a>
152-
<a href="/console" class="block px-3 py-2 rounded-md text-base font-medium @(CurrentSection == "Console" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors">
183+
<a href="/console"
184+
class="block px-3 py-2 rounded-md text-base font-medium @(CurrentSection == "Console" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors">
153185
Console
154186
</a>
155-
<a href="/cli" class="block px-3 py-2 rounded-md text-base font-medium @(CurrentSection == "Cli" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors">
187+
<a href="/cli"
188+
class="block px-3 py-2 rounded-md text-base font-medium @(CurrentSection == "Cli" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors">
156189
CLI
157190
</a>
158-
<a href="/blog" class="block px-3 py-2 rounded-md text-base font-medium @(CurrentSection == "Blog" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors">
191+
<a href="/blog"
192+
class="block px-3 py-2 rounded-md text-base font-medium @(CurrentSection == "Blog" ? "bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100" : "text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800") transition-colors">
159193
Blog
160194
</a>
195+
<div class="border-t-1 border-base-200 dark:border-base-800">
196+
<a href="https://github.com/spectreconsole"
197+
class="block px-3 py-2 rounded-md text-base font-medium text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800 transition-colors">
198+
GitHub
199+
</a>
200+
<a href="https://discord.gg/DxqCxpmA2K"
201+
class="block px-3 py-2 rounded-md text-base font-medium text-base-600 dark:text-base-400 hover:text-base-900 dark:hover:text-base-100 hover:bg-base-100 dark:hover:bg-base-800 transition-colors">
202+
Discord
203+
</a>
204+
</div>
161205
</div>
162206
</nav>
163207
</header>
164208

165209
@code {
166-
[Parameter] public string CurrentSection { get; set; } = "";
167-
[Parameter] public bool HasTableOfContents { get; set; }
168-
[Parameter] public bool ShowSidebarToggle { get; set; } = true;
169-
[Parameter] public bool ShowSearch { get; set; } = true;
210+
211+
[Parameter]
212+
public string CurrentSection { get; set; } = "";
213+
214+
[Parameter]
215+
public bool HasTableOfContents { get; set; }
216+
217+
[Parameter]
218+
public bool ShowSidebarToggle { get; set; } = true;
219+
220+
[Parameter]
221+
public bool ShowSearch { get; set; } = true;
170222

171223
protected override async Task OnInitializedAsync()
172224
{
@@ -195,4 +247,5 @@
195247

196248
await base.OnInitializedAsync();
197249
}
250+
198251
}

0 commit comments

Comments
 (0)