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

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