Merge pull request #46 from bluewave-labs/header-left-menu

Header-Left menu

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

frontend/src/App.jsx

@@ -1,5 +1,5 @@
 import { Routes, Route } from "react-router-dom";
-import Home from "./scenes/global/Home";
+import Home from "./scenes/home/Home";
 import LoginPage from "./scenes/login/LoginPage";
 import CreateAccountPage from "./scenes/login/CreateAccountPage";
 import PasswordResetPage from "./scenes/login/PassswordResetPage";

frontend/src/components/DropdownMenu/DropdownMenu.css

@@ -0,0 +1,43 @@
+.dropdown-menu {
+    position: absolute;
+    top: calc(8vh + 10px); 
+    right: 3px;
+    min-width: fit-content;
+    z-index: 1;
+}
+
+.dropdown-menu .MuiListItem-root {
+    cursor: pointer;
+}
+
+.dropdown-menu .MuiListItem-root:hover {
+    background-color: #F9FAFB;
+}
+
+.dropdown-item .MuiTypography-root{
+    width: 100%; 
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 24px;
+    color: #344054;
+    display: inline;
+    justify-content: center;
+  }
+
+  .dropdown-item {
+    padding: 4px 12px !important; 
+  }
+
+  .dropdown-list{
+    padding-top: 4px !important;
+    padding-bottom: 4px !important;
+  }
+
+  .dropdown-menu .MuiSvgIcon-root{
+    color:#667085;
+  }
+
+  .dropdown-menu .MuiListItemIcon-root {
+    min-width: 2rem; 
+  }
+

frontend/src/components/DropdownMenu/DropdownMenu.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { List, ListItemButton, ListItemText, Paper, ListItemIcon } from '@mui/material';
+import './DropdownMenu.css';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import Person2OutlinedIcon from '@mui/icons-material/Person2Outlined';
+import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
+import { useNavigate } from 'react-router-dom';
+
+const DropdownMenu = () => {
+
+    const navigate = useNavigate();
+    const handleLoginClick = () => {
+      navigate('/login');
+    };
+
+    return (
+        <Paper className="dropdown-menu" elevation={3}>
+            <List className='dropdown-list'>
+                <ListItemButton className="dropdown-item">
+                    <ListItemIcon>
+                        <Person2OutlinedIcon />
+                    </ListItemIcon>
+                    <ListItemText primary="Profile" />
+                </ListItemButton>
+                <ListItemButton className="dropdown-item">
+                    <ListItemIcon>
+                        <SettingsOutlinedIcon />
+                    </ListItemIcon>
+                    <ListItemText primary="Settings" />
+                </ListItemButton>
+                <ListItemButton className="dropdown-item">
+                    <ListItemIcon>
+                        <LogoutOutlinedIcon />
+                    </ListItemIcon>
+                    <ListItemText primary="Logout" onClick={handleLoginClick}/>
+                </ListItemButton>
+            </List>
+        </Paper>
+    );
+}
+
+export default DropdownMenu;

frontend/src/components/Header/Header.css

