fix Navbar and Sidebar

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 />
+            <Suspense fallback="Carregando...">
               <Routes />
+            </Suspense>
           </div>
         </main>
       </UserProvider>

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()}

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,24 +34,35 @@ export const SideNav = () => {
   };
 
   return (
-    <div
+    <>
-      className="fixed left-0 right-0 bottom-0 mt-16 top-0 z-40 xl:static xl:w-72"
+      <Transition
-      role="menu"
+        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"
       >
         <div
           role="none"
           onKeyPress={handleKeyPress}
           onClick={() => handleCloseSideNav()}
-        className={cx(
+          className="xl:hidden absolute w-full h-full bg-black bg-opacity-60 z-30"
-          "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
+      </Transition>
-        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
-        }`}
+        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">
@@ -62,6 +73,7 @@ export const SideNav = () => {
             ))}
           </ul>
         </aside>
-    </div>
+      </Transition>
+    </>
   );
 };

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>

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"
+                                alt={`${balance?.currency.name} icon`}
-                                  src={`https://pancakeswap.finance/images/tokens/${token?.address["56"]}.svg`}
+                                src={getCurrencyLogo(balance?.currency.name)}
                                 className="mx-auto object-cover rounded-full h-10 w-10 "
                               />
-                              </a>
                             </div>
                             <div className="ml-3">
                               <p className="text-gray-900 whitespace-no-wrap">

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`;
+  }
+};

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",

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"