Skip to content

Commit e199443

Browse files
Zerofour04Zerofour04
committed
Added Sidebar as Navigation
-Reworked Header -Reworked LogOut -Codecleanup -Separated in components
1 parent 73fffac commit e199443

18 files changed

+1680
-142
lines changed

‎.gitattributes

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎package-lock.json

Lines changed: 1381 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,32 @@
66
"@azure/msal-react": "^1.3.1",
77
"@emotion/react": "^11.8.2",
88
"@emotion/styled": "^11.8.1",
9+
"@fortawesome/fontawesome-svg-core": "^6.1.1",
10+
"@fortawesome/free-regular-svg-icons": "^6.1.1",
11+
"@fortawesome/free-solid-svg-icons": "^6.1.1",
12+
"@fortawesome/react-fontawesome": "^0.1.18",
913
"@mui/material": "^5.5.2",
1014
"@reduxjs/toolkit": "^1.8.0",
1115
"@testing-library/jest-dom": "^5.16.2",
1216
"@testing-library/react": "^12.1.4",
1317
"@testing-library/user-event": "^13.5.0",
18+
"@trendmicro/react-sidenav": "^0.5.0",
1419
"@types/jest": "^27.4.1",
1520
"@types/node": "^16.11.26",
1621
"@types/react": "^17.0.41",
1722
"@types/react-dom": "^17.0.14",
1823
"axios": "^0.26.1",
1924
"bootstrap": "^5.1.3",
25+
"cdbreact": "^1.5.1",
2026
"i": "^0.3.7",
2127
"npm": "^8.5.5",
2228
"react": "^17.0.2",
2329
"react-bootstrap": "^2.2.1",
30+
"react-bootstrap-sidebar-menu": "^2.0.1",
2431
"react-dom": "^17.0.2",
32+
"react-icons": "^4.3.1",
2533
"react-redux": "^7.2.6",
34+
"react-router": "^6.2.2",
2635
"react-router-dom": "^6.2.2",
2736
"react-scripts": "5.0.0",
2837
"typescript": "^4.6.2",

‎src/App.tsx

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,26 @@ import React from 'react';
22
import { MsalAuthenticationTemplate, useMsal } from '@azure/msal-react';
33
import { InteractionType } from "@azure/msal-browser";
44
import { authRequest } from "./config/msalConfig";
5-
import Header from './component/Header';
5+
import Header from './component/Header/Header';
66
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
77
import headerLogo from './pictures/logo-dialogdata.png'
88

99
import "./App.css";
10-
import { Button, Container, Nav, Navbar, NavbarBrand, NavDropdown } from 'react-bootstrap';
10+
import { Button, Container, Nav, Navbar, NavbarBrand, NavDropdown, Row, Col, Card, Form } from 'react-bootstrap';
1111
import 'bootstrap/dist/css/bootstrap.min.css';
1212

1313
import { useSelector } from 'react-redux';
1414
import { selectLoggedInUser } from './store/employee/employeeSelectors';
15-
import Page from './component/page';
15+
import Page from './component/Sidebar/page';
16+
import Sidebar from './component/Sidebar/Sidebar';
17+
18+
import './component/Sidebar/Sidebar.css'
1619

1720

