From 15cc50338760f838db45e91bb52735b3ceb02f11 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Fri, 8 Apr 2022 16:36:58 +0900
Subject: [PATCH] Move graph mining chart link into dropdown

---
 .../components/graphs/graphs.component.html   | 30 +++++++++----------
 .../components/graphs/graphs.component.scss   |  9 ++----
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/components/graphs/graphs.component.html b/frontend/src/app/components/graphs/graphs.component.html
index d5cc61e91..55397bec7 100644
--- a/frontend/src/app/components/graphs/graphs.component.html
+++ b/frontend/src/app/components/graphs/graphs.component.html
@@ -1,25 +1,23 @@
-<ul ngbNav #nav="ngbNav" class="nav-pills mb-3" style="padding: 0px 35px" *ngIf="stateService.env.MINING_DASHBOARD">
-  <div class="d-inline-flex flex-wrap menu">
-    <li ngbNavItem class="menu-li">
-      <a routerLinkActive="active" [routerLink]="['/graphs/mempool' | relativeUrl]" ngbNavLink>Mempool</a>
-    </li>
-    <li ngbNavItem class="menu-li">
-      <a routerLinkActive="active" [routerLink]="['/graphs/mining/pools' | relativeUrl]" ngbNavLink i18n="mining.pools">
+<div class="mb-3 d-flex menu" style="padding: 0px 35px;">
+  <a routerLinkActive="active" class="btn btn-primary w-50 mr-1"
+    [routerLink]="['/graphs/mempool' | relativeUrl]">Mempool</a>
+  <div ngbDropdown *ngIf="stateService.env.MINING_DASHBOARD" class="w-50">
+    <button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="mining">Mining</button>
+    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/pools' | relativeUrl]"
+        i18n="mining.pools">
         Pools ranking
       </a>
-    </li>
-    <li ngbNavItem class="menu-li">
-      <a routerLinkActive="active" [routerLink]="['/graphs/mining/pools-dominance' | relativeUrl]" ngbNavLink i18n="mining.pools-dominance">
+      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/pools-dominance' | relativeUrl]"
+        i18n="mining.pools-dominance">
         Pools dominance
       </a>
-    </li>
-    <li ngbNavItem class="menu-li">
-      <a routerLinkActive="active" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" ngbNavLink
-        i18n="mining.hashrate-difficulty">
+      <a class="dropdown-item" routerLinkActive="active"
+        [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="mining.hashrate-difficulty">
         Hashrate & Difficulty
       </a>
-    </li>
+    </div>
   </div>
-</ul>
+</div>
 
 <router-outlet></router-outlet>
\ No newline at end of file
diff --git a/frontend/src/app/components/graphs/graphs.component.scss b/frontend/src/app/components/graphs/graphs.component.scss
index c4ca483bd..b952137b9 100644
--- a/frontend/src/app/components/graphs/graphs.component.scss
+++ b/frontend/src/app/components/graphs/graphs.component.scss
@@ -1,9 +1,6 @@
 .menu {
   flex-grow: 1;
-  max-width: 600px;
-}
-
-.menu-li {
-  flex-grow: 1;
-  text-align: center;
+  @media (min-width: 576px) {
+    max-width: 400px;
+  }
 }