feat: added navbar

.all-contributorsrc

@@ -97,7 +97,7 @@
     }
   ],
   "contributorsPerLine": 7,
-  "projectName": "project-oregano",
+  "projectName": "project-raisin",
   "projectOwner": "dscnitrourkela",
   "repoType": "github",
   "repoHost": "https://github.com",

config/content/Navigation.js

@@ -1,37 +1,22 @@
 /* eslint-disable max-len */
-import Logo from '../../images/navLogo.svg';
 
 export default {
   title: 'Navigation',
   logo: {
-    src: Logo,
-    alt: 'Innovision 2022',
-    text: 'Innovision 2022',
+    text: 'Innovision 2k23',
   },
   navItems: [
     {
-      name: 'Technical Events',
-      link: '/technical-events',
+      name: 'Events',
+      link: '/',
     },
     {
-      name: 'Fun Events',
-      link: '/fun-events',
+      name: 'Events',
+      link: '/',
     },
     {
-      name: 'Workshop',
-      link: '/workshops',
-    },
-    {
-      name: 'Guest Lectures',
-      link: '/guest-lectures',
-    },
-    {
-      name: 'Exhibition',
-      link: '/exhibition',
-    },
-    {
-      name: 'Pro Shows',
-      link: '/proshows',
+      name: 'Events',
+      link: '/',
     },
   ],
 };

src/components/marginals/Navbar/DesktopNav.jsx

@@ -1,10 +1,12 @@
 import { Link } from 'gatsby';
 import React, { useContext } from 'react';
+import { AuthContext } from '../../../utils/Auth';
 import { nav } from '../../../../config/content';
+import Heading4 from '../../shared/Typography/Heading4';
 import { Container, NavText } from '../../shared';
-import { Logo, NavCenter, NavRight, NavSection, NavWrapper, StyledHamburger } from './styles';
+import { NavCenter, NavRight, NavSection, NavWrapper, StyledHamburger } from './styles';
 import { MenuContext } from './MenuContext';
