Skip to content

Commit 7477b66

Browse files
mateofmateof
committed
feat: improve offcanvas
1 parent c6b0cf4 commit 7477b66

2 files changed

Lines changed: 186 additions & 15 deletions

File tree

‎TelegramDownloader/Shared/MainLayout.razor‎

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -123,22 +123,38 @@
123123

124124
<TelegramDownloader.Pages.Modals.AudioPlayerModal @ref="audioPlayer" />
125125

126-
<Offcanvas @ref="offcanvas"
127-
title="Menu">
126+
<Offcanvas @ref="offcanvas" title="Menu">
128127
<BodyTemplate>
129-
<div class="list-group list-group-flush">
130-
<button @onclick=' () => Navigateto("/config")' class="list-group-item list-group-item-action"><i class="bi bi-gear"></i> Configuration</button>
131-
<button @onclick=' () => Navigateto("/webdavinfo")' class="list-group-item list-group-item-action">
132-
<i class="bi bi-files-alt"></i> WebDav
133-
<span class="position-absolute top-50 start-50 translate-middle badge rounded-pill bg-danger">
134-
Beta
135-
<span class="visually-hidden">Beta function</span>
136-
</span>
137-
</button>
138-
<button @onclick=' () => Navigateto("/downloads")' class="list-group-item list-group-item-action"><i class="bi bi-cloud-download"></i> Tasks</button>
139-
<button @onclick=' () => Navigateto("/loglist")' class="list-group-item list-group-item-action"><i class="bi bi-file-earmark-text"></i> Logs</button>
140-
<a href="#" @onclick=" () => Logout()" class="list-group-item list-group-item-action list-group-item-warning"><i class="bi bi-box-arrow-right"></i> LogOut</a>
141-
</div>
128+
<div class="offcanvas-section-title">Navigation</div>
129+
130+
<button @onclick='() => NavigateAndClose("/config")' class="offcanvas-menu-item">
131+
<i class="bi bi-gear-fill"></i>
132+
<span class="menu-text">Configuration</span>
133+
</button>
134+
135+
<button @onclick='() => NavigateAndClose("/webdavinfo")' class="offcanvas-menu-item">
136+
<i class="bi bi-hdd-network-fill"></i>
137+
<span class="menu-text">WebDav</span>
138+
<span class="menu-badge">Beta</span>
139+
</button>
140+
141+
<button @onclick='() => NavigateAndClose("/downloads")' class="offcanvas-menu-item">
142+
<i class="bi bi-cloud-arrow-down-fill"></i>
143+
<span class="menu-text">Tasks</span>
144+
</button>
145+
146+
<button @onclick='() => NavigateAndClose("/loglist")' class="offcanvas-menu-item">
147+
<i class="bi bi-journal-text"></i>
148+
<span class="menu-text">Logs</span>
149+
</button>
150+
151+
<div class="offcanvas-divider"></div>
152+
<div class="offcanvas-section-title">Account</div>
153+
154+
<button @onclick="LogoutAndClose" class="offcanvas-menu-item danger">
155+
<i class="bi bi-box-arrow-right"></i>
156+
<span class="menu-text">Log Out</span>
157+
</button>
142158
</BodyTemplate>
143159
</Offcanvas>
144160
<TelegramDownloader.Pages.Modals.ImportDataModal isShared=true @ref="ImportModal" OnCloseCallback="reloadMenu"></TelegramDownloader.Pages.Modals.ImportDataModal>
@@ -355,6 +371,11 @@
355371
NavManager.NavigateTo(relativeUri);
356372
}
357373

374+
private async Task NavigateAndClose(string relativeUri)
375+
{
376+
await offcanvas.HideAsync();
377+
NavManager.NavigateTo(relativeUri);
378+
}
358379

359380
private async void Logout()
360381
{
@@ -363,6 +384,13 @@
363384
StateHasChanged();
364385
}
365386

