From f41fed7a7b347ba539a9c0ca5950d44948d695c9 Mon Sep 17 00:00:00 2001
From: Robbie Davis <robbie@therobbiedavis.com>
Date: Fri, 17 Mar 2023 11:02:11 -0400
Subject: [PATCH] Donate styling (#1886)

* Donate styling

# Changed
- Changed the styling and positioning of the donate button to still be visible but less intrusive and more cohesive to the application.

* Updated pr action

* Revert "Updated pr action"

This reverts commit d3f7c7b2edfdcdbb79acb9e7816247ef5ebc30ea.
---
 .../side-nav/side-nav.component.html          |  4 +-
 .../side-nav/side-nav.component.scss          | 64 ++++++++++++++++++-
 2 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.html b/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.html
index c87ce62ad..c7c7f05c8 100644
--- a/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.html
+++ b/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.html
@@ -17,7 +17,6 @@
         </app-side-nav-item>
         <app-side-nav-item icon="fa-bookmark" title="Bookmarks" link="/bookmarks/"></app-side-nav-item>
         <app-side-nav-item icon="fa-regular fa-rectangle-list" title="All Series" link="/all-series/" *ngIf="libraries.length > 0"></app-side-nav-item>
-        <app-side-nav-item icon="fa-heart" title="Donate" link="https://opencollective.com/kavita" [external]="true"></app-side-nav-item>
         <div class="mb-2 mt-3 ms-2 me-2" *ngIf="libraries.length > 10 && (navService?.sideNavCollapsed$ | async) === false">
             <label for="filter" class="form-label visually-hidden">Filter</label>
             <div class="form-group">
@@ -33,4 +32,7 @@
         </app-side-nav-item>
     </div>
     <div class="side-nav-overlay" (click)="toggleNavBar()" [ngClass]="{'closed' : (navService.sideNavCollapsed$ | async)}"></div>
+    <div class="bottom" [ngClass]="{'closed' : (navService.sideNavCollapsed$ | async), 'hidden': (navService.sideNavVisibility$ | async) === false}">
+        <app-side-nav-item [ngClass]="'donate'" icon="fa-heart" title="Donate" link="https://opencollective.com/kavita" [external]="true"></app-side-nav-item>
+    </div>
 </ng-container>
\ No newline at end of file
diff --git a/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.scss b/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.scss
index 69fb59652..2ebfde18a 100644
--- a/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.scss
+++ b/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.scss
@@ -1,8 +1,68 @@
+.bottom {
+    position: absolute;
+    bottom: 12px;
+    width: 190px;
+    background: var(--navbar-bg-color);
+    border-radius: var(--side-nav-border-radius);
+    font-size: 12px;
+    transition: width var(--side-nav-openclose-transition);
+    z-index: 999;
+    
+    &.closed {
+        width: 50px;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+}
+
+:host ::ng-deep .bottom .donate .side-nav-item {
+    justify-content: center;
+    min-height: 25px;
+    align-items: center;
+
+    :hover {
+        background-color: unset;
+    }
+ }
+
+:host ::ng-deep .bottom .donate .side-nav-item span {
+    flex-grow: unset !important;
+    min-width: unset !important;;
+}
+
+:host ::ng-deep .bottom .donate .side-nav-item span div {
+    min-width: unset !important;
+}
+
+:host ::ng-deep .bottom .donate .side-nav-item span div i{
+    font-size: 12px !important;
+}
+
+
+
+:host ::ng-deep .bottom .donate .side-nav-item.closed span.phone-hidden div {
+    width: 100%;
+}
+
+:host ::ng-deep .bottom .donate .side-nav-item.closed span.side-nav-text div {
+    width: 0;
+}
+
+@media (max-width: 576px) {
+    :host ::ng-deep .bottom .donate .side-nav-item.closed {
+        display: none;
+    }
+
+    :host ::ng-deep .bottom .donate .side-nav-item span.phone-hidden {
+        display: block !important;
+    }
+}
+
 .side-nav {
     padding-bottom: 10px;
     width: 190px;
     background-color: var(--side-nav-bg-color);
-    height: calc((var(--vh)*100) - 85px);
+    height: calc((var(--vh)*100) - 115px);
     position: fixed;
     margin: 0;
     left: 10px;
@@ -36,7 +96,7 @@
         padding: 10px 0;
         width: 55vw;
         background-color: var(--side-nav-mobile-bg-color);
-        height: calc((var(--vh)*100) - 56px);
+        height: calc((var(--vh)*100) - 125px);
         position: fixed;
         margin: 0;
         left: 0;