From 0578e38eeea04521e72451a2d15748602fa957be Mon Sep 17 00:00:00 2001
From: Igor <12849336+DoubleCookies@users.noreply.github.com>
Date: Sat, 15 May 2021 17:42:07 +0300
Subject: [PATCH] Scrollable nav (#497)

* scrollable nav

* rename
---
 components/layout/Nav.tsx |  1 +
 pages/styles.css          | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/components/layout/Nav.tsx b/components/layout/Nav.tsx
index 4a8ec41f0..3fabc60c9 100644
--- a/components/layout/Nav.tsx
+++ b/components/layout/Nav.tsx
@@ -27,6 +27,7 @@ const Nav = () => {
       position="sticky"
       alignSelf="flex-start"
       display={["none", null, null, "block"]}
+      className="scrollableNavigation"
     >
       {navItems.map(({ code, name }) => {
         const isActive = navItem?.code === code;
diff --git a/pages/styles.css b/pages/styles.css
index feb4f6f2f..86197a1e7 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -176,3 +176,14 @@ For React Datepicker
   color: var(--text);
   outline: none;
 }
+
+.scrollableNavigation {
+  max-height: calc(100vh - 1rem);
+  overflow-y: auto;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.scrollableNavigation::-webkit-scrollbar {
+  display: none;
+}