From 1847a276f717d359f82d9f22cc561f18531f33a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <joao.geonizeli@gmail.com>
Date: Wed, 11 Aug 2021 21:45:29 -0300
Subject: [PATCH] fix Navbar and Sidebar

---
 app/javascript/src/App.tsx                    |  6 +-
 .../src/components/Navbar/Navbar.tsx          |  2 +-
 app/javascript/src/components/SideNav.tsx     | 70 +++++++++++--------
 app/javascript/src/pages/Home/Home.tsx        |  2 +-
 app/javascript/src/pages/Wallet/Wallet.tsx    | 22 ++----
 app/javascript/src/utils/getCurrencyLogo.ts   | 11 +++
 package.json                                  |  1 +
 yarn.lock                                     |  5 ++
 8 files changed, 71 insertions(+), 48 deletions(-)
 create mode 100644 app/javascript/src/utils/getCurrencyLogo.ts

diff --git a/app/javascript/src/App.tsx b/app/javascript/src/App.tsx
index dfc300e..b608234 100644
--- a/app/javascript/src/App.tsx
+++ b/app/javascript/src/App.tsx
@@ -1,6 +1,6 @@
 import { graphql } from "babel-plugin-relay/macro";
 import type { FC } from "react";
-import React from "react";
+import React, { Suspense } from "react";
 import { useLazyLoadQuery } from "react-relay";
 
 import { Navbar, SideNav } from "./components";
