Refine navigation bar

Closes #2.
btcpayserver · Apr 25, 2024 · 74bc1a5 · 74bc1a5
1 parent 3958b41
commit 74bc1a5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/BTCPayApp.UI/Components/Layout/NavbarBottom.razor b/BTCPayApp.UI/Components/Layout/NavbarBottom.razor
@@ -1,18 +1,12 @@
 @using BTCPayApp.UI.Features
 @inject IState<UIState> UiState
 
-<nav id="NavbarBottom" class="navbar">
+<nav id="NavbarBottom" class="container d-flex align-items-center 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.Invoices" Match="NavLinkMatch.Prefix">
-                <Icon symbol="nav-invoices"/>
-                <span>Invoices</span>
+                <span>Home</span>
             </NavLink>
         </li>
         <li class="nav-item">
@@ -21,6 +15,12 @@
                 <span>Keypad</span>
             </NavLink>
         </li>
+        <li class="nav-item">
+            <NavLink class="nav-link" href="@Routes.Invoices" Match="NavLinkMatch.Prefix">
+                <Icon symbol="nav-invoices"/>
+                <span>Invoices</span>
+            </NavLink>
+        </li>
         <li class="nav-item">
             <NavLink class="nav-link" href="@Routes.Settings" Match="NavLinkMatch.All">
                 <Icon symbol="settings"/>

diff --git a/BTCPayApp.UI/Components/Layout/NavbarBottom.razor.css b/BTCPayApp.UI/Components/Layout/NavbarBottom.razor.css
@@ -8,13 +8,13 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 0;
   background-color: var(--btcpay-bg-tile);
 }
 
 .navbar-nav {
   margin: 0 auto;
   flex-direction: row;
+  gap: var(--btcpay-space-m);
 }
 
 .nav-item {
@@ -35,7 +35,8 @@
 }
 
 ::deep .nav-link span {
-  font-size: var(--btcpay-font-size-xs);
+  font-size: var(--btcpay-font-size-s);
+  font-weight: var(--btcpay-font-weight-semibold);
 }
 
 ::deep .nav-link .icon {