litecharms/midrandbooks
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases 64 Wiki Activity

Working search
continuous-integration/drone/pr Build is passing
Details

Browse Source
This commit is contained in:
Khwezi Mngoma
2026-05-30 21:00:13 +02:00
parent af02cbc649
commit 01a0264452
7 changed files with 220 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MidrandBookshop/Components/Layout/MainLayout.razor
+7 -64
View File
@@ -2,8 +2,6 @@
@inject NavigationManager Navigation
<div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
@* --- CART SYSTEM SIDE PANEL BACKDROP LAYER --- *@
<div class="cart-overlay @(IsCartOpen ? "is-visible" : "")" @onclick="ToggleCart"></div>
<div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
<div class="cart-header d-flex align-items-center justify-content-between p-4 border-bottom">
@@ -77,9 +75,7 @@
}
</div>
@* --- TOP FIXED LAYOUT AREA --- *@
<div class="w-100 position-relative flex-shrink-0" style="z-index: 1020;">
@* Decorative Background SVG Watermark Line Graphic *@
<div class="position-absolute top-0 start-0 overflow-hidden d-none d-md-block" style="z-index: -1; pointer-events: none; opacity: 0.08; transform: translate(-10%, -10%);">
<svg width="480" height="480" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="98" stroke="#1A1A1A" stroke-width="0.25" stroke-dasharray="0.5 1.5" />
@@ -138,15 +134,16 @@
<input type="text"
class="form-control form-control-sm rounded-pill border-light-subtle px-3 text-dark bg-light custom-search-field"
placeholder="Search by ISBN, Author, Title..."
value="@GlobalSearchQuery"
@oninput="OnSearchInput" />
@bind="SearchInputBuffer"
@bind:event="oninput"
@onkeydown="HandleSearchKeyDown" />
</div>
<button class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center border-0 p-0 transition-smooth @(IsSearchActive ? "bg-dark text-white" : "bg-light text-dark")"
style="width: 32px; height: 32px;"
<button class="btn btn-link text-dark p-1 me-2 border-0 header-action-btn"
@onclick="ToggleGlobalSearch"
type="button">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
type="button"
aria-label="Toggle Search">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
@@ -186,7 +183,6 @@
</nav>
</div>
@* --- MAIN INDEPENDENT SCROLL LAYER --- *@
<div class="w-100 flex-grow-1 overflow-y-auto d-flex flex-column justify-content-between">
<main class="position-relative" style="z-index: 5;">
<CascadingValue Value="GlobalSearchQuery">
@@ -247,56 +243,3 @@
</div>
</div>
@code {
private string GlobalSearchQuery { get; set; } = string.Empty;
private bool IsSearchActive { get; set; } = false;
private bool IsCartOpen { get; set; } = false;
private List<CartItem> CartItems = new()
{
new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
};
private void ToggleGlobalSearch() => IsSearchActive = !IsSearchActive;
private void ToggleCart() => IsCartOpen = !IsCartOpen;
private void OnSearchInput(ChangeEventArgs e)
{
GlobalSearchQuery = e.Value?.ToString() ?? string.Empty;
}
private void ChangeQuantity(CartItem item, int delta)
{
item.Quantity += delta;
if (item.Quantity <= 0)
{
CartItems.Remove(item);
}
}
private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
private int GetCartTotal() => CartItems.Sum(item => item.Price * item.Quantity);
private void RedirectToCart()
{
IsCartOpen = false;
Navigation.NavigateTo("/cart");
}
private void RedirectToCheckout()
{
IsCartOpen = false;
Navigation.NavigateTo("/checkout");
}
public class CartItem
{
public int Id { get; set; }
public string Title { get; set; } = string.Empty;
public string Author { get; set; } = string.Empty;
public int Price { get; set; }
public int Quantity { get; set; }
}
}