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

fix sidebar on desktop

Browse Source
This commit is contained in:
João Geonizeli
2021-08-12 18:20:05 -03:00
parent 1cb7cc4504
commit d5aa3b548c
1 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,32 +37,33 @@ export const SideNav = () => {
<> <>
<Transition <Transition
show={sideNavExpanded} show={sideNavExpanded}
enter="transition-opacity duration-500 z-30" className="z-30"
enterFrom="opacity-0 z-30" enter="transition-opacity duration-500"
enterTo="opacity-100 z-30" enterFrom="opacity-0"
leave="transition-opacity duration-500 z-30" enterTo="opacity-100"
leaveFrom="opacity-100 z-30" leave="transition-opacity duration-500"
leaveTo="opacity-0 z-30" leaveFrom="opacity-100"
leaveTo="opacity-0"
> >
<div <div
role="none" role="none"
onKeyPress={handleKeyPress} onKeyPress={handleKeyPress}
onClick={() => handleCloseSideNav()} onClick={() => handleCloseSideNav()}
className="xl:hidden absolute w-full h-full bg-black bg-opacity-60 z-30" className="xl:hidden absolute w-full h-full bg-black bg-opacity-60"
/> />
</Transition> </Transition>
<Transition <Transition
className="h-full" className="z-40"
show={sideNavExpanded || window.screenY >= 1280} show={sideNavExpanded || window.screen.width >= 1280}
enter="transition-opacity duration-500 z-40" enter="transition-opacity duration-500"
enterFrom="opacity-0 z-40" enterFrom="opacity-0"
enterTo="opacity-100 z-40" enterTo="opacity-100"
leave="transition-opacity duration-500 z-40" leave="transition-opacity duration-500"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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"> <aside className="bg-white w-5/6 md:w-2/6 overflow-hidden absolute xl:static h-full drop-shadow-xl drop border-r border-gray-200 z-40 xl:transition-none xl:mx-0 xl:w-64 mx-0">
<ul> <ul>
{MenuItems.map((item) => ( {MenuItems.map((item) => (
<Link to={item.path} key={item.label} role="menuitem"> <Link to={item.path} key={item.label} role="menuitem">