From 2fe1ab83f5e850cc49768f01323a536d069f78d2 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Thu, 16 Sep 2021 11:32:31 +0200
Subject: [PATCH] Improve offcanvas nav animation

---
 BTCPayServer/Views/Shared/_Layout.cshtml      | 118 +++++++++---------
 .../wwwroot/main/bootstrap/bootstrap.css      |  40 +++---
 BTCPayServer/wwwroot/main/site.css            |  37 ++++--
 3 files changed, 111 insertions(+), 84 deletions(-)

diff --git a/BTCPayServer/Views/Shared/_Layout.cshtml b/BTCPayServer/Views/Shared/_Layout.cshtml
index 1f44efda8..2bd171816 100644
--- a/BTCPayServer/Views/Shared/_Layout.cshtml
+++ b/BTCPayServer/Views/Shared/_Layout.cshtml
@@ -51,69 +51,71 @@
         <div class="container">
             @* Logo on Mobile *@
             @{ await Logo("d-lg-none"); }
-            <button class="navbar-toggler navbar-toggler-right border-0 shadow-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler navbar-toggler-right border-0 shadow-none p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                 <svg class="navbar-toggler-icon" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
             </button>
-            <div id="navbarResponsive" class="offcanvas offcanvas-start border-0">
-                <div class="offcanvas-header">
-                    <div class="offcanvas-title" id="offcanvasLabel">
-                        @* Logo in Offcanvas *@
-                        @{ await Logo(); }
+            <div id="navbarResponsive" class="offcanvas offcanvas-fade border-0" data-bs-scroll="true" tabindex="-1">
+                <div class="container">
+                    <div class="offcanvas-header">
+                        <div class="offcanvas-title" id="offcanvasLabel">
+                            @* Logo in Offcanvas *@
+                            @{ await Logo(); }
+                        </div>
+                        <button type="button" class="btn-close shadow-none m-0" data-bs-dismiss="offcanvas" aria-label="Close" style="padding:.8125rem;">
+                            <vc:icon symbol="close"/>
+                        </button>
                     </div>
-                    <button type="button" class="btn-close shadow-none me-1" data-bs-dismiss="offcanvas" aria-label="Close">
-                        <vc:icon symbol="close" />
-                    </button>
-                </div>
-                <div class="offcanvas-body d-lg-flex w-100 align-items-center justify-content-between">
-                    @* Logo on Desktop *@
-                    @{ await Logo("d-none d-lg-inline-block"); }
-                    @if (SignInManager.IsSignedIn(User))
-                    {
-                        <ul class="navbar-nav">
-                            @if (User.IsInRole(Roles.ServerAdmin))
-                            {
-                                <li class="nav-item"><a asp-area="" asp-controller="Server" asp-action="ListUsers" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(ServerNavPages))" id="ServerSettings">Server settings</a></li>
-                            }
-                            <li class="nav-item"><a asp-area="" asp-controller="UserStores" asp-action="ListStores" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(StoreNavPages))" id="Stores">Stores</a></li>
-                            <li class="nav-item"><a asp-area="" asp-controller="Apps" asp-action="ListApps" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(AppsNavPages))" id="Apps">Apps</a></li>
-                            <li class="nav-item"><a asp-area="" asp-controller="Wallets" asp-action="ListWallets" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(WalletsNavPages))" id="Wallets">Wallets</a></li>
-                            <li class="nav-item"><a asp-area="" asp-controller="Invoice" asp-action="ListInvoices" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(InvoiceNavPages))" id="Invoices">Invoices</a></li>
-                            <li class="nav-item"><a asp-area="" asp-controller="PaymentRequest" asp-action="GetPaymentRequests" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(PaymentRequestsNavPages))" id="PaymentRequests">Payment Requests</a></li>
-                            <vc:ui-extension-point location="header-nav"/>
-                        </ul>
-                        <ul class="navbar-nav">
-                            <li class="nav-item">
-                                <a asp-area="" asp-controller="Manage" asp-action="Index" title="My settings" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(ManageNavPages))" id="MySettings"><span class="d-lg-none d-sm-block">Account</span><i class="fa fa-user d-lg-inline-block d-none"></i></a>
-                            </li>
-                            <vc:notifications-dropdown/>
-                            @if (!theme.CustomTheme)
-                            {
+                    <div class="offcanvas-body d-lg-flex w-100 align-items-center justify-content-between">
+                        @* Logo on Desktop *@
+                        @{ await Logo("d-none d-lg-inline-block"); }
+                        @if (SignInManager.IsSignedIn(User))
+                        {
+                            <ul class="navbar-nav">
+                                @if (User.IsInRole(Roles.ServerAdmin))
+                                {
+                                    <li class="nav-item"><a asp-area="" asp-controller="Server" asp-action="ListUsers" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(ServerNavPages))" id="ServerSettings">Server settings</a></li>
+                                }
+                                <li class="nav-item"><a asp-area="" asp-controller="UserStores" asp-action="ListStores" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(StoreNavPages))" id="Stores">Stores</a></li>
+                                <li class="nav-item"><a asp-area="" asp-controller="Apps" asp-action="ListApps" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(AppsNavPages))" id="Apps">Apps</a></li>
+                                <li class="nav-item"><a asp-area="" asp-controller="Wallets" asp-action="ListWallets" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(WalletsNavPages))" id="Wallets">Wallets</a></li>
+                                <li class="nav-item"><a asp-area="" asp-controller="Invoice" asp-action="ListInvoices" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(InvoiceNavPages))" id="Invoices">Invoices</a></li>
+                                <li class="nav-item"><a asp-area="" asp-controller="PaymentRequest" asp-action="GetPaymentRequests" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(PaymentRequestsNavPages))" id="PaymentRequests">Payment Requests</a></li>
+                                <vc:ui-extension-point location="header-nav"/>
+                            </ul>
+                            <ul class="navbar-nav">
                                 <li class="nav-item">
