feat: add navbar

dscnitrourkela · Sep 26, 2023 · 3ab2207 · 3ab2207
1 parent 4a329ba
commit 3ab2207
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 114 deletions.
diff --git a/config/content/Navigation.js b/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: '/',
     },
   ],
 };
diff --git a/src/components/marginals/Navbar/AuthButton.jsx b/src/components/marginals/Navbar/AuthButton.jsx
@@ -2,26 +2,17 @@ import React, { useContext } from 'react';
 import { AuthContext } from '../../../utils/Auth';
 import { LinkButton } from '../../shared';
 
-const AuthButton = ({ text, paddingY, paddingX, outline, bold }) => {
+const AuthButton = ({ text, paddingY, paddingX }) => {
   const authContext = useContext(AuthContext);
   const { login, logout, authenticated } = authContext;
 
-  return outline ? (
+  return (
     <LinkButton
       outline
       method={authenticated ? logout : login}
-      text={text || (authenticated ? 'logout' : 'Login')}
+      text={text || (authenticated ? 'logout' : 'Register For Event')}
       paddingY={paddingY}
       paddingX={paddingX}
-      bold={bold}
-    />
-  ) : (
-    <LinkButton
-      method={authenticated ? logout : login}
-      text={text || (authenticated ? 'logout' : 'Login')}
-      paddingY={paddingY}
-      paddingX={paddingX}
-      bold={bold}
     />
   );
 };

diff --git a/src/components/marginals/Navbar/DesktopNav.jsx b/src/components/marginals/Navbar/DesktopNav.jsx
@@ -1,8 +1,9 @@
 import { Link } from 'gatsby';
 import React, { useContext } from 'react';
 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';
 
@@ -36,7 +37,7 @@ function DesktopNav() {
         <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 +61,7 @@ function DesktopNav() {
             </ul>
           </NavCenter>
           <NavRight>
-            <AuthButton outline />
+            <AuthButton />
           </NavRight>
         </NavWrapper>
       </Container>

diff --git a/src/components/marginals/Navbar/styles.jsx b/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: linear-gradient(88.29deg, #ffb8ff 1.56%, #b9cdff 94.54%);
+      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;
   }
 `;

diff --git a/src/components/shared/Container.jsx b/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
     `}
 `;

diff --git a/src/components/shared/LinkButton.jsx b/src/components/shared/LinkButton.jsx
@@ -5,47 +5,25 @@ import tw from 'twin.macro';
 import ButtonText from './Typography/ButtonText';
 
 const ButtonContainer = styled.button`
-  background: ${(props) =>
-    (props.outline && 'none') || (props.disabled && 'rgba(74, 74, 74, 0.5)') || '#ffffff'};
-  border: ${(props) => (props.outline && '1px solid #ffffff') || 'none'};
-  color: ${(props) => (props.outline && '#ffffff') || (props.disabled && '#ffffff') || '#000000'};
-  padding: ${(props) => `${props.paddingY || '12px'} ${props.paddingX || '36px'}`};
-  cursor: ${(props) => (props.disabled && 'not-allowed') || 'pointer'};
-  :hover {
-    background: ${(props) =>
-      (props.outline && '#ffffff') || (props.disabled && 'rgba(74, 74, 74, 0.5)') || '#ECFDFF'};
-    color: ${(props) => (props.disabled && '#ffffff') || '#000000'};
-  }
-  transition: all 0.1s linear;
-  ${tw`
-    rounded-4xl
-    w-max
-  `}
+  border: 1px solid #ffffff;
+  color: var(--brand-gradient);
+  padding: ${(props) => `${props.paddingY || '14px'} ${props.paddingX || '18px'}`};
+  cursor: pointer;
+  ${tw`w-max`}
 `;
 
-const LinkButton = ({
-  link,
-  text,
-  paddingY,
-  paddingX,
-  bold,
-  disabled = false,
-  outline = false,
-  method = undefined,
-}) => (
-  <ButtonContainer
-    paddingY={paddingY}
-    paddingX={paddingX}
-    onClick={method}
-    disabled={disabled}
-    outline={outline}
-  >
+const LinkButton = ({ link, text, paddingY, paddingX, disabled = false, method = undefined }) => (
+  <ButtonContainer paddingY={paddingY} paddingX={paddingX} onClick={method} disabled={disabled}>
     {!disabled && link ? (
       <Link to={link}>
-        <ButtonText bold={bold}>{text}</ButtonText>
+        <ButtonText style={{ fontWeight: 500 }} outline>
+          {text}
+        </ButtonText>
       </Link>
     ) : (
-      <ButtonText bold={bold}>{text}</ButtonText>
+      <ButtonText style={{ fontWeight: 500 }} outline>
+        {text}
+      </ButtonText>
     )}
   </ButtonContainer>
 );

diff --git a/src/components/shared/Typography/NavText.jsx b/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
   `}
 `;
diff --git a/src/pages/playground.js b/src/pages/playground.js
@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 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>
   </>
 );