-import AuthButton from './AuthButton';
+import Button from '../../shared/Button';
 
 // Function Returning new scroll object
 const newScrollObject = () => {
@@ -29,14 +31,16 @@ const handleScroll = (id) => {
 function DesktopNav() {
   const menuContext = useContext(MenuContext);
   const { toggleMenuOpen, menuOpen } = menuContext;
+  const authContext = useContext(AuthContext);
+  const { authenticated } = authContext;
 
   return (
     <NavSection>
       <Container>
         <NavWrapper>
           <div className='navLeft'>
             <Link to='/'>
-              <Logo src={nav.logo.src} alt={nav.logo.alt} />
+              <Heading4>{nav.logo.text}</Heading4>
             </Link>
           </div>
           <NavCenter>
@@ -60,7 +64,7 @@ function DesktopNav() {
             </ul>
           </NavCenter>
           <NavRight>
-            <AuthButton outline />
+            <Button variant='outline' text={authenticated ? 'logout' : 'Register'} />
           </NavRight>
         </NavWrapper>
       </Container>

src/components/marginals/Navbar/MobileNav.jsx

@@ -5,12 +5,13 @@ import { Link } from 'gatsby';
 
 // Components
 import { MenuContext } from './MenuContext';
+import { AuthContext } from '../../../utils/Auth';
 import { StyledMobileNav } from './styles';
 
 // Assets
 import { nav } from '../../../../config/content';
 import { NavText } from '../../shared';
-import AuthButton from './AuthButton';
+import Button from '../../shared/Button';
 
 // Function Returning new scroll object
 const newScrollObject = () => {
@@ -35,6 +36,8 @@ const handleScroll = (id) => {
 function MobileNav() {
   const menuContext = useContext(MenuContext);
   const { toggleMenuOpen } = menuContext;
+  const authContext = useContext(AuthContext);
+  const { authenticated } = authContext;
 
   const onMenuClick = (id) => {
     handleScroll(id);
@@ -61,7 +64,7 @@ function MobileNav() {
             </li>
           ))}
         </ul>
-        <AuthButton outline />
+        <Button variant='outline' text={authenticated ? 'logout' : 'Register'} />
       </div>
     </StyledMobileNav>
   );

src/components/marginals/Navbar/styles.jsx

@@ -12,68 +12,62 @@ const fadeDown = keyframes`
     }
 `;
 
-export const Logo = styled.img`
-  height: 50px;
-  width: auto;
-  @media (max-width: 1023px) {
-    height: 40px;
-  }
-`;
-
 export const NavSection = styled.header`
   position: fixed;
   top: 0;
   width: 100%;
   box-shadow: 0 0 16px 0 rgba(255, 255, 255, 0.36);
   background-color: var(--background-primary);
-  padding-top: 1em;
-  padding-bottom: 1em;
   z-index: 40;
-  .navHomeLink {
-    display: inline-flex;
-    align-items: center;
-    text-decoration: none;
-    &:hover {
-    }
-  }
   .navLinkList {
     display: none;
     list-style: none;
   }
   .navLinkItem {
-    margin-right: 32px;
     text-decoration: none;
+    padding: 0px 28px;
+    position: relative;
+    display: inline-block;
     &:last-child {
       margin-right: 0;
     }
     &:hover {
       cursor: pointer;
     }
+    &::before {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 1.5px;
+      bottom: 0;
+      left: 50%;
+      display: block;
+      background: var(--brand-gradient);
+      transition:
+        width 0.3s ease 0s,
+        left 0.3s ease 0s;
+    }
+    &:hover::before {
+      width: 100%;
+      left: 0;
+    }
   }
   .navLink {
     text-decoration: none;
+    padding: 12px 0px;
     color: var(--text-color-tertiary);
     &:hover {
       color: var(--text-color-secondary);
     }
   }
-  .no-underline {
-    display: flex;
-    align-items: center;
-  }
   @media (min-width: 1023px) {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
+    padding-top: 0;
+    padding-bottom: 0;
     .navLinkList {
       display: flex;
       justify-content: center;
     }
   }
-  @media (max-width: 1023px) {
-    .sponsor-sec {
-      display: none;
-    }
-  }
 `;
 
 export const NavWrapper = styled.nav`
@@ -83,6 +77,7 @@ export const NavWrapper = styled.nav`
     w-full
     gap-7
     lg:justify-between
+    h-[68px]
     `}
 `;
 
@@ -127,7 +122,7 @@ export const StyledMobileNav = styled.section`
     margin-bottom: 1em;
   }
   .link {
-    font-size: 1.2em;
+    font-size: 14px;
     text-decoration: none;
   }
 `;

src/components/shared/Container.jsx

@@ -8,11 +8,12 @@ const Wrapper = styled.div`
   }
   ${tw`
         w-11/12
-        max-w-7xl
+        lg:max-w-7xl
+        max-w-full
         my-0
-        mx-auto
-        p-2.5
-        sm:p-0
+        mx-[60px]
+        lg:mx-auto
+        p-0
         overflow-y-hidden
     `}
 `;

src/components/shared/Typography/NavText.jsx

@@ -4,14 +4,11 @@ import tw from 'twin.macro';
 export default styled.p`
   font-weight: ${(props) => (props.bold ? 'bold' : 'normal')};
   ${tw`
-    text-base
+    text-[14px]
     font-Inter
-    2xl:text-base
-    lg:text-base
-    md:text-sm
-    sm:text-sm
-    leading-6
-    md:leading-5
+    font-[300]
+    leading-[20px]
+    md:leading-[22px]
     text-color-primary
   `}
 `;

src/pages/playground.js

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useContext } from 'react';
+import React from 'react';
 import { Helmet } from 'react-helmet';
+import { Layout } from '../components';
 import FAQSection from '../components/FAQSection/FAQSection';
 
 const Playground = () => (
@@ -10,7 +11,9 @@ const Playground = () => (
       <title>Playground</title>
       <meta name='description' content='This is playground' />
     </Helmet>
-    <FAQSection />
+    <Layout>
+      <FAQSection />
+    </Layout>
   </>
 );