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

improve sidebar and navbar

Browse Source
This commit is contained in:
João Geonizeli
2021-08-13 11:20:18 -03:00
parent 34f5fc2752
commit ca27501b79
2 changed files with 19 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,7 +23,7 @@ export const Navbar = () => {
return ( return (
<nav className="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 <button
className="w-10 h-10 xl:hidden" className="w-12 md:w-10 h-12 md:h-10 xl:hidden fixed md:relative bottom-8 md:bottom-auto right-8 md:right-auto bg-white rounded-full p-3 md:p-0 shadow md:shadow-none"
onClick={() => handleExpandSideNav()} onClick={() => handleExpandSideNav()}
> >
<svg <svg

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

@@ -48,33 +48,28 @@ export const SideNav = () => {
<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" className="xl:hidden absolute w-full h-full bg-black bg-opacity-60"
/> />
</Transition> </Transition>
<aside
<Transition className={`bg-white w-4/6 md:w-1/6 overflow-hidden absolute h-screen drop-shadow-xl drop border-r border-gray-200 z-40 transition-all duration-500 xl:transition-none xl:mx-0 xl:static ${
className="z-40" sideNavExpanded ? "mx-0" : "-mx-full"
show={sideNavExpanded || window.screen.width >= 1280} }`}
enter="transition-opacity duration-500"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-500"
leaveFrom="opacity-100"
leaveTo="opacity-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}>
<li className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer"> <li
key={item.label}
className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer"
>
{item.label} {item.label}
</li> </li>
</Link> </Link>
))} ))}
</ul> </ul>
</aside> </aside>
</Transition>
</> </>
); );
}; };