387+
private async Task LogoutAndClose()
388+
{
389+
await offcanvas.HideAsync();
390+
await ts.logOff();
391+
NavManager.NavigateTo("/");
392+
}
393+
366394
private async Task checkWorkingTasks() {
367395
active = tis.isWorking();
368396
await InvokeAsync(StateHasChanged);

‎TelegramDownloader/Shared/MainLayout.razor.css‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,3 +165,146 @@ main {
165165
.toast-container {
166166
z-index: 200 !important;
167167
}
168+
169+
/* ===== Offcanvas Menu Styles ===== */
170+
::deep .offcanvas {
171+
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%) !important;
172+
border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
173+
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5) !important;
174+
}
175+
176+
::deep .offcanvas-header {
177+
background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 100%);
178+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
179+
padding: 1.25rem 1.5rem;
180+
}
181+
182+
::deep .offcanvas-title {
183+
color: #fff !important;
184+
font-weight: 600;
185+
font-size: 1.25rem;
186+
display: flex;
187+
align-items: center;
188+
gap: 0.5rem;
189+
}
190+
191+
::deep .offcanvas-header .btn-close {
192+
filter: invert(1);
193+
opacity: 0.7;
194+
transition: all 0.2s ease;
195+
}
196+
197+
::deep .offcanvas-header .btn-close:hover {
198+
opacity: 1;
199+
transform: rotate(90deg);
200+
}
201+
202+
::deep .offcanvas-body {
203+
padding: 0 !important;
204+
}
205+
206+
/* Menu items */
207+
::deep .offcanvas-menu-item {
208+
display: flex;
209+
align-items: center;
210+
gap: 1rem;
211+
padding: 1rem 1.5rem;
212+
color: rgba(255, 255, 255, 0.8);
213+
background: transparent;
214+
border: none;
215+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
216+
width: 100%;
217+
text-align: left;
218+
font-size: 0.95rem;
219+
cursor: pointer;
220+
transition: all 0.2s ease;
221+
position: relative;
222+
overflow: hidden;
223+
}
224+
225+
::deep .offcanvas-menu-item::before {
226+
content: '';
227+
position: absolute;
228+
left: 0;
229+
top: 0;
230+
height: 100%;
231+
width: 3px;
232+
background: #e94560;
233+
transform: scaleY(0);
234+
transition: transform 0.2s ease;
235+
}
236+
237+
::deep .offcanvas-menu-item:hover {
238+
background: rgba(255, 255, 255, 0.05);
239+
color: #fff;
240+
padding-left: 1.75rem;
241+
}
242+
243+
::deep .offcanvas-menu-item:hover::before {
244+
transform: scaleY(1);
245+
}
246+
247+
::deep .offcanvas-menu-item i {
248+
font-size: 1.25rem;
249+
width: 1.5rem;
250+
text-align: center;
251+
color: rgba(255, 255, 255, 0.5);
252+
transition: color 0.2s ease;
253+
}
254+
255+
::deep .offcanvas-menu-item:hover i {
256+
color: #e94560;
257+
}
258+
259+
::deep .offcanvas-menu-item .menu-text {
260+
flex: 1;
261+
}
262+
263+
::deep .offcanvas-menu-item .menu-badge {
264+
padding: 0.25rem 0.5rem;
265+
font-size: 0.65rem;
266+
font-weight: 600;
267+
text-transform: uppercase;
268+
letter-spacing: 0.5px;
269+
border-radius: 0.25rem;
270+
background: linear-gradient(135deg, #e94560 0%, #c73659 100%);
271+
color: #fff;
272+
}
273+
274+
::deep .offcanvas-menu-item.danger {
275+
color: rgba(255, 107, 107, 0.9);
276+
}
277+
278+
::deep .offcanvas-menu-item.danger:hover {
279+
background: rgba(255, 107, 107, 0.1);
280+
color: #ff6b6b;
281+
}
282+
283+
::deep .offcanvas-menu-item.danger::before {
284+
background: #ff6b6b;
285+
}
286+
287+
::deep .offcanvas-menu-item.danger i {
288+
color: rgba(255, 107, 107, 0.7);
289+
}
290+
291+
::deep .offcanvas-menu-item.danger:hover i {
292+
color: #ff6b6b;
293+
}
294+
295+
/* Menu section divider */
296+
::deep .offcanvas-divider {
297+
height: 1px;
298+
background: rgba(255, 255, 255, 0.1);
299+
margin: 0.5rem 0;
300+
}
301+
302+
/* Menu section title */
303+
::deep .offcanvas-section-title {
304+
padding: 1rem 1.5rem 0.5rem;
305+
font-size: 0.7rem;
306+
font-weight: 600;
307+
text-transform: uppercase;
308+
letter-spacing: 1px;
309+
color: rgba(255, 255, 255, 0.4);
310+
}

0 commit comments

Comments
 (0)