Adam
/
FruitBankHybridApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign sidebar navigation for wide screens, new icons 

Refactored sidebar to support collapse/expand on wide screens (≥1600px) via a hamburger menu. Updated CSS for transitions, icon resizing, and improved layout. Replaced navigation icons with new SVGs and added corresponding CSS variables/classes. Enhanced NavMenu.razor with tooltips and admin group labeling. Sidebar toggler now defaults to expanded. Improved UI with sticky sidebar and visible toggler. In GridShippingDocument, disabled "Ai process..." button when window is open and made window resizable. Improves navigation clarity and accessibility.
This commit is contained in:
Loretta 2025-12-24 10:07:51 +01:00
parent 7efc649d0b
commit cd954a1dd3
11 changed files with 165 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
FruitBankHybrid.Shared/Components/GridShippingDocument.razor
View File

@ -106,7 +106,7 @@
</Template>
</DxToolbarItem>
*@
<DxToolbarItem BeginGroup="true" Text="Ai process..." IconCssClass="grid-ai" Click="Callback">
<DxToolbarItem BeginGroup="true" Text="Ai process..." IconCssClass="grid-ai" Click="Callback" Enabled="@(!windowVisible)">
</DxToolbarItem>
</ToolbarItemsExtended>
@ -132,7 +132,7 @@
</MgGridWithInfoPanel>
<DxWindow @ref=windowRef
AllowResize="false"
AllowResize="true"
ShowCloseButton="true"
CloseOnEscape="true"
ShowHeader="true"

14
FruitBankHybrid.Shared/Layout/MainLayout.razor.css
View File

