Skip to content

Commit

Permalink
Add icons and bottom nav bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@dennisreimann
dennisreimann committed Apr 16, 2024
1 parent 336d021 commit 54ad386
Show file tree
Hide file tree
Showing 8 changed files with 432 additions and 406 deletions.
31 changes: 31 additions & 0 deletions BTCPayApp.UI/Components/Layout/NavbarBottom.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
@using BTCPayApp.UI.Features
@inject IState<UIState> UiState

<nav id="NavbarBottom" class="navbar fixed-bottom bg-tile d-flex flex-column justify-content-between">
<ul class="navbar-nav">
<li class="nav-item">
<NavLink class="nav-link" href="@Routes.Dashboard" Match="NavLinkMatch.All">
<Icon symbol="nav-store"/>
<span>Dashboard</span>
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="@Routes.WalletSetup" Match="NavLinkMatch.All">
<Icon symbol="wallet-existing"/>
<span>Wallet</span>
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="@Routes.PointOfSale" Match="NavLinkMatch.All">
<Icon symbol="nav-keypad"/>
<span>Keypad</span>
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="@Routes.Settings" Match="NavLinkMatch.All">
<Icon symbol="nav-settings"/>
<span>Settings</span>
</NavLink>
</li>
</ul>
</nav>
39 changes: 39 additions & 0 deletions BTCPayApp.UI/Components/Layout/NavbarBottom.razor.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.navbar {
padding: 0;
}

.navbar-nav {
margin: 0 auto;
flex-direction: row;
}

.nav-item {
flex: 1;
}

::deep .nav-link {
--icon-size: 1.5rem;

display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
gap: var(--btcpay-space-xs);
padding: var(--btcpay-space-xs) var(--btcpay-space-m);
text-align: center;
color: var(--btcpay-body-text-muted);
}

::deep .nav-link span {
font-size: var(--btcpay-font-size-xs);
}

::deep .nav-link .icon {
width: var(--icon-size);
height: var(--icon-size);
}

::deep .nav-link:hover,
::deep .nav-link.active {
color: var(--btcpay-body-text);
}
63 changes: 63 additions & 0 deletions BTCPayApp.UI/Components/Layout/NavbarTop.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
@using BTCPayApp.UI.Features
@inject IState<UIState> UiState

<header id="NavbarTop" class="btcpay-header d-flex flex-column">
<div id="NavbarTopHead">
<button id="NavbarTopToggle" class="mainMenuButton" type="button" data-bs-toggle="offcanvas" data-bs-target="#MainNav" aria-controls="MainNav" aria-expanded="false" aria-label="Toggle navigation">
<span>Menu</span>
</button>
<NavLink class="navbar-brand py-2" href="@Routes.Dashboard" Match="NavLinkMatch.All">
@if (!string.IsNullOrEmpty(UiState.Value.LogoUrl))
{
<img src="@UiState.Value.LogoUrl" alt="@(UiState.Value.ServerName ?? "BTCPay Server")" class="main-logo main-logo-custom " />
}
else
{
<svg xmlns="http://www.w3.org/2000/svg" role="img" alt="BTCPay Server" class="main-logo main-logo-btcpay">
<use href="_content/BTCPayApp.UI/img/logo.svg#small" class="main-logo-btcpay--small"/>
<use href="_content/BTCPayApp.UI/img/logo.svg#large" class="main-logo-btcpay--large"/>
</svg>
}
</NavLink>
</div>
<nav id="NavbarTopNav" class="d-flex flex-column justify-content-between">
<div class="accordion px-3 px-lg-4">
<div class="accordion-item">
<div class="accordion-body">
<ul class="navbar-nav">
<li class="nav-item">
<NavLink class="nav-link" href="@Routes.Dashboard" Match="NavLinkMatch.All">
<Icon symbol="nav-store"/>
<span>Dashboard</span>
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="@Routes.WalletSetup" Match="NavLinkMatch.All">
<Icon symbol="wallet-existing"/>
<span>Wallet</span>
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="@Routes.PointOfSale" Match="NavLinkMatch.All">
<Icon symbol="nav-pointofsale"/>
<span>Point Of Sale</span>
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="@Routes.Settings" Match="NavLinkMatch.All">
<Icon symbol="nav-settings"/>
<span>Settings</span>
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="@Routes.Logout" Match="NavLinkMatch.All">
<Icon symbol="actions-remove"/>
<span>Logout</span>
</NavLink>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
237 changes: 237 additions & 0 deletions BTCPayApp.UI/Components/Layout/NavbarTop.razor.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,237 @@
#NavbarTop {
--button-width: 40px;
--button-height: 40px;
--button-padding: 7px;
--icon-size: 1.5rem;
--menu-border: 1px solid var(--btcpay-body-border-light);
height: var(--header-height);
z-index: 1031; /* needs a value between fixed and the offcanvas backdrop, see https://getbootstrap.com/docs/5.1/layout/z-index/ */
}

#NavbarTopHead {
display: flex;
align-items: center;
padding: var(--btcpay-space-s) var(--btcpay-space-m);
}

#NavbarTopHead .mainMenuButton {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--button-width);
height: var(--button-height);
padding: var(--button-padding);
background: transparent;
border: none;
cursor: pointer;
outline: none;
color: var(--btcpay-body-text-muted);
}

#NavbarTopNav {
--btcpay-scrollbar-color: var(--btcpay-neutral-400);
height: calc(100vh - var(--mobile-header-height));
overflow-y: auto;
padding-top: var(--btcpay-space-m);
}

