|
|
@ -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" /> |
|
|
|