@@ -28,7 +28,9 @@ export const App: FC = () => {
           <Navbar />
           <div className="flex flex-grow">
             <SideNav />
-            <Routes />
+            <Suspense fallback="Carregando...">
+              <Routes />
+            </Suspense>
           </div>
         </main>
       </UserProvider>
diff --git a/app/javascript/src/components/Navbar/Navbar.tsx b/app/javascript/src/components/Navbar/Navbar.tsx
index 1377a04..f45deca 100644
--- a/app/javascript/src/components/Navbar/Navbar.tsx
+++ b/app/javascript/src/components/Navbar/Navbar.tsx
@@ -21,7 +21,7 @@ export const Navbar = () => {
       ?.getAttribute("content") ?? "";
 
   return (
-    <nav className="fixed w-full h-16 flex bg-white shadow items-center px-4 space-x-2 z-50">
+    <nav className="w-full h-16 flex bg-white shadow items-center px-4 space-x-2 z-50">
       <button
         className="w-10 h-10 xl:hidden"
         onClick={() => handleExpandSideNav()}
diff --git a/app/javascript/src/components/SideNav.tsx b/app/javascript/src/components/SideNav.tsx
index 71289fa..68917e9 100644
--- a/app/javascript/src/components/SideNav.tsx
+++ b/app/javascript/src/components/SideNav.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
-import cx from "classnames";
 import { Link } from "react-router-dom";
+import { Transition } from "@headlessui/react";
 
 import { useApp } from "../contexts/AppProvider";
 
@@ -34,34 +34,46 @@ export const SideNav = () => {
   };
 
   return (
-    <div
-      className="fixed left-0 right-0 bottom-0 mt-16 top-0 z-40 xl:static xl:w-72"
-      role="menu"
-    >
-      <div
-        role="none"
-        onKeyPress={handleKeyPress}
-        onClick={() => handleCloseSideNav()}
-        className={cx(
-          "xl:hidden absolute w-full h-full bg-black bg-opacity-60 backdrop-filter backdrop-blur-sm z-30 transition-all duration-500",
-          !sideNavExpanded && "opacity-0"
-        )}
-      />
-      <aside
-        className={`bg-white w-5/6 md:w-2/6 overflow-hidden absolute h-full drop-shadow-xl drop border-r border-gray-200 z-40 transition-all duration-500 xl:transition-none xl:mx-0 xl:static xl:w-full ${
-          sideNavExpanded ? "mx-0" : "-mx-full"
-        }`}
+    <>
+      <Transition
+        show={sideNavExpanded}
+        enter="transition-opacity duration-500 z-30"
+        enterFrom="opacity-0 z-30"
+        enterTo="opacity-100 z-30"
+        leave="transition-opacity duration-500 z-30"
+        leaveFrom="opacity-100 z-30"
+        leaveTo="opacity-0 z-30"
       >
-        <ul>
-          {MenuItems.map((item) => (
-            <Link to={item.path} key={item.label} role="menuitem">
-              <li className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer">
-                {item.label}
-              </li>
-            </Link>
-          ))}
-        </ul>
-      </aside>
-    </div>
+        <div
+          role="none"
+          onKeyPress={handleKeyPress}
+          onClick={() => handleCloseSideNav()}
+          className="xl:hidden absolute w-full h-full bg-black bg-opacity-60 z-30"
+        />
+      </Transition>
+
+      <Transition
+        className="h-full"
+        show={sideNavExpanded || window.screenY >= 1280}
+        enter="transition-opacity duration-500 z-40"
+        enterFrom="opacity-0 z-40"
+        enterTo="opacity-100 z-40"
+        leave="transition-opacity duration-500 z-40"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <aside className="bg-white w-5/6 md:w-2/6 overflow-hidden absolute h-full drop-shadow-xl drop border-r border-gray-200 z-40 xl:transition-none xl:mx-0 xl:static xl:w-full mx-0">
+          <ul>
+            {MenuItems.map((item) => (
+              <Link to={item.path} key={item.label} role="menuitem">
+                <li className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer">
+                  {item.label}
+                </li>
+              </Link>
+            ))}
+          </ul>
+        </aside>
+      </Transition>
+    </>
   );
 };
diff --git a/app/javascript/src/pages/Home/Home.tsx b/app/javascript/src/pages/Home/Home.tsx
index 49bbeba..9dbe107 100644
--- a/app/javascript/src/pages/Home/Home.tsx
+++ b/app/javascript/src/pages/Home/Home.tsx
@@ -7,7 +7,7 @@ import { PoolListing } from "../../components/PoolListing";
 
 export const Home: FC = () => {
   return (
-    <div className="flex flex-col h-full w-full overflow-x-hidden mt-16">
+    <div className="flex flex-col h-full w-full overflow-x-hidden">
       <Header>
         <Container className="flex-col">
           <h1 className="text-5xl text-white font-medium">XStake</h1>
diff --git a/app/javascript/src/pages/Wallet/Wallet.tsx b/app/javascript/src/pages/Wallet/Wallet.tsx
index 727cf17..b4c3cba 100644
--- a/app/javascript/src/pages/Wallet/Wallet.tsx
+++ b/app/javascript/src/pages/Wallet/Wallet.tsx
@@ -3,7 +3,7 @@ import type { FC } from "react";
 import React from "react";
 import { useLazyLoadQuery } from "react-relay";
 
-import { tokens } from "../../constants/pancake/Tokens";
+import { getCurrencyLogo } from "../../utils/getCurrencyLogo";
 import type { WalletQuery } from "./__generated__/WalletQuery.graphql";
 
 export const Wallet: FC = () => {
@@ -24,10 +24,8 @@ export const Wallet: FC = () => {
     {}
   );
 
-  const tokensList = Object.values(tokens);
-
   return (
-    <div className="flex flex-col h-full w-full overflow-x-hidden mt-16">
+    <div className="flex flex-col h-full w-full overflow-x-hidden">
       <div className="container mx-auto px-4 sm:px-8 max-w-3xl">
         <div className="py-8">
           <div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
@@ -51,22 +49,16 @@ export const Wallet: FC = () => {
                 </thead>
                 <tbody>
                   {balances.nodes?.map((balance) => {
-                    const token = tokensList.find(
-                      ({ symbol }) => symbol === balance?.currency.name
-                    );
-
                     return (
                       <tr key={balance?.id}>
                         <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                           <div className="flex items-center">
                             <div className="flex-shrink-0">
-                              <a href="/" className="block relative">
-                                <img
-                                  alt="profil"
-                                  src={`https://pancakeswap.finance/images/tokens/${token?.address["56"]}.svg`}
-                                  className="mx-auto object-cover rounded-full h-10 w-10 "
-                                />
-                              </a>
+                              <img
+                                alt={`${balance?.currency.name} icon`}
+                                src={getCurrencyLogo(balance?.currency.name)}
+                                className="mx-auto object-cover rounded-full h-10 w-10 "
+                              />
                             </div>
                             <div className="ml-3">
                               <p className="text-gray-900 whitespace-no-wrap">
diff --git a/app/javascript/src/utils/getCurrencyLogo.ts b/app/javascript/src/utils/getCurrencyLogo.ts
new file mode 100644
index 0000000..9d315b7
--- /dev/null
+++ b/app/javascript/src/utils/getCurrencyLogo.ts
@@ -0,0 +1,11 @@
+import { tokens } from "../constants/pancake/Tokens";
+
+const tokensList = Object.values(tokens);
+
+export const getCurrencyLogo = (symbol?: string) => {
+  const token = tokensList.find((item) => item.symbol === symbol);
+
+  if (token) {
+    return `https://pancakeswap.finance/images/tokens/${token.address["56"]}.svg`;
+  }
+};
diff --git a/package.json b/package.json
index 71f6577..6a22fd4 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
+    "@headlessui/react": "^1.4.0",
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
diff --git a/yarn.lock b/yarn.lock
index f088b5f..1c6891a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1128,6 +1128,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@headlessui/react@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.4.0.tgz#c6d424d8ab10ac925e4423d7f3cbab02c30d736a"
+  integrity sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"