Delete unneeded files

c4g-project/src/components/NavBar.css

@@ -1,112 +1,7 @@
-.nav {
-  background-color: 'transparent';
-  color: black;
-  display: flex;
-  justify-content: space-between;
-  gap: 0;
-  padding: 0 1rem;
-  height: 10vh;
-  max-height: 100px;
-  min-height: 40px;
-	display: flex;
-
-}
-
-.site-title {
-  height: 100%;
-  width: 200px;
-	margin-right: auto;
-
-}
-
-.site-title img {
-  /* height: 80%; */
-  height: auto;
-  width: 100%;
-	max-width: 160px;
-}
-
-.profile-pic {
-  /* width: 60%;
-  height: auto;
-  min-width: 38px;
-  max-width: 80px; */
-	max-height: 100%;
-	max-width: 100%;
-}
-
-
-.nav-group {
-  padding: 0;
-  margin-left: auto;
-	width: 500px;
-  height: 100%;
-  list-style: none;
-  display: flex;
-  gap: 1rem;
-  border: 0;
-}
-.logo {
-  color: inherit;
-  text-decoration: none;
-  max-height: 100%;
-  display: flex;
-  align-items: center;
-	max-width: 100%;
-}
-
-button {
-  outline: none !important;
-}
-
-.nav button {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  box-shadow: none;
-  border: none !important;
-}
-.nav button:hover {
-  background-color: transparent;
-}
-
-
-
-.login-box {
-  background-color: #d3d3d3;
-}
-
-.nav-button {
-  text-transform: none;
-  outline: none !important;
-  border: none;
-  width: 25%;
-
-}
-
-.nav-button .navbar-text  {
-  color: #B2DBD7;
-  text-transform: none;
-}
-
-.nav-button:active  .navbar-text{
+.nav-text:hover {
   color: #6291D8;
 }
 
-
-.navbar-text {
-  font-size: 25px;
-}
-
-/* .nav-group {
-  outline: none !important;
-  display: flex;
-  justify-content: space-between;
-  border: none;
-  width: 70%;
-  max-width: 1000px;
-} */
-
-.nav button {
-  flex: 1;
-}
+.nav-text {
+	color: #B2DBD7;
+}

c4g-project/src/components/NavBar.tsx

@@ -1,48 +1,113 @@
-import React from 'react';
-import { Typography } from '@mui/material';
-import icon from '../images/icon.png';
-import placeholderName from '../images/placeholder_name.png';
-import Stack from '@mui/material/Stack';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import NavDrawer from './NavDrawer';
+import React from "react";
+import { Typography } from "@mui/material";
+import icon from "../images/icon.png";
+import placeholderName from "../images/placeholder_name.png";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import NavDrawer from "./NavDrawer";
 import { Link as RouterLink } from "react-router-dom";
-import './NavBar.css';
+import "./NavBar.css";
 
 export default function NavBar() {
-	return <Box className="nav" >
-		<NavDrawer/>
-		<Button disableRipple className="logo" sx={{
-			padding: "3px",
-			width: {
-				xs: "100px",
-				sm: "100px",
-				md: "120px",
-				lg: "140px",
-				xl: "160px",
-			},
-		}}><img src={placeholderName} alt="Name" style={{width: "100%", height: "auto", padding: "3px", maxWidth: "160px" }}></img></Button>
-		<ButtonGroup
+  return (
+    <Box
+      className="nav"
+      display="flex"
+      alignItems="center"
+      component="nav"
+      position="static"
+      flexDirection="row"
+      style={{ background: "transparent", width: "100%", height: "60px" }}
+    >
+      <NavDrawer />
+      <RouterLink
+        to="/"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textDecoration: "none",
+          height: "100%",
+        }}
+      >
+        <img
+          src={icon}
+          alt="Name"
+          style={{ height: "40px", marginRight: "20px", marginLeft: "10px" }}
+        />
+        <Typography className="nav-text" variant="h4" sx={{ my: 4 }}>
+          CompanyName
+        </Typography>
+      </RouterLink>
+      <Box
+        className="nav"
+        display="flex"
+        alignItems="center"
+        component="nav"
+        position="static"
+        flexDirection="row"
+        sx={{
+          marginLeft: "auto",
+          height: "60px",
+        }}
+      >
+        <Box
+          sx={{
+            display: {
+              xs: "none",
+              sm: "none",
+              md: "flex",
+              lg: "flex",
+              xl: "flex",
+            },
+          }}
+        >
+          <RouterLink
+            to="/"
+            style={{
+              textDecoration: "none",
+              color: "inherit",
+              border: "none",
+              marginRight: "130px",
+            }}
+          >
+            <Typography className="nav-text" variant="h5" sx={{ my: 5 }}>
+              Home
+            </Typography>
+          </RouterLink>
+          <RouterLink
+            to="/"
+            style={{
+              textDecoration: "none",
+              color: "inherit",
+              border: "none",
+              marginRight: "130px",
+            }}
+          >
+            <Typography className="nav-text" variant="h5" sx={{ my: 5 }}>
+              Calendar
+            </Typography>
+          </RouterLink>
+        </Box>
+        <RouterLink
+          to="/"
           style={{
+            textDecoration: "none",
+            color: "inherit",
             border: "none",
-            borderRadius: "5px",
-            overflow: "hidden",
-			}}
-			className="nav-group"
+            margin: 0,
+          }}
         >
-			<Button disableRipple className="nav-button"><p className="navbar-text">Home</p></Button>
-				<Button disableRipple className="nav-button"><p className="navbar-text">Calendar</p></Button>
-			<Button disableRipple sx={{ padding: "3px",
-		width: {
-			xs: "40px",
-			sm: "40px",
-			md: "40px",
-			lg: "50px",
-			xl: "60px",
-		},
-			}}><img src={icon} className="profile-pic" alt="Profile"></img></Button>
-		</ButtonGroup >
-		</Box>
-
-}
+          <img
+            src={icon}
+            style={{ height: "40px", marginRight: "10px", marginLeft: "10px" }}
+            className="profile-pic"
+            alt="Profile"
+          ></img>
+        </RouterLink>
+      </Box>
+    </Box>
+  );
+}