geonizeli/x-stake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix Navbar and Sidebar

Browse Source
This commit is contained in:
João Geonizeli
2021-08-11 21:45:29 -03:00
parent 5fc02f00f8
commit 1847a276f7
8 changed files with 71 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/src/App.tsx
View File

@@ -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>

2
app/javascript/src/components/Navbar/Navbar.tsx
View File

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

70
app/javascript/src/components/SideNav.tsx
View File

@@ -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>
</>
);
};

2
app/javascript/src/pages/Home/Home.tsx
View File

@@ -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>

22
app/javascript/src/pages/Wallet/Wallet.tsx
View File

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

11
app/javascript/src/utils/getCurrencyLogo.ts Normal file
View File

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