kira
/
exciting-aftermath
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Sidebar isn't toggling, but accidentally started moving into PokemonRate. Merging and switching.

This commit is contained in:
Kira Jiroux 2025-04-02 11:02:44 -04:00
parent 3aad300f33
commit 6c8119d83c
3 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
Portfolio.WebUI.Server/Components/Layout/Sidebar.razor
View File

@ -1,10 +1,12 @@
<div class="d-flex flex-column flex-shrink-0 p-3 bg-info vh-100" style="width: 280px; ">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-primary text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-through-heart" viewBox="0 0 16 16">
@inject IJSRuntime JS
<div class="d-flex flex-column flex-shrink-0 p-3 bg-info vh-100 sidebar @(isSidebarOpen ? "open" : "closed") " style="transition: width 0.3s;">
<div class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-primary text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-through-heart" viewBox="0 0 16 16" @onclick="ToggleSidebar" style="cursor: pointer;">
<path fill-rule="evenodd" d="M2.854 15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0 1-.354-.854l1.5-1.5A.5.5 0 0 1 2 11.5h1.793l.53-.53c-.771-.802-1.328-1.58-1.704-2.32-.798-1.575-.775-2.996-.213-4.092C3.426 2.565 6.18 1.809 8 3.233c1.25-.98 2.944-.928 4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5 0h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.854.354L14 2.707l-1.006 1.006c.236.248.44.531.6.845.562 1.096.585 2.517-.213 4.092-.793 1.563-2.395 3.288-5.105 5.08L8 13.912l-.276-.182a22 22 0 0 1-2.685-2.062l-.539.54V14a.5.5 0 0 1-.146.354zm2.893-4.894A20.4 20.4 0 0 0 8 12.71c2.456-1.666 3.827-3.207 4.489-4.512.679-1.34.607-2.42.215-3.185-.817-1.595-3.087-2.054-4.346-.761L8 4.62l-.358-.368c-1.259-1.293-3.53-.834-4.346.761-.392.766-.464 1.845.215 3.185.323.636.815 1.33 1.519 2.065l1.866-1.867a.5.5 0 1 1 .708.708z" />
</svg>
<span class="fs-4 mx-2">Kira Jiroux</span>
</a>
</div>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
@ -44,3 +46,15 @@
</div>
</div>
@code {
private bool isSidebarOpen = true;
private async void ToggleSidebar()
{
isSidebarOpen = !isSidebarOpen;
await JS.InvokeVoidAsync("console.log", $"Sidebar toggled: {isSidebarOpen}");
StateHasChanged(); // Force the UI to update
}
}

9
Portfolio.WebUI.Server/Components/Layout/Sidebar.razor.css Normal file
View File

@ -0,0 +1,9 @@
.sidebar.closed {
width: 0;
overflow: hidden;
padding: 0;
}
.sidebar.open {
width: 256px;
}

8
Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor
View File

@ -18,7 +18,7 @@
}
else
{
<div class="w-75 mt-3 m-auto rate-container">
<div class="w-75 mt-5 m-auto rate-container bg-info">
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
<div class="row">
@ -64,11 +64,11 @@ else
<!-- Section 2: Pokemon Rating -->
@if (SelectedPokemon != null)
{
<div class="border rounded p-3 row">
<div class="d-flex align-top col">
<div class="row">
<div class="d-flex align-top col mb-3">
<!-- Pokemon Interface -->
<div class="m-3 p-1 col-5">
<div class=" px-4 col-5 bg-white border rounded">
<!-- Image and other Pokemon info -->
<div class="flip-container" @onclick="() => ToggleImage(SelectedPokemon.Id)">
<div class="flipper @(isShiny[SelectedPokemon.Id] ? "flipped" : "")">