minor changes to fix linter errors

package-lock.json

@@ -4552,6 +4552,7 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -7707,6 +7708,12 @@
       "dev": true,
       "dependencies": {
         "imagemin": "^7.0.1",
+        "imagemin-gifsicle": "^7.0.0",
+        "imagemin-mozjpeg": "^9.0.0",
+        "imagemin-optipng": "^8.0.0",
+        "imagemin-pngquant": "^9.0.2",
+        "imagemin-svgo": "^9.0.0",
+        "imagemin-webp": "^7.0.0",
         "loader-utils": "^2.0.0",
         "object-assign": "^4.1.1",
         "schema-utils": "^2.7.1"

src/components/contacts/ContactInfo.tsx

@@ -0,0 +1,8 @@
+import Status from "./Status";
+
+interface ContactInfo {
+  name: string;
+  status: Status;
+}
+
+export default ContactInfo;

src/components/contacts/ContactItem.tsx

@@ -0,0 +1,50 @@
+import {
+  Box,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import Status from "./Status";
+import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
+import CircleIcon from "@mui/icons-material/Circle";
+import ContactInfo from "./ContactInfo";
+
+const returnStatus = (
+  status: Status
+): "success" | "disabled" | "warning" | "error" => {
+  switch (status) {
+    case Status.Online:
+      return "success";
+    case Status.Offline:
+      return "disabled";
+    case Status.Away:
+      return "warning";
+    case Status.InMeeting:
+      return "error";
+  }
+};
+
+const ContactItem: React.FC<ContactInfo> = (props) => {
+  return (
+    <ListItemButton>
+      <ListItemIcon>
+        <PersonOutlineIcon />
+      </ListItemIcon>
+      <Box sx={{ display: "flex", flexDirection: "column", flexGrow: 1 }}>
+        <ListItemText primary={props.name} />
+        <ListItemText
+          primary={
+            <Typography variant="subtitle1" sx={{ fontSize: "0.7rem" }}>
+              {props.status}
+            </Typography>
+          }
+        />
+      </Box>
+      <CircleIcon color={returnStatus(props.status)} />
+    </ListItemButton>
+  );
+};
+
+export default ContactItem;

src/components/contacts/Contacts.tsx

@@ -1,5 +1,14 @@
+import { Box } from "@mui/material";
+import React from "react";
+
+import Sidebar from "./Sidebar";
+
 const Contacts: React.FC = () => {
-  return <span>Contacts</span>;
+  return (
+    <Box>
+      <Sidebar></Sidebar>
+    </Box>
+  );
 };
 
 export default Contacts;

src/components/contacts/Sidebar.tsx

@@ -0,0 +1,82 @@
+import {
+  Collapse,
+  Divider,
+  Drawer,
+  List,
+  ListItemButton,
+  ListItemText,
+  Toolbar,
+} from "@mui/material";
+import React from "react";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
+import ContactInfo from "./ContactInfo";
+import Status from "./Status";
+import ContactItem from "./ContactItem";
+
+const contacts: ContactInfo[] = [
+  { name: "Taehee ...", status: Status.Online },
+  { name: "Jincheng ...", status: Status.Offline },
+  { name: "Mathew ...", status: Status.InMeeting },
+  { name: "Esteban ...", status: Status.Away },
+];
+
+const sidebarWidth = 240;
+
+const Sidebar: React.FC = () => {
+  const [favoritesOpen, setFavoritesOpen] = React.useState<boolean>(true);
+  const [teamOpen, setTeamOpen] = React.useState<boolean>(false);
+
+  return (
+    <Drawer
+      variant="permanent"
+      sx={{
+        width: sidebarWidth,
+        ["& .MuiDrawer-paper"]: { width: sidebarWidth },
+      }}
+    >
+      <Toolbar />
+      <List>
+        <ListItemText
+          primary="Contacts"
+          primaryTypographyProps={{ variant: "h6" }}
+          sx={{ textAlign: "center" }}
+        />
+        <Divider />
+        <ListItemButton onClick={() => setFavoritesOpen(!favoritesOpen)}>
+          {favoritesOpen ? <ExpandLess /> : <ExpandMore />}
+          <ListItemText primary="Favorites" sx={{ textAlign: "center" }} />
+          <ListItemText primary="10" sx={{ textAlign: "right" }} />
+        </ListItemButton>
+        <Collapse in={favoritesOpen} timeout="auto" unmountOnExit>
+          <List disablePadding>
+            {contacts.map((contact, i) => (
+              <ContactItem
+                name={contact.name}
+                status={contact.status}
+                key={i}
+              />
+            ))}
+          </List>
+        </Collapse>
+        <ListItemButton onClick={() => setTeamOpen(!teamOpen)}>
+          {teamOpen ? <ExpandLess /> : <ExpandMore />}
+          <ListItemText primary="Team" sx={{ textAlign: "center" }} />
+          <ListItemText primary="10" sx={{ textAlign: "right" }} />
+        </ListItemButton>
+        <Collapse in={teamOpen} timeout="auto" unmountOnExit>
+          <List disablePadding>
+            {contacts.map((contact, i) => (
+              <ContactItem
+                name={contact.name}
+                status={contact.status}
+                key={i}
+              />
+            ))}
+          </List>
+        </Collapse>
+      </List>
+    </Drawer>
+  );
+};
+
+export default Sidebar;

src/components/contacts/Status.tsx

@@ -0,0 +1,8 @@
+enum Status {
+  Online = "Online",
+  Offline = "Offline",
+  Away = "Away",
+  InMeeting = "In Meeting",
+}
+
+export default Status;

src/components/navbar/Navbar.tsx

@@ -3,7 +3,7 @@ import { AppBar, Box, IconButton, Toolbar, Typography } from "@mui/material";
 import { Link } from "react-router-dom";
 
 import Clock from "./Clock";
-import pngLogo from "../../assets/logo-png.png";
+import hsbcLogo from "../../assets/logo-png.png";
 import { Page } from "./Page";
 
 const pages: Page[] = [
@@ -14,15 +14,18 @@ const pages: Page[] = [
 
 const Navbar: React.FC = () => {
   return (
-    <AppBar position="static">
+    <AppBar
-      <Toolbar variant="dense" disableGutters>
+      position="fixed"
+      sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
+    >
+      <Toolbar>
         <IconButton disableRipple sx={{ mr: 2 }}>
-          <img src={pngLogo} alt="Kitty Katty!" style={{ maxWidth: 130 }} />
+          <img src={hsbcLogo} alt="HSBC Logo" style={{ maxWidth: 130 }} />
         </IconButton>
         {pages.map((page, i) => (
-          <Box flexGrow={i == pages.length - 1 ? 1 : 0} sx={{ mr: 3 }} key={i}>
+          <Box flexGrow={i == pages.length - 1 ? 1 : 0} sx={{ mr: 4 }} key={i}>
             <Typography
-              variant="h6"
+              variant="h5"
               color="inherit"
               component={Link}
               to={page.url}