-                                    <button class="btcpay-theme-switch nav-link">
-                                        <span class="d-lg-none d-sm-block"><span class="btcpay-theme-switch-dark">Dark theme</span><span class="btcpay-theme-switch-light">Light theme</span></span>
-                                        <svg class="d-lg-inline-block d-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
-                                            <path class="btcpay-theme-switch-dark" transform="translate(1 1)" d="M2.72 0A3.988 3.988 0 000 3.78c0 2.21 1.79 4 4 4 1.76 0 3.25-1.14 3.78-2.72-.4.13-.83.22-1.28.22-2.21 0-4-1.79-4-4 0-.45.08-.88.22-1.28z"/>
-                                            <path class="btcpay-theme-switch-light" transform="translate(1 1)" d="M4 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 0 4 0zM1.5 1c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM.5 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM1.5 6c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 7 4 7z"/>
-                                        </svg>
-                                    </button>
+                                    <a asp-area="" asp-controller="Manage" asp-action="Index" title="My settings" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(ManageNavPages))" id="MySettings"><span class="d-lg-none d-sm-block">Account</span><i class="fa fa-user d-lg-inline-block d-none"></i></a>
                                 </li>
-                            }
-                            <li class="nav-item">
-                                <a asp-area="" asp-controller="Account" asp- asp-action="Logout" title="Logout" class="nav-link js-scroll-trigger" id="Logout"><span class="d-lg-none d-sm-block">Logout</span><i class="fa fa-sign-out d-lg-inline-block d-none"></i></a>
-                            </li>
-                        </ul>
-                    }
-                    else if (Env.IsSecure)
-                    {
-                        <ul class="navbar-nav">
-                            @if (!(await SettingsRepository.GetPolicies()).LockSubscription)
-                            {
-                                <li class="nav-item"><a asp-area="" asp-controller="Account" asp-action="Register" class="nav-link js-scroll-trigger" id="Register">Register</a></li>
-                            }
-                            <li class="nav-item"><a asp-area="" asp-controller="Account" asp-action="Login" class="nav-link js-scroll-trigger" id="Login">Log in</a></li>
-                            <vc:ui-extension-point location="header-nav"/>
-                        </ul>
-                    }
+                                <vc:notifications-dropdown/>
+                                @if (!theme.CustomTheme)
+                                {
+                                    <li class="nav-item">
+                                        <button class="btcpay-theme-switch nav-link">
+                                            <span class="d-lg-none d-sm-block"><span class="btcpay-theme-switch-dark">Dark theme</span><span class="btcpay-theme-switch-light">Light theme</span></span>
+                                            <svg class="d-lg-inline-block d-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+                                                <path class="btcpay-theme-switch-dark" transform="translate(1 1)" d="M2.72 0A3.988 3.988 0 000 3.78c0 2.21 1.79 4 4 4 1.76 0 3.25-1.14 3.78-2.72-.4.13-.83.22-1.28.22-2.21 0-4-1.79-4-4 0-.45.08-.88.22-1.28z"/>
+                                                <path class="btcpay-theme-switch-light" transform="translate(1 1)" d="M4 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 0 4 0zM1.5 1c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM.5 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM1.5 6c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 7 4 7z"/>
+                                            </svg>
+                                        </button>
+                                    </li>
+                                }
+                                <li class="nav-item">
+                                    <a asp-area="" asp-controller="Account" asp- asp-action="Logout" title="Logout" class="nav-link js-scroll-trigger" id="Logout"><span class="d-lg-none d-sm-block">Logout</span><i class="fa fa-sign-out d-lg-inline-block d-none"></i></a>
+                                </li>
+                            </ul>
+                        }
+                        else if (Env.IsSecure)
+                        {
+                            <ul class="navbar-nav">
+                                @if (!(await SettingsRepository.GetPolicies()).LockSubscription)
+                                {
+                                    <li class="nav-item"><a asp-area="" asp-controller="Account" asp-action="Register" class="nav-link js-scroll-trigger" id="Register">Register</a></li>
+                                }
+                                <li class="nav-item"><a asp-area="" asp-controller="Account" asp-action="Login" class="nav-link js-scroll-trigger" id="Login">Log in</a></li>
+                                <vc:ui-extension-point location="header-nav"/>
+                            </ul>
+                        }
+                    </div>
                 </div>
             </div>
             <div id="badUrl" class="alert alert-danger alert-dismissible" style="display:none; position:absolute; top:75px;" role="alert">