@ -46,7 +46,7 @@ main {
}
}
@media (min-width: 2641px) {
@media (min-width: 1600px) {
.page {
flex-direction: row;
}
@ -56,6 +56,18 @@ main {
height: 100vh;
position: sticky;
top: 0;
transition: width 0.3s ease;
}
/* When checkbox is unchecked, collapse sidebar */
.sidebar:has(.navbar-toggler:not(:checked)) {
width: 60px;
}
/* Set icon size to 30px when sidebar is collapsed */
.sidebar:has(.navbar-toggler:not(:checked)) ::deep .icon {
width: 30px !important;
height: 30px !important;
}
.top-row {

36
FruitBankHybrid.Shared/Layout/NavMenu.razor
View File

@ -2,6 +2,8 @@
@using FruitBank.Common.Models
@inject LoggedInModel LoggedInModel
<input type="checkbox" title="Navigation menu" class="navbar-toggler" checked />
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
@if (LoggedInModel.IsLoggedIn)
@ -15,48 +17,50 @@
</div>
</div>
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
<div class="nav-scrollable" onclick="if (window.innerWidth < 1600) document.querySelector('.navbar-toggler').click()">
<nav class="flex-column">
@if (LoggedInModel.IsLoggedIn)// || AcDomain.IsDeveloperVersion)
{
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All" title="Kezdőlap">
<span class="icon home-icon" aria-hidden="true"></span> Kezdőlap
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="MeasuringIn">
<span class="icon counter-icon" aria-hidden="true"></span> Áru bevételezés
<NavLink class="nav-link" href="MeasuringIn" title="Áru bevételezés">
<span class="icon measuring-in-icon" aria-hidden="true"></span> Áru bevételezés
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="MeasuringOut">
<span class="icon counter-icon" aria-hidden="true"></span> Áru kiadás
<NavLink class="nav-link" href="MeasuringOut" title="Áru kiadás">
<span class="icon measuring-out-icon" aria-hidden="true"></span> Áru kiadás
</NavLink>
</div>
@if (LoggedInModel.IsDeveloper)
{
<div class="nav-item px-3">
<NavLink class="nav-link" href="StockTaking">
<span class="icon counter-icon" aria-hidden="true"></span> Leltározás
<NavLink class="nav-link" href="StockTaking" title="Leltározás">
<span class="icon stock-taking-icon" aria-hidden="true"></span> Leltározás
</NavLink>
</div>
}
@if (LoggedInModel.IsAdministrator)
{
<hr class="nav-divider" />
<div class="nav-group-title px-3">
<span class="nav-group-label">Adminisztrátor</span>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="OrdersAdmin">
<span class="icon counter-icon" aria-hidden="true"></span> Rendelések - Adminisztrátor
<NavLink class="nav-link" href="OrdersAdmin" title="Rendelések">
<span class="icon orders-icon" aria-hidden="true"></span> Rendelések
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="ShippingsAdmin">
<span class="icon counter-icon" aria-hidden="true"></span> Szállítmányok - Adminisztrátor
<NavLink class="nav-link" href="ShippingsAdmin" title="Szállítmányok">
<span class="icon shippings-icon" aria-hidden="true"></span> Szállítmányok
</NavLink>
</div>
}
@ -64,8 +68,8 @@
else
{
<div class="nav-item px-3">
<NavLink class="nav-link" href="Login">
<span class="icon weather-icon" aria-hidden="true"></span> Bejelentkezés
<NavLink class="nav-link" href="Login" title="Bejelentkezés">
<span class="icon login-icon" aria-hidden="true"></span> Bejelentkezés
</NavLink>
</div>
}

104
FruitBankHybrid.Shared/Layout/NavMenu.razor.css
View File

@ -7,6 +7,7 @@
position: absolute;
top: 0.5rem;
right: 1rem;
z-index: 10;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.3rem;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
@ -34,12 +35,28 @@
--icon-mask-image: var(--icon-home-mask-image);
}
::deep .weather-icon {
--icon-mask-image: var(--icon-weather-mask-image);
::deep .measuring-in-icon {
--icon-mask-image: var(--icon-measuring-in-mask-image);
}
::deep .counter-icon {
--icon-mask-image: var(--icon-counter-mask-image);
::deep .measuring-out-icon {
--icon-mask-image: var(--icon-measuring-out-mask-image);
}
::deep .stock-taking-icon {
--icon-mask-image: var(--icon-stock-taking-mask-image);
}
::deep .orders-icon {
--icon-mask-image: var(--icon-orders-mask-image);
}
::deep .shippings-icon {
--icon-mask-image: var(--icon-shippings-mask-image);
}
::deep .login-icon {
--icon-mask-image: var(--icon-login-mask-image);
}
.nav-item {
@ -77,6 +94,25 @@
color: white;
}
.nav-divider {
border: 0;
border-top: 1px solid rgba(255,255,255,0.2);
margin: 0.5rem 1rem;
}
.nav-group-title {
padding-top: 0.5rem;
padding-bottom: 0.25rem;
}
.nav-group-label {
color: rgba(255,255,255,0.6);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.nav-scrollable {
display: none;
}
@ -85,11 +121,35 @@
display: block;
}
@media (min-width: 2641px) {
@media (min-width: 1600px) {
.navbar-toggler {
/* Show toggler for collapsing sidebar */
display: block;
right: 1rem;
left: auto;
transform: none;
}
/* Position hamburger menu with padding when sidebar is collapsed */
.navbar-toggler:not(:checked) {
left: 5px;
top: 5px;
right: auto;
transform: none;
width: 50px;
height: 50px;
}
/* Hide brand text when sidebar is collapsed */
.navbar-toggler:not(:checked) ~ .top-row .navbar-brand {
display: none;
}
/* Adjust top-row height when sidebar is collapsed */
.navbar-toggler:not(:checked) ~ .top-row {
height: 60px;
}
.nav-scrollable {
/* Never collapse the sidebar for wide screens */
display: block;
@ -98,4 +158,38 @@
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
/* Adjust nav-scrollable height when sidebar is collapsed */
.navbar-toggler:not(:checked) ~ .nav-scrollable {
height: calc(100vh - 60px);
}
/* Hide nav item text when sidebar is collapsed */
.navbar-toggler:not(:checked) ~ .nav-scrollable .nav-item {
padding: 5px !important;
}
.navbar-toggler:not(:checked) ~ .nav-scrollable .nav-item ::deep .nav-link {
justify-content: center;
align-items: center;
font-size: 0;
padding: 0 !important;
margin: 0;
width: 50px;
height: 50px;
line-height: 1;
}
.navbar-toggler:not(:checked) ~ .nav-scrollable .nav-item ::deep .icon {
margin: 0;
width: 30px !important;
height: 30px !important;
flex-shrink: 0;
}
/* Hide divider and group title when sidebar is collapsed */
.navbar-toggler:not(:checked) ~ .nav-scrollable .nav-divider,
.navbar-toggler:not(:checked) ~ .nav-scrollable .nav-group-title {
display: none;
}
}

6
FruitBankHybrid.Shared/wwwroot/app.css
View File

@ -58,6 +58,12 @@ h1:focus {
--icon-weather-mask-image: url("images/weather-fluent.svg");
--icon-counter-mask-image: url("images/counter-fluent.svg");
--icon-ok_green-mask-image: url("images/ok_green_lt.svg");
--icon-measuring-in-mask-image: url("images/measuring-in-fluent.svg");
--icon-measuring-out-mask-image: url("images/measuring-out-fluent.svg");
--icon-stock-taking-mask-image: url("images/stock-taking-fluent.svg");
--icon-orders-mask-image: url("images/orders-fluent.svg");
--icon-shippings-mask-image: url("images/shippings-fluent.svg");
--icon-login-mask-image: url("images/login-fluent.svg");
}
.icon {

4
FruitBankHybrid.Shared/wwwroot/images/login-fluent.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 3C8.067 3 6.5 4.567 6.5 6.5C6.5 8.433 8.067 10 10 10C11.933 10 13.5 8.433 13.5 6.5C13.5 4.567 11.933 3 10 3ZM7.5 6.5C7.5 5.11929 8.61929 4 10 4C11.3807 4 12.5 5.11929 12.5 6.5C12.5 7.88071 11.3807 9 10 9C8.61929 9 7.5 7.88071 7.5 6.5Z" fill="black"/>
<path d="M5.5 13C4.11929 13 3 14.1193 3 15.5V16.5C3 16.7761 3.22386 17 3.5 17C3.77614 17 4 16.7761 4 16.5V15.5C4 14.6716 4.67157 14 5.5 14H14.5C15.3284 14 16 14.6716 16 15.5V16.5C16 16.7761 16.2239 17 16.5 17C16.7761 17 17 16.7761 17 16.5V15.5C17 14.1193 15.8807 13 14.5 13H5.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 662 B

4
FruitBankHybrid.Shared/wwwroot/images/measuring-in-fluent.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 3C3.89543 3 3 3.89543 3 5V15C3 16.1046 3.89543 17 5 17H15C16.1046 17 17 16.1046 17 15V5C17 3.89543 16.1046 3 15 3H5ZM4 5C4 4.44772 4.44772 4 5 4H15C15.5523 4 16 4.44772 16 5V15C16 15.5523 15.5523 16 15 16H5C4.44772 16 4 15.5523 4 15V5Z" fill="black"/>
<path d="M10 6C10.2761 6 10.5 6.22386 10.5 6.5V11.2929L11.6464 10.1464C11.8417 9.95118 12.1583 9.95118 12.3536 10.1464C12.5488 10.3417 12.5488 10.6583 12.3536 10.8536L10.3536 12.8536C10.1583 13.0488 9.84171 13.0488 9.64645 12.8536L7.64645 10.8536C7.45118 10.6583 7.45118 10.3417 7.64645 10.1464C7.84171 9.95118 8.15829 9.95118 8.35355 10.1464L9.5 11.2929V6.5C9.5 6.22386 9.72386 6 10 6Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 770 B

4
FruitBankHybrid.Shared/wwwroot/images/measuring-out-fluent.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 3C3.89543 3 3 3.89543 3 5V15C3 16.1046 3.89543 17 5 17H15C16.1046 17 17 16.1046 17 15V5C17 3.89543 16.1046 3 15 3H5ZM4 5C4 4.44772 4.44772 4 5 4H15C15.5523 4 16 4.44772 16 5V15C16 15.5523 15.5523 16 15 16H5C4.44772 16 4 15.5523 4 15V5Z" fill="black"/>
<path d="M10 14C9.72386 14 9.5 13.7761 9.5 13.5V8.70711L8.35355 9.85355C8.15829 10.0488 7.84171 10.0488 7.64645 9.85355C7.45118 9.65829 7.45118 9.34171 7.64645 9.14645L9.64645 7.14645C9.84171 6.95118 10.1583 6.95118 10.3536 7.14645L12.3536 9.14645C12.5488 9.34171 12.5488 9.65829 12.3536 9.85355C12.1583 10.0488 11.8417 10.0488 11.6464 9.85355L10.5 8.70711V13.5C10.5 13.7761 10.2761 14 10 14Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 776 B

6
FruitBankHybrid.Shared/wwwroot/images/orders-fluent.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 3C4.67157 3 4 3.67157 4 4.5V15.5C4 16.3284 4.67157 17 5.5 17H14.5C15.3284 17 16 16.3284 16 15.5V4.5C16 3.67157 15.3284 3 14.5 3H5.5ZM5 4.5C5 4.22386 5.22386 4 5.5 4H14.5C14.7761 4 15 4.22386 15 4.5V15.5C15 15.7761 14.7761 16 14.5 16H5.5C5.22386 16 5 15.7761 5 15.5V4.5Z" fill="black"/>
<path d="M7 6.5C7 6.22386 7.22386 6 7.5 6H12.5C12.7761 6 13 6.22386 13 6.5C13 6.77614 12.7761 7 12.5 7H7.5C7.22386 7 7 6.77614 7 6.5Z" fill="black"/>
<path d="M7 9.5C7 9.22386 7.22386 9 7.5 9H12.5C12.7761 9 13 9.22386 13 9.5C13 9.77614 12.7761 10 12.5 10H7.5C7.22386 10 7 9.77614 7 9.5Z" fill="black"/>
<path d="M7.5 12C7.22386 12 7 12.2239 7 12.5C7 12.7761 7.22386 13 7.5 13H10.5C10.7761 13 11 12.7761 11 12.5C11 12.2239 10.7761 12 10.5 12H7.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 865 B

3
FruitBankHybrid.Shared/wwwroot/images/shippings-fluent.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 5C3 4.44772 3.44772 4 4 4H11C11.5523 4 12 4.44772 12 5V6H14.5858L16.7071 8.12132C16.8946 8.30886 17 8.56321 17 8.82843V12.5C17 13.0523 16.5523 13.5 16 13.5H15.4649C15.2122 14.4049 14.3784 15 13.5 15C12.6216 15 11.7878 14.4049 11.5351 13.5H8.46493C8.21221 14.4049 7.37841 15 6.5 15C5.62159 15 4.78779 14.4049 4.53507 13.5H4C3.44772 13.5 3 13.0523 3 12.5V5ZM12 11H16V8.82843L14.1716 7H12V11ZM11 12H4V5H11V12ZM5.5 13.5C5.5 14.0523 5.94772 14.5 6.5 14.5C7.05228 14.5 7.5 14.0523 7.5 13.5C7.5 12.9477 7.05228 12.5 6.5 12.5C5.94772 12.5 5.5 12.9477 5.5 13.5ZM13.5 14.5C12.9477 14.5 12.5 14.0523 12.5 13.5C12.5 12.9477 12.9477 12.5 13.5 12.5C14.0523 12.5 14.5 12.9477 14.5 13.5C14.5 14.0523 14.0523 14.5 13.5 14.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 839 B

4
FruitBankHybrid.Shared/wwwroot/images/stock-taking-fluent.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 2C7.44772 2 7 2.44772 7 3V3.5C6.17157 3.5 5.5 4.17157 5.5 5V16C5.5 17.1046 6.39543 18 7.5 18H12.5C13.6046 18 14.5 17.1046 14.5 16V5C14.5 4.17157 13.8284 3.5 13 3.5V3C13 2.44772 12.5523 2 12 2H8ZM8 3.5H12V4.5H8V3.5ZM6.5 5C6.5 4.72386 6.72386 4.5 7 4.5H7.5V5C7.5 5.27614 7.72386 5.5 8 5.5H12C12.2761 5.5 12.5 5.27614 12.5 5V4.5H13C13.2761 4.5 13.5 4.72386 13.5 5V16C13.5 16.5523 13.0523 17 12.5 17H7.5C6.94772 17 6.5 16.5523 6.5 16V5Z" fill="black"/>
<path d="M11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L9.35355 11.3536C9.15829 11.5488 8.84171 11.5488 8.64645 11.3536L7.64645 10.3536C7.45118 10.1583 7.45118 9.84171 7.64645 9.64645C7.84171 9.45118 8.15829 9.45118 8.35355 9.64645L9 10.2929L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 905 B