Fix NavMenu for smaller screens

pull/5285/head
Manuel Wedler 2 months ago committed by Aniket
parent 754154a57c
commit 2e83312dc4
  1. 4
      apps/contract-verification/src/app/App.css
  2. 4
      apps/contract-verification/src/app/components/NavMenu.tsx
  3. 4
      apps/contract-verification/src/app/layouts/Default.tsx

@ -1,3 +1,7 @@
html, body, #root {
height: 100%;
}
body { body {
margin: 0; margin: 0;
} }

@ -9,7 +9,7 @@ interface NavItemProps {
const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => { const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
return ( return (
<NavLink to={to} className={({ isActive }) => 'text-decoration-none d-flex flex-column justify-content-center px-2 ' + (isActive ? 'bg-light' : 'bg-transparent')}> <NavLink to={to} className={({ isActive }) => 'text-decoration-none d-flex flex-column justify-content-center p-2 small ' + (isActive ? 'bg-light' : 'bg-transparent')}>
<span> <span>
<span>{icon}</span> <span>{icon}</span>
<span className="ml-2">{title}</span> <span className="ml-2">{title}</span>
@ -20,7 +20,7 @@ const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
export const NavMenu = () => { export const NavMenu = () => {
return ( return (
<nav className="d-flex flex-row justify-start fixed-top w-100" style={{ height: '40px' }}> <nav className="d-flex flex-row justify-start w-100">
<NavItem to="/" icon={<i className="fas fa-home"></i>} title="Verify" /> <NavItem to="/" icon={<i className="fas fa-home"></i>} title="Verify" />
<NavItem to="/receipts" icon={<i className="fas fa-receipt"></i>} title="Receipts" /> <NavItem to="/receipts" icon={<i className="fas fa-receipt"></i>} title="Receipts" />
<NavItem to="/lookup" icon={<i className="fas fa-search"></i>} title="Lookup" /> <NavItem to="/lookup" icon={<i className="fas fa-search"></i>} title="Lookup" />

@ -10,9 +10,9 @@ interface Props {
export const DefaultLayout = ({ children, title, description }: PropsWithChildren<Props>) => { export const DefaultLayout = ({ children, title, description }: PropsWithChildren<Props>) => {
return ( return (
<div> <div className="d-flex flex-column h-100">
<NavMenu /> <NavMenu />
<div className="py-4 px-3" style={{ marginTop: '40px' }}> <div className="py-4 px-3 flex-grow-1" style={{ overflowY: 'auto' }}>
<div> <div>
<p className="text-center" style={{ fontSize: '0.8rem' }}> <p className="text-center" style={{ fontSize: '0.8rem' }}>
{description} {description}

Loading…
Cancel
Save