diff --git a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css
index 1a73d111f..1f4c0f7df 100644
--- a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css
+++ b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css
@@ -6073,7 +6073,7 @@ fieldset:disabled .btn {
   z-index: 1040;
   width: 100vw;
   height: 100vh;
-  background-color: var(--btcpay-black);
+  background-color: var(--btcpay-bg-tile);
 }
 
 .offcanvas-backdrop.fade {
@@ -6081,21 +6081,21 @@ fieldset:disabled .btn {
 }
 
 .offcanvas-backdrop.show {
-  opacity: 0.8;
+  opacity: 1;
 }
 
 .offcanvas-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem 1rem;
+  padding: 0.5rem 0;
 }
 
 .offcanvas-header .btn-close {
-  padding: 0.5rem 0.5rem;
-  margin-top: -0.5rem;
-  margin-right: -0.5rem;
-  margin-bottom: -0.5rem;
+  padding: 0.25rem 0;
+  margin-top: -0.25rem;
+  margin-right: 0;
+  margin-bottom: -0.25rem;
 }
 
 .offcanvas-title {
@@ -6105,23 +6105,23 @@ fieldset:disabled .btn {
 
 .offcanvas-body {
   flex-grow: 1;
-  padding: 1rem 1rem;
+  padding: 0.5rem 0;
   overflow-y: auto;
 }
 
 .offcanvas-start {
   top: 0;
   left: 0;
-  width: 400px;
-  border-right: 1px solid var(--btcpay-body-border-medium);
+  width: 100vw;
+  border-right: 0 solid rgba(0, 0, 0, 0.2);
   transform: translateX(-100%);
 }
 
 .offcanvas-end {
   top: 0;
   right: 0;
-  width: 400px;
-  border-left: 1px solid var(--btcpay-body-border-medium);
+  width: 100vw;
+  border-left: 0 solid rgba(0, 0, 0, 0.2);
   transform: translateX(100%);
 }
 
@@ -6129,18 +6129,18 @@ fieldset:disabled .btn {
   top: 0;
   right: 0;
   left: 0;
-  height: 30vh;
+  height: auto;
   max-height: 100%;
-  border-bottom: 1px solid var(--btcpay-body-border-medium);
+  border-bottom: 0 solid rgba(0, 0, 0, 0.2);
   transform: translateY(-100%);
 }
 
 .offcanvas-bottom {
   right: 0;
   left: 0;
-  height: 30vh;
+  height: auto;
   max-height: 100%;
-  border-top: 1px solid var(--btcpay-body-border-medium);
+  border-top: 0 solid rgba(0, 0, 0, 0.2);
   transform: translateY(100%);
 }
 
@@ -9831,12 +9831,16 @@ code {
 
 pre {
   border-radius: var(--btcpay-border-radius);
+}
+
+pre,
+pre code {
   background: var(--btcpay-pre-bg);
 }
 
-pre code {
+pre.text-wrap,
+pre:not(.text-wrap) code {
   padding: var(--btcpay-space-m) !important;
-  background: var(--btcpay-pre-bg);
 }
 
 ol {
diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css
index 96568a8b3..ee24392cb 100644
--- a/BTCPayServer/wwwroot/main/site.css
+++ b/BTCPayServer/wwwroot/main/site.css
@@ -72,13 +72,6 @@ hr.light {
 }
 
 /* Navigation bar */
-@media (max-width: 991px) {
-    .offcanvas-body {
-        color: var(--btcpay-body-text);
-        background: var(--btcpay-body-bg);
-    }
-}
-
 @media (max-width: 575px) {
     .offcanvas-header,
     .offcanvas-body {
@@ -87,7 +80,35 @@ hr.light {
     }
 }
 
-.offcanvas-header,
+@media (max-width: 991px) {
+    .offcanvas-header {
+        padding-top: 0.75rem;
+        padding-bottom: 0.75rem;
+    }
+}
+
+.offcanvas-fade {
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: none;
+}
+
+.offcanvas-fade .offcanvas-header {
+    background-color: var(--btcpay-header-bg);
+}
+
+.offcanvas-fade .offcanvas-body {
+    opacity: 0;
+    transition: opacity 0.15s linear, transform 0.15s linear;
+}
+
+.offcanvas-fade.show .offcanvas-body {
+    opacity: 1;
+    transform: translate(0, .5rem);
+}
+
 #mainNav {
     color: var(--btcpay-header-text);
     background: var(--btcpay-header-bg);