summaryrefslogtreecommitdiff
path: root/frontend/src/components/NavbarElements.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/NavbarElements.js')
-rw-r--r--frontend/src/components/NavbarElements.js40
1 files changed, 40 insertions, 0 deletions
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;
+ }
+`;