#NavbarTopNav .accordion-button {
padding: var(--btcpay-space-s) 0;
text-transform: uppercase;
color: var(--btcpay-body-text-muted);
font-weight: var(--btcpay-font-weight-semibold);
}

#NavbarTopNav .accordion-item {
border: none !important;
}

#NavbarTopNav .navbar-nav > li.nav-item .nav-link {
display: inline-flex;
align-items: center;
font-weight: var(--btcpay-font-weight-semibold);
color: var(--btcpay-header-link);
transition-property: color;
transition-duration: var(--btcpay-transition-duration-fast);
}

#NavbarTopNav .navbar-nav > li.nav-item .nav-link .icon {
flex-shrink: 0;
}

#NavbarTopNav .navbar-nav > li.nav-item-sub {
padding-left:calc(1.5rem + var(--btcpay-space-xs))
}

#NavbarTopNav .navbar-nav > li.nav-item .nav-link span {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#NavbarTopNav .navbar-nav > li.nav-item .nav-link:focus,
#NavbarTopNav .navbar-nav > li.nav-item .nav-link:hover {
color: var(--btcpay-header-link-accent);
}

#NavbarTopNav .navbar-nav > li.nav-item .nav-link.active,
#NavbarTopNav .navbar-nav > li.nav-item .nav-link.active:focus,
#NavbarTopNav .navbar-nav > li.nav-item .nav-link.active:hover {
color: var(--btcpay-header-link-active);
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
color: inherit;
}

.btcpay-header {
color: var(--btcpay-header-text);
background: var(--btcpay-header-bg);
}

::deep .nav-item svg.icon {
width: var(--icon-size);
height: var(--icon-size);
margin-right: var(--btcpay-space-xs);
}

/* Logo */
#NavbarTopHead .main-logo {
display: inline-block;
height: 2rem;
}

@media (max-width: 575px) {
#NavbarTopHead .main-logo-custom {
max-width: 25vw;
}

#NavbarTopHead .main-logo-btcpay {
width: 1.125rem;
}

#NavbarTopHead .main-logo-btcpay .main-logo-btcpay--large {
display: none;
}
}

@media (min-width: 576px) {
#NavbarTopHead .main-logo-custom {
max-width: 10.5rem;
}

#NavbarTopHead .main-logo-btcpay {
width: 4.625rem;
}

#NavbarTopHead .main-logo-btcpay .main-logo-btcpay--small {
display: none;
}
}

@media (max-width: 991px) {
#NavbarTop {
--header-height: var(--mobile-header-height);

position: fixed;
top: 0;
left: 0;
right: 0;
border-bottom: var(--menu-border);
}

#NavbarTopNav {
position: fixed;
top: var(--mobile-header-height);
bottom: 0;
left: 0;
width: var(--sidebar-width);
z-index: 1045;
border-right: var(--menu-border);
color: var(--btcpay-body-text);
background-color: inherit;
background-clip: padding-box;
outline: 0;
transform: translateX(-100%);
transition: transform var(--btcpay-transition-duration-fast) ease-in-out;
/* Fixes https://github.com/btcpayserver/btcpayserver/issues/3807 */
height: calc(100vh - var(--mobile-header-height)); /* This line is a fallback for browsers which don't support "fill-available" */
height: -moz-available;
height: -webkit-fill-available;
height: fill-available;
/* Since we can't do "calc(fill-available - var(--mobile-header-height));" I'm using "padding-bottom" instead */
padding-bottom: var(--mobile-header-height);
/* END FIX */
}

#NavbarTopNav.show {
transform: none;
}
#NavbarTopToggle {
--line-thickness: 2px;
--transition-easing: ease-in-out;
--transition-duration: var(--btcpay-transition-duration-fast);

flex: 0 0 var(--button-width);
margin-right: var(--btcpay-space-s);
margin-left: calc(var(--button-padding) * -1);
}

#NavbarTopToggle span {
position: relative;
display: inline-block;
width: calc(var(--button-width) - var(--button-padding) * 2);
height: calc(var(--button-height) - (var(--button-padding) * 2) - (var(--line-thickness) * 4));
border-top: var(--line-thickness) solid;
border-bottom: var(--line-thickness) solid;
color: var(--btcpay-body-text-muted);
font-size: 0;
transition: all var(--transition-duration) var(--transition-easing);
}

#NavbarTopToggle span:before,
#NavbarTopToggle span:after {
position: absolute;
display: block;
content: '';
width: 100%;
height: var(--line-thickness);
top: 50%;
left: 50%;
background: currentColor;
transform: translate(-50%, -50%);
transition: transform var(--transition-duration) var(--transition-easing);
}

#NavbarTopToggle:hover span {
color: var(--btcpay-header-text);
}

#NavbarTopToggle[aria-expanded="true"] span {
border-color: transparent;
}

#NavbarTopToggle[aria-expanded="true"] span:before {
transform: translate(-50%, -50%) rotate(45deg);
}

#NavbarTopToggle[aria-expanded="true"] span:after {
transform: translate(-50%, -50%) rotate(-45deg);
}

::deep .offcanvas-backdrop {
top: var(--mobile-header-height);
transition-duration: var(--btcpay-transition-duration-fast);
}

}

@media (min-width: 992px) {
#NavbarTopToggle {
display: none;
}
}
Loading

0 comments on commit 54ad386

Please sign in to comment.