navbar

frontend/src/App.tsx

@@ -31,12 +31,22 @@ export default function App() {
   )
 }
 function Navbar() {
+  const linkStyle = {
+    textDecoration: 'none', 
+    color: 'black',
+    background: '#B1D4E0', 
+    padding: '8px 16px', 
+    borderRadius: '5px',
+    margin: '0 5px' 
+  };
   const session = useContext(SessionContext);
 
   const links = session ? (
     <>
-      <Link to="/">Home</Link>
-      <Link to="/login" onClick={destroySessionCookie}>Logout</Link>
+      <img src="/PeerNotes.png" alt="PeerNotes Logo" style={{ height: '60px', marginRight: '10px' }} />
+      <Link to="/" style={linkStyle}>Home</Link>
+      <Link to="/search" style={linkStyle}>Search</Link>
+      <Link to="/login" onClick={destroySessionCookie} style={linkStyle}>Logout</Link>
     </>
   ): (
       <Link to="/login">Login</Link>

frontend/src/styles/App.css

@@ -1,12 +1,18 @@
 nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 2rem;
-    border: 3px solid #f1f1f1;
-    border-radius: 5px;
-    color: black;
-    background-color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  margin: 0;
+  width: 100%;
+  background-color: #145DA0;
+  border: none;
+  border-radius: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  box-sizing: border-box;
 }
 .App {
     display: flex;