@@ -0,0 +1,68 @@
+
+.top-banner {
+    background-color: #ffffff; 
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1);  */
+    height: 8vh;
+    /* position: fixed;  */
+    width: 100%; 
+    top: 0; 
+    left: 0; 
+    box-shadow: 0px 3px 3px -3px #10182808;
+    box-shadow: 0px 4px 24px -4px #10182814;
+
+  }
+
+  .user-info {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+  }
+
+.user-picture {
+    width: 40px; 
+    height: 40px; 
+    border-radius: 50%; 
+    margin-right: 10px; 
+    border: 0.5px solid #000000; 
+  }
+
+
+  .user-details {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .user-name{
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 20px;
+    color: #344054;
+  }
+
+  .user-role {
+    margin: 0; 
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #344054;
+  }
+
+  .logo {
+    color: #FF834E;
+    font-size: 20px; 
+    font-weight: 600;
+  }
+
+.dropdown-button {
+    background-color: transparent; 
+    border: none; 
+    cursor: pointer; 
+    padding: 0.4em 0.4em;
+    margin: 1px
+  }
+
+

frontend/src/components/Header/Header.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import './Header.css'; 
+import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
+import DropdownMenu from '../DropdownMenu/DropdownMenu';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+
+function Header({ user }) {
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+    const handleDropdownClick = () => {
+        setIsDropdownOpen(!isDropdownOpen);
+    };
+
+    return (
+        <div className="top-banner">
+            <div className="logo">BlueWave Onboard</div>
+            <div className="user-info">
+                <img src="/vendetta.png" alt="User" className="user-picture" />
+                <div className="user-details">
+                    <div className="user-name">{user.name}</div>
+                    <div className="user-role">{user.role}</div>
+                </div>
+                <button className="dropdown-button" onClick={handleDropdownClick}>
+                {isDropdownOpen ? <KeyboardArrowUpIcon /> : <><KeyboardArrowDownOutlinedIcon /><DropdownMenu /></>}
+                </button>
+            </div>
+        </div>
+    );
+}
+
+export default Header;

frontend/src/components/LeftMenu/LeftMenu.css

@@ -0,0 +1,53 @@
+
+.left-menu {
+    display: flex;
+    width: 15vw;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+    /* background-color: #ffffff;  */
+    padding: 0px 8px; 
+    /* position: fixed;  */
+    box-shadow: 0px 4px 6px rgba(81, 81, 81, 0.1); 
+    border-right: 1px solid #EBEBEB
+  }
+  .left-menu .MuiSvgIcon-root{
+    color:#667085;
+  }
+  .title .MuiTypography-root{
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 38px;
+    color: #98A2B3;
+    margin-left: 8px;
+    margin-top: 8px;
+  }
+
+  .left-menu .MuiListItemIcon-root {
+    min-width: 2rem; 
+  }
+
+
+  .search-item {
+    padding-top: 4px; 
+    padding-bottom: 4px; 
+  }
+
+  .left-menu .MuiListItemText-root {
+    margin: 0; 
+  }
+
+  .menu-item .MuiTypography-root{
+    width: 100%; 
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 24px;
+    color: #344054;
+    display: inline;
+    justify-content: center;
+    /* padding: 0px 50px;  */
+  }
+
+  .bottom-menu{
+    margin-bottom: 20px;
+  }

frontend/src/components/LeftMenu/LeftMenu.jsx

@@ -0,0 +1,105 @@
+
+import React from 'react';
+import { List, ListItem, ListItemIcon, ListItemText, TextField, InputAdornment, Divider, ListItemButton} from '@mui/material';
+import DirectionsBusFilledOutlinedIcon from '@mui/icons-material/DirectionsBusFilledOutlined';
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
+import SportsSoccerOutlinedIcon from '@mui/icons-material/SportsSoccerOutlined';
+import TipsAndUpdatesOutlinedIcon from '@mui/icons-material/TipsAndUpdatesOutlined';
+import ChecklistOutlinedIcon from '@mui/icons-material/ChecklistOutlined';
+import SmsOutlinedIcon from '@mui/icons-material/SmsOutlined';
+import LinkOutlinedIcon from '@mui/icons-material/LinkOutlined';
+import ListOutlinedIcon from '@mui/icons-material/ListOutlined';
+import MarkChatUnreadOutlinedIcon from '@mui/icons-material/MarkChatUnreadOutlined';
+import './LeftMenu.css'; 
+import { useNavigate } from 'react-router-dom';
+
+function LeftMenu() {
+  const navigate = useNavigate();
+  const handleHomeClick = () => {
+    navigate('/');
+  };
+
+  return (
+    <div className="left-menu">
+      <List>
+        <ListItemButton className="menu-item" style={{backgroundColor: "#F9FAFB"}} onClick={handleHomeClick}>
+          <ListItemIcon>
+            <HomeOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary="Home" />
+        </ListItemButton>
+
+        <ListItemText primary="SERVE A CONTENT" className="title"/>
+
+        <ListItemButton className="menu-item">
+          <ListItemIcon>
+            <DirectionsBusFilledOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary="Tours" />
+        </ListItemButton>
+
+        <ListItemButton className="menu-item">
+          <ListItemIcon>
+            <TipsAndUpdatesOutlinedIcon /> 
+          </ListItemIcon>
+          <ListItemText primary="Hints" />
+        </ListItemButton>
+        <ListItemButton className="menu-item">
+          <ListItemIcon>
+            <ChecklistOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary="Checklist" />
+        </ListItemButton>
+
+        <ListItemText primary="MAKE AN ANNOUNCEMENT" className="title"/>
+
+        <ListItemButton className="menu-item">
+          <ListItemIcon>
+            <SmsOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary="Popups" />
+        </ListItemButton>
+        <ListItemButton className="menu-item">
+          <ListItemIcon>
+          <SportsSoccerOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary="Banners" />
+        </ListItemButton>
+        <ListItemButton className="menu-item">
+          <ListItemIcon>
+            <LinkOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary="Helper Links" />
+        </ListItemButton>
+
+
+        <ListItemText primary="GET FEEDBACK" className="title"/>
+
+        <ListItemButton className="menu-item">
+          <ListItemIcon>
+            <MarkChatUnreadOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary="Feedback" />
+        </ListItemButton>
+        <ListItemButton className="menu-item">
+          <ListItemIcon>
+            <ListOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary="Surveys" />
+        </ListItemButton>
+
+      </List>
+      <div className="bottom-menu">
+      <Divider />
+        <ListItemButton className="menu-item">
+          <ListItemIcon>
+            <SportsSoccerOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary="Support" />
+        </ListItemButton>
+      </div>
+    </div>
+  );
+}
+
+export default LeftMenu;

frontend/src/components/PopUpMessages/PopUpMessages.module.scss

@@ -31,7 +31,6 @@
       margin: 0;
       margin-top: 3px;
     }
-
     h3{
       @include text-style(regular);
       color : var(--third-text-color);
@@ -53,11 +52,11 @@
         margin: 0;
         padding: 0;
       }
-    
+
       .acceptButton{
         color: var(--main-purple);
       }
-    
+
       .dismiss{
         margin-right: 15px;
         color: var(--third-text-color);

frontend/src/components/templates/HomePageTemplate.css

@@ -0,0 +1,11 @@
+.container{
+    display: flex;
+    flex-direction: column;
+    width:100vw;
+    height:100vh;
+}
+
+.content-container{
+    height: 100%;
+    display: flex;
+}