1821
const App = () => {
1922

2023
// @ts-ignore
21-
const ErrorComponent = (error:any) => {
24+
const ErrorComponent = (error: any) => {
2225
return <p>An Error Occurred: {error.error}</p>;
2326
}
2427

@@ -27,9 +30,13 @@ const App = () => {
2730
interactionType={InteractionType.Redirect}
2831
authenticationRequest={authRequest}
2932
errorComponent={ErrorComponent}>
30-
<Header/>
31-
<Page/>
32-
</MsalAuthenticationTemplate>
33+
<main>
34+
35+
<Header /> <Sidebar isOpen={false} />
36+
</main>
37+
38+
39+
</MsalAuthenticationTemplate >
3340
);
3441
};
3542

‎src/component/Dropdown.tsx

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/component/DropdownDetectOutside.tsx renamed to ‎src/component/Header/DropdownDetectOutside.tsx

File renamed without changes.

‎src/component/Header/Header.css

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.menu-container {
2+
position: relative;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
}
7+
8+
.menu-trigger {
9+
background: #ffffff;
10+
border-radius: 90px;
11+
cursor: pointer;
12+
display: flex;
13+
justify-content: space-between;
14+
align-items: center;
15+
padding: 4px 6px;
16+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
17+
border: none;
18+
vertical-align: middle;
19+
transition: box-shadow 0.4s ease;
20+
margin-left: auto; /* Strictly for positioning */
21+
}
22+
23+
.menu-trigger:hover {
24+
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
25+
}
26+
27+
.menu-trigger span {
28+
font-weight: 700;
29+
vertical-align: middle;
30+
font-size: 14px;
31+
margin: 0 10px;
32+
}
33+
34+
.menu-trigger img {
35+
border-radius: 90px;
36+
}
37+
38+
.menu {
39+
background: #ffffff;
40+
border-radius: 8px;
41+
position: absolute;
42+
top: 60px;
43+
right: 0;
44+
width: 300px;
45+
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
46+
opacity: 0;
47+
visibility: hidden;
48+
transform: translateY(-20px);
49+
transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
50+
}
51+
52+
.menu.active {
53+
opacity: 1;
54+
visibility: visible;
55+
transform: translateY(0);
56+
}
57+
58+
.menu ul {
59+
list-style: none;
60+
padding: 0;
61+
margin: 0;
62+
}
63+
64+
.menu li {
65+
border-bottom: 1px solid #dddddd;
66+
}
67+
68+
.menu li a {
69+
text-decoration: none;
70+
color: #333333;
71+
padding: 15px 20px;
72+
display: block;
73+
}

‎src/component/Header.tsx renamed to ‎src/component/Header/Header.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
11

22
import { Button, Container, Nav, Navbar } from 'react-bootstrap';
33
import { useSelector } from 'react-redux';
4-
import { selectLoggedInUser } from '../store/employee/employeeSelectors';
4+
import { selectLoggedInUser } from '../../store/employee/employeeSelectors';
55
import { useMsal } from '@azure/msal-react';
66
import { Route, Routes } from "react-router-dom";
77
import headerLogo from ''
88
import Avatar from '@mui/material/Avatar';
9-
import DropDownMenu from './Dropdown';
109
import React, { useState, useRef } from "react";
1110
import { useDetectOutsideClick } from './DropdownDetectOutside';
1211
import { ClassNames } from '@emotion/react';
13-
import "../App.css";
12+
import "./Header.css";
1413

1514
const Header = () => {
1615

1716
const msal = useMsal()
1817
console.log(msal)
19-
// @ts-ignore
18+
2019
const employee = useSelector(selectLoggedInUser)
2120
const { instance, accounts } = useMsal();
2221

@@ -63,7 +62,7 @@ const Header = () => {
6362
<nav ref={dropdownRef} className={`menu ${isActive ? 'active' : 'inactive'}`}>
6463
<ul>
6564
<li><a onClick={logOutHandler}>Log Out</a></li>
66-
<li><a href="https://dialogdata.de/">Hompage</a></li>
65+
<li><a href="">Hompage</a></li>
6766
</ul>
6867
</nav>
6968
</div>

‎src/component/Sidebar/Sidebar.css

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
2+
3+
4+
:root {
5+
--navBg: #000a44;
6+
}
7+
8+
/* .navbar {
9+
background-color: var(--navBg);
10+
height: 80px;
11+
display: flex;
12+
justify-content: start;
13+
align-items: center;
14+
} */
15+
16+
.caret {
17+
transition: transform 0.5s ease-out;
18+
transform: rotateY(0deg);
19+
transform-origin: center;
20+
}
21+
22+
.caret.open {
23+
transform: rotateY(-180deg);
24+
}
25+
26+
.icon {
27+
padding: 2px;
28+
cursor: pointer;
29+
}
30+
31+
32+
.menu-bars {
33+
margin-left: 2rem;
34+
font-size: 2rem;
35+
background: none;
36+
}
37+
38+
.nav-menu {
39+
background-color: var(--navBg);
40+
width: 250px;
41+
height: 100vh;
42+
display: flex;
43+
justify-content: center;
44+
position: fixed;
45+
top: 0;
46+
left: -100%;
47+
transition: 850ms;
48+
}
49+
50+
.nav-menu.active {
51+
left: 0;
52+
transition: 350ms;
53+
}
54+
55+
.nav-text {
56+
display: flex;
57+
justify-content: start;
58+
align-items: center;
59+
padding: 8px 0 8px 16px;
60+
list-style: none;
61+
height: 60px;
62+
}
63+
64+
.nav-text a {
65+
text-decoration: none;
66+
color: #f5f5f5;
67+
font-size: 18px;
68+
width: 95%;
69+
height: 100%;
70+
display: flex;
71+
align-items: center;
72+
padding: 0 16px;
73+
border-radius: 4px;
74+
}
75+
76+
.nav-text a:hover {
77+
background-color: #1a83ff;
78+
}
79+
80+
.nav-menu-items {
81+
width: 100%;
82+
padding: 0;
83+
}
84+
85+
.navbar-toggle {
86+
background-color: var(--navBg);
87+
width: 100%;
88+
height: 80px;
89+
display: flex;
90+
justify-content: start;
91+
align-items: center;
92+
}
93+
94+
span {
95+
margin-left: 16px;
96+
}
97+

‎src/component/Sidebar/Sidebar.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, { useState } from 'react';
2+
import './Sidebar.css'
3+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4+
import { faAnglesLeft, faTimes, faUser } from '@fortawesome/free-solid-svg-icons';
5+
import { SidebarData } from "./SidebarData";
6+
import { IconContext } from "react-icons";
7+
import { Link } from "react-router-dom";
8+
import * as FaIcons from "react-icons/fa"; //Now i get access to all the icons
9+
import * as AiIcons from "react-icons/ai";
10+
import { Button } from 'react-bootstrap';
11+
12+
13+
14+
const Sidebar = (props: any) => {
15+
16+
const [sidebar, setSidebar] = useState(false);
17+
const [isOpen, setOpen] = useState(true)
18+
const showSidebar = () => setSidebar(!sidebar);
19+
return (
20+
<>
21+
<IconContext.Provider value={{ color: "#FFF" }}>
22+
<div className="navbar">
23+
<Link to="#" className="menu-bars">
24+
<Button onClick={showSidebar}>Sidebar</Button>
25+
26+
<div className="actions">
27+
<div className={'caret' + (isOpen ? '' : ' open')}>
28+
<FontAwesomeIcon className="icon" onClick={() => {setOpen(!isOpen); showSidebar()}} icon={faAnglesLeft}/>
29+
</div>
30+
</div>
31+
32+
</Link>
33+
</div>
34+
<nav className={sidebar ? "nav-menu active" : "nav-menu"}>
35+
<ul className="nav-menu-items" onClick={showSidebar}>
36+
<li className="navbar-toggle">
37+
<Link to="#" className="menu-bars">
38+
<AiIcons.AiOutlineClose />
39+
</Link>
40+
</li>
41+
42+
{SidebarData.map((item, index) => {
43+
return (
44+
<li key={index} className={item.cName}>
45+
<Link to={item.path}>
46+
{/* <FontAwesomeIcon icon={item.icon}/>
47+
*/} <span>{item.title}</span>
48+
</Link>
49+
</li>
50+
);
51+
})}
52+
</ul>
53+
</nav>
54+
</IconContext.Provider>
55+
</>
56+
);
57+
};
58+
59+
export default Sidebar;

0 commit comments

Comments
 (0)