admin,admin, header style changes

src/App.tsx

@@ -9,6 +9,8 @@ import Projects from './components/projects/Projects';
 import { ReactQueryDevtools} from 'react-query/devtools'
 import ManageUsers from './components/manage_users/ManageUsers';
 import IntranetUsers from './components/intranet_users/IntranetUsers';
+import Search from './components/search/Search';
+import Admin from './components/admin/Admin';
 
 function App() {
   const queryClient = new QueryClient();
@@ -22,6 +24,8 @@ function App() {
             <Route path="/projects" element={<Projects />} />
             <Route path="/manage-users" element={<ManageUsers />} />
             <Route path="/intranet-users" element={<IntranetUsers />} />
+            <Route path="/search" element={<Search />} />
+            <Route path="/search" element={<Admin />} />
           </Routes>
         </div>
       </BrowserRouter>

src/components/Header.tsx

@@ -25,7 +25,7 @@ function Header() {
   };
 
   return (
-    <AppBar position="static" sx={{ bgcolor: '#0d0d0d', height: '94px' }}>
+    <AppBar position="static" sx={{ bgcolor: '#0d0d0d', height: '84px' }}>
       <Container maxWidth="xl">
         <Toolbar disableGutters sx={{ marginTop: '10px', display: 'flex', justifyContent: 'space-between' }}>
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
@@ -84,7 +84,7 @@ function Header() {
               key="home"
               onClick={handleCloseNavMenu}
               sx={{
-                mx: 2,
+                mx: 1,
                 color: 'white',
                 borderRadius:0,
                 borderBottom: location.pathname === '/' ? '2px solid red' : 'none',
@@ -98,7 +98,7 @@ function Header() {
               key="projects"
               onClick={handleCloseNavMenu}
               sx={{
-                mx: 2,
+                mx: 1,
                 color: 'white',
                 borderRadius:0,
                 borderBottom: location.pathname === '/projects' ? '2px solid red' : 'none',
@@ -108,11 +108,42 @@ function Header() {
             >
               PROJECTS
             </Button>
+
+            <Button
+              key="search"
+              onClick={handleCloseNavMenu}
+              sx={{
+                mx: 1,
+                color: 'white',
+                borderRadius:0,
+                borderBottom: location.pathname === '/search' ? '2px solid red' : 'none',
+              }}
+              component={Link}
+              to="/search"
+            >
+              Search
+            </Button>
+
+            <Button
+              key="admin"
+              onClick={handleCloseNavMenu}
+              sx={{
+                mx: 1,
+                color: 'white',
+                borderRadius:0,
+                borderBottom: location.pathname === '/admin' ? '2px solid red' : 'none',
+              }}
+              component={Link}
+              to="/admin"
+            >
+              Admin
+            </Button>
+            
             <Button
               key="manage-users"
               onClick={handleCloseNavMenu}
               sx={{
-                mx: 2,
+                mx: 1,
                 color: 'white',
                 borderRadius:0,
                 borderBottom: location.pathname === '/manage-users' ? '2px solid red' : 'none',
@@ -126,7 +157,7 @@ function Header() {
               key="intranet-users"
               onClick={handleCloseNavMenu}
               sx={{
-                mx: 2,
+                mx: 1,
                 color: 'white',
                 borderBottom: location.pathname === '/intranet-users' ? '2px solid red' : 'none',
                 borderRadius:0

src/components/admin/Admin.tsx

@@ -0,0 +1,12 @@
+import { Paper } from "@mui/material";
+import React from "react";
+
+export default function Admin(){
+    return (
+        <Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
+            <Paper  className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
+                
+            </Paper>
+        </Paper>
+    )
+}

src/components/search/Search.tsx

@@ -0,0 +1,12 @@
+import { Paper } from "@mui/material";
+import React from "react";
+
+export default function Search(){
+    return (
+        <Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
+            <Paper  className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
+                
+            </Paper>
+        </Paper>
+    )
+}