From b992b8cc8fcd2075dac06718229e43d76d1ba451 Mon Sep 17 00:00:00 2001
From: Manuel Wedler <manuel@wedler.dev>
Date: Wed, 18 Sep 2024 17:21:50 +0200
Subject: [PATCH] Improve coloring of NavMenu and move to one line

---
 .../src/app/components/NavMenu.tsx                 | 14 +++++---------
 .../src/app/layouts/Default.tsx                    |  2 +-
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/apps/contract-verification/src/app/components/NavMenu.tsx b/apps/contract-verification/src/app/components/NavMenu.tsx
index ce01bd8514..4e1e6579ab 100644
--- a/apps/contract-verification/src/app/components/NavMenu.tsx
+++ b/apps/contract-verification/src/app/components/NavMenu.tsx
@@ -9,15 +9,10 @@ interface NavItemProps {
 
 const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
   return (
-    <NavLink
-      // data-id="home"
-      to={to}
-      className={({ isActive }) => 'p-2 text-decoration-none ' + (isActive ? 'bg-primary text-white' : 'bg-secondary')}
-      // state={from}
-    >
-      <span className="d-flex flex-column align-items-center justify-content-center" style={{ width: '60px' }}>
+    <NavLink to={to} className={({ isActive }) => 'text-decoration-none d-flex flex-column justify-content-center px-2 ' + (isActive ? 'bg-transparent' : 'bg-dark')}>
+      <span>
         <span>{icon}</span>
-        <span>{title}</span>
+        <span className="ml-2">{title}</span>
       </span>
     </NavLink>
   )
@@ -25,11 +20,12 @@ const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
 
 export const NavMenu = () => {
   return (
-    <nav className="d-flex flex-row justify-content-around bg-secondary fixed-top">
+    <nav className="d-flex flex-row justify-start fixed-top w-100" style={{ height: '40px' }}>
       <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="/lookup" icon={<i className="fas fa-search"></i>} title="Lookup" />
       <NavItem to="/settings" icon={<i className="fas fa-cog"></i>} title="Settings" />
+      <div className="flex-grow-1 bg-dark"></div>
     </nav>
   )
 }
diff --git a/apps/contract-verification/src/app/layouts/Default.tsx b/apps/contract-verification/src/app/layouts/Default.tsx
index 7693ca46cd..87c715e5ac 100644
--- a/apps/contract-verification/src/app/layouts/Default.tsx
+++ b/apps/contract-verification/src/app/layouts/Default.tsx
@@ -12,7 +12,7 @@ export const DefaultLayout = ({ children, title, description }: PropsWithChildre
   return (
     <div>
       <NavMenu />
-      <div className="my-4 px-3">
+      <div className="py-4 px-3" style={{ marginTop: '40px' }}>
         <div>
           <p className="text-center" style={{ fontSize: '0.8rem' }}>
             {description}