fix Navbar and Sidebar

2021-08-11 21:45:29 -03:00
parent 5fc02f00f8
commit 1847a276f7
8 changed files with 71 additions and 48 deletions
--- 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 />
+            <Suspense fallback="Carregando...">
              <Routes />
+            </Suspense>
          </div>
        </main>
      </UserProvider>
--- 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()}
--- 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,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"
-      role="menu"
+    <>
+      <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"
      >
        <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"
-        )}
+          className="xl:hidden absolute w-full h-full bg-black bg-opacity-60 z-30"
        />
-      <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>
+
+      <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>
+    </>
  );
 };
--- 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>
--- 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`}
+                                alt={`${balance?.currency.name} icon`}
+                                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">
--- a/app/javascript/src/utils/getCurrencyLogo.ts
+++ 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`;
+  }
+};
--- 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",
--- 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"