diff options
Diffstat (limited to 'frontend/src/components')
-rw-r--r-- | frontend/src/components/Navbar.js | 72 | ||||
-rw-r--r-- | frontend/src/components/NavbarElements.js | 40 | ||||
-rw-r--r-- | frontend/src/components/logo192.png | bin | 0 -> 115893 bytes |
3 files changed, 112 insertions, 0 deletions
diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js new file mode 100644 index 0000000..e7b4c58 --- /dev/null +++ b/frontend/src/components/Navbar.js @@ -0,0 +1,72 @@ +import React from 'react'; +import { NavLink} from "./NavbarElements"; +import '@popperjs/core'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import { Navbar, Nav, Button, Badge, Dropdown } from 'react-bootstrap'; + +function NavbarApp() { + return ( + <Navbar expand="lg" variant="light" bg="body-tertiary"> + <div className="container-fluid"> + <Navbar.Toggle aria-controls="navbarSupportedContent" /> + <Navbar.Collapse id="navbarSupportedContent"> + <NavLink to="/" className="mt-2 mt-lg-0"> + <img + src="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" + height="35" + alt="Logo" + loading="lazy" + /></NavLink> + <Nav className="me-auto mb-2 mb-lg-0"> + <NavLink to="/">Dashboard</NavLink> + <NavLink to="/about" activeStyle>About</NavLink> + <NavLink to="/contact" activeStyle>Contact</NavLink> + <NavLink to="/courses" activeStyle>Courses</NavLink> + </Nav> + </Navbar.Collapse> + <div className="d-flex align-items-center"> + <a href="#" className="text-reset me-3"> + + </a> + <Dropdown> + <Dropdown.Toggle + variant="light" + className="text-reset me-3 hidden-arrow" + > + <i className="fas fa-bell"></i> + <Badge pill bg="danger" className="rounded-pill"> + 69 + </Badge> + </Dropdown.Toggle> + <Dropdown.Menu align="end"> + <Dropdown.Item href="#">Some news</Dropdown.Item> + <Dropdown.Item href="#">Another news</Dropdown.Item> + <Dropdown.Item href="#">Something else here</Dropdown.Item> + </Dropdown.Menu> + </Dropdown> + <Dropdown> + <Dropdown.Toggle + variant="light" + className="d-flex align-items-center hidden-arrow" + > + <img + src="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png" + className="rounded-circle" + height="25" + alt="Poza de profil" + loading="lazy" + /> + </Dropdown.Toggle> + <Dropdown.Menu align="end"> + <Dropdown.Item href="#">Profilul meu</Dropdown.Item> + <Dropdown.Item href="#">Setari</Dropdown.Item> + <Dropdown.Item href="#">Logout</Dropdown.Item> + </Dropdown.Menu> + </Dropdown> + </div> + </div> + </Navbar> + ); +} + +export default NavbarApp; diff --git a/frontend/src/components/NavbarElements.js b/frontend/src/components/NavbarElements.js new file mode 100644 index 0000000..99d8223 --- /dev/null +++ b/frontend/src/components/NavbarElements.js @@ -0,0 +1,40 @@ +// Filename - ./components/Navbar.js + +import { NavLink as Link } from "react-router-dom"; +import styled from "styled-components"; + +export const Nav = styled.nav` + background: #ffb3ff; + height: 85px; + display: flex; + justify-content: space-between; + padding: 0.2rem calc((100vw - 1000px) / 2); + z-index: 12; +`; + +export const NavLink = styled(Link)` + color: #808080; + display: flex; + align-items: center; + text-decoration: none; + padding: 0 1rem; + height: 100%; + cursor: pointer; + &.active { + color: #9400FF; + } +`; + +export const NavMenu = styled.div` + display: flex; + align-items: center; + margin-right: -24px; + /* Second Nav */ + /* margin-right: 24px; */ + /* Third Nav */ + /* width: 100vw; +white-space: nowrap; */ + @media screen and (max-width: 768px) { + display: none; + } +`; diff --git a/frontend/src/components/logo192.png b/frontend/src/components/logo192.png Binary files differnew file mode 100644 index 0000000..e14da01 --- /dev/null +++ b/frontend/src/components/logo192.png |