LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

frontend-monorepo-567: Ensure menu sits above other content when open on mobile (#617)

Browse Source 
* frontend-monorepo-567: Gave menu a high z-index to ensure it's shown above any positioned elements or ui-toolkit components

* frontend-monorepo-567: Clean up explorer nav component classes using classnames
This commit is contained in:
Sam Keen 2022-06-22 14:07:09 +01:00 committed by GitHub
parent c85e6a313f
commit f7f90bc245
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/explorer/src/app/components/nav/index.tsx
View File

@ -1,5 +1,6 @@
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import routerConfig from '../../routes/router-config'; import routerConfig from '../../routes/router-config';
import classnames from 'classnames';
interface NavProps { interface NavProps {
menuOpen: boolean; menuOpen: boolean;
@ -9,18 +10,29 @@ export const Nav = ({ menuOpen }: NavProps) => {
return ( return (
<nav className="relative"> <nav className="relative">
<div <div
className={`${ className={classnames(
menuOpen ? 'right-0 h-[100vh]' : 'right-[200vw] h-full' 'absolute top-0 z-50 md:static',
} transition-[right] absolute top-0 w-full md:static md:border-r-1 bg-white dark:bg-black p-20`} 'w-full p-20 md:border-r-1',
'bg-white dark:bg-black',
'transition-[right]',
{
'right-0 h-[100vh]': menuOpen,
'right-[200vw] h-full': !menuOpen,
}
)}
> >
{routerConfig.map((r) => ( {routerConfig.map((r) => (
<NavLink <NavLink
key={r.name} key={r.name}
to={r.path} to={r.path}
className={({ isActive }) => className={({ isActive }) =>
`text-h5 block mb-8 px-8 hover:bg-vega-yellow hover:text-black ${ classnames(
isActive && 'bg-vega-yellow text-black' 'block mb-8 px-8',
}` 'text-h5 hover:bg-vega-yellow hover:text-black',
{
'bg-vega-yellow text-black': isActive,
}
)
} }
> >
{r.text} {r.text}