Merge pull request #3 from Hack-TeeEssGee/chirag/navbar

Adding navbar

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@iconscout/react-unicons": "^1.1.6",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/components/navbar.js

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import tsgLogo from "../assets/tsg-logo.png";
+import UilBars from "@iconscout/react-unicons/icons/uil-bars";
+import UilTimes from "@iconscout/react-unicons/icons/uil-times";
+
+const Navbar = () => {
+  const [isMobNavbarOpen, setIsMobNavbarOpen] = useState(false);
+
+  return (
+    <div className="navbar" isOpen={String(isMobNavbarOpen)}>
+      <div
+        className="hamburger"
+        onClick={() => setIsMobNavbarOpen(!isMobNavbarOpen)}
+      >
+        {isMobNavbarOpen ? <UilTimes /> : <UilBars />}
+      </div>
+
+      <div className="navbar-logo">
+        <img src={tsgLogo} alt="tsg-logo"></img>
+      </div>
+
+      <div className="navbar-links">
+        <a href="/">Home</a>
+        <a href="/">Events</a>
+        <a href="/">News Bulletin</a>
+        <a href="/">Societies</a>
+        <a href="/">Student Point</a>
+        <a href="/">Quick Info</a>
+        <button>Sign In</button>
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;

src/styles/_generic.scss

@@ -34,6 +34,10 @@ button,
   }
 }
 
+a {
+  text-decoration: none;
+}
+
 h1 {
   font-size: 3.5rem;
   margin: 2rem;

src/styles/_mixins.scss

@@ -28,6 +28,13 @@ $screen-xl-max: 1449px;
   }
 }
 
+// Small and Medium devices
+@mixin smd {
+  @media (max-width: #{$screen-xl-max}) {
+    @content;
+  }
+}
+
 // Large devices
 @mixin lg {
   @media (min-width: #{$screen-xl-min}) {

src/styles/_navbar.scss

@@ -0,0 +1,76 @@
+.navbar {
+  position: fixed;
+  min-height: 10vh;
+  width: 100%;
+  background-color: rgba($primary-color, 0.8);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+
+  @include smd {
+    flex-direction: column;
+    min-height: 100vh;
+    background-color: rgba($primary-color, 1);
+
+    .navbar-logo img {
+      width: 8rem;
+    }
+
+    &[isOpen="false"] {
+      min-height: 3.5rem;
+      .navbar-logo,
+      .navbar-links {
+        display: none;
+      }
+    }
+  }
+
+  .hamburger {
+    display: none;
+    position: fixed;
+    top: 1rem;
+    left: 1.5rem;
+    transition: all 0.2s ease-in-out;
+
+    &:active {
+      transform: rotateY(90deg);
+    }
+
+    @include smd {
+      display: block;
+    }
+  }
+
+  &-links {
+    width: 60%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+    @include smd {
+      flex-direction: column;
+      min-height: 60vh;
+    }
+
+    button {
+      padding: 0.6rem 1rem;
+    }
+
+    a {
+      color: $text-primary-color;
+      padding: 0.6rem 1rem;
+      border-radius: 5px;
+      transition: all 0.2s ease-in-out;
+      font-size: 1.2rem;
+
+      &:hover {
+        background-color: $primary-color-highlight;
+      }
+    }
+  }
+
+  img {
+    width: 4rem;
+  }
+}

src/styles/_variables.scss

@@ -1,5 +1,6 @@
 $primary-grey: #eee;
 $primary-color: #7eca9c;
+$primary-color-highlight: #63b182;
 $secondary-color: #ffcc29;
 
 $heading-color: #000;

src/styles/app.scss

@@ -8,3 +8,4 @@
 
 //components
 @import "footer.scss";
+@import "navbar.scss";

src/views/landingPage.js

@@ -3,10 +3,13 @@ import Footer from "../components/footer";
 import EventCalendar from "../components/landing/eventCalendar";
 import LandingEvents from "../components/landing/landingEvents";
 import LoginPortal from "../components/landing/loginPortal";
+import Navbar from "../components/navbar";
 
 const LandingPage = () => {
   return (
     <div className="landing-page">
+      <Navbar />
+
       <div className="hero">
         <div className="hero-title">KGPverse</div>
         <div className="hero-subtitle">

yarn.lock

@@ -1293,6 +1293,13 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@iconscout/react-unicons@^1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@iconscout/react-unicons/-/react-unicons-1.1.6.tgz#4137afb831666f9c6d3b45a410610b9db9507f3a"
+  integrity sha512-BnyVvBew7Vm1lvL8+qyqjchUbkVHlDyNAlN+r5b+0P0KrkQ66BHPBuJEJ2faT89L8qRu+TohE7dHMV+bndje3Q==
+  dependencies:
+    react ">=15.0.0 <17.0.0"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -9062,7 +9069,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9373,6 +9380,15 @@ [email protected]:
   optionalDependencies:
     fsevents "^2.1.3"
 
+"react@>=15.0.0 <17.0.0":
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"