Navbar gatsby

gatsby-browser.js

@@ -0,0 +1 @@
+import 'bootstrap/dist/css/bootstrap.min.css';

gatsby-config.js

@@ -1,7 +1,7 @@
 module.exports = {
     siteMetadata: {
       title: `site`,
-        siteUrl: `https://xn--usofts-vuab.com.br`,
+      siteUrl: `https://xn--usofts-vuab.com.br`,
     },
     plugins: [
       {
@@ -20,7 +20,6 @@ module.exports = {
           },
         },
       },
-      '@chakra-ui/gatsby-plugin',
       {
         resolve: `gatsby-plugin-typescript`,
         options: {
@@ -29,11 +28,20 @@ module.exports = {
           allExtensions: true, // defaults to false
         },
       },
+      `gatsby-plugin-sass`,
       {
         resolve: `gatsby-plugin-styled-components`,
         options: {
           // Add any options here
         },
-      }
+      },
+      {
+        resolve: "gatsby-plugin-react-svg",
+        options: {
+            rule: {
+                include: `/svg/`,
+            },
+        },
+    },
     ]
 }

package.json

@@ -15,18 +15,21 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@chakra-ui/gatsby-plugin": "^2.0.2",
-    "@chakra-ui/react": "^1.8.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "babel-plugin-styled-components": "^2.0.2",
+    "bootstrap": "5.1.3",
     "framer-motion": "^6.2.3",
     "gatsby": "^4.6.0",
+    "gatsby-plugin-react-svg": "^3.1.0",
+    "gatsby-plugin-sass": "^5.6.0",
     "gatsby-plugin-google-gtag": "^4.6.0",
     "gatsby-plugin-styled-components": "^5.6.0",
     "plyr": "^3.6.12",
     "react": "^17.0.1",
+    "react-bootstrap": "^2.1.2",
     "react-dom": "^17.0.1",
+    "react-icons": "^4.3.1",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
@@ -47,6 +50,7 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "gatsby-plugin-typescript": "^4.6.0",
     "prettier": "^2.5.1",
+    "sass": "^1.49.7",
     "stylelint-config-prettier": "^9.0.3",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "^4.2.4"

src/@types/declaration.d.ts

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.module.scss';

src/components/Navbar.tsx

@@ -0,0 +1,159 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable react/button-has-type */
+/* eslint-disable arrow-body-style */
+/* eslint-disable react/function-component-definition */
+import React from 'react';
+import {
+  Nav,
+  Button,
+  Navbar as NavbarBase,
+  Container,
+  Col,
+} from 'react-bootstrap';
+import styled from 'styled-components';
+import { Link } from 'gatsby';
+import logo from '../images/logo.svg';
+
+interface LinkProps {
+  href?: string;
+}
+
+interface NavbarProps {
+  path: string;
+}
+
+const Navbar: React.FC<NavbarProps> = ({ path }) => {
+  return (
+    <NavbarBaseStyled>
+      <ContainerStyled>
+        <LogoStyled href="/" as={Col}>
+          <img
+            src={logo}
+            width="113"
+            height="57"
+            className="d-inline-block align-top"
+            alt="React Bootstrap logo"
+          />
+        </LogoStyled>
+
+        <NavStyled className="me-auto" as={Col}>
+          <NavLinkStyled to="/" href={`${path}`}>
+            Home
+          </NavLinkStyled>
+          <NavLinkStyled to="/blog" href={`${path}`}>
+            Blog
+          </NavLinkStyled>
+          <NavLinkStyled to="/acuc" href={`${path}`}>
+            A ÇUÇ
+          </NavLinkStyled>
+        </NavStyled>
+        <NavButtonStyled as={Col}>
+          <a>
+            <ButtonStyled variant="warning">Conhecer</ButtonStyled>
+          </a>
+        </NavButtonStyled>
+      </ContainerStyled>
+    </NavbarBaseStyled>
+  );
+};
+
+const NavbarBaseStyled = styled(NavbarBase)`
+  width: 100%;
+  height: 85px;
+  background-color: #131313 !important;
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+  filter: drop-shadow(0px 0px 12px #000000);
+
+  @media (max-width: 768px) {
+    height: 70px;
+  }
+`;
+
+const LogoStyled = styled(NavbarBaseStyled.Brand)`
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+
+const ContainerStyled = styled(Container)`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+
+  align-items: center;
+  margin: 0 auto;
+`;
+
+const NavStyled = styled(Nav)`
+  display: flex;
+  height: 100%;
+  padding-top: 25px;
+  justify-content: space-around;
+  align-items: center;
+
+  @media (max-width: 768px) {
+    padding-top: 20px;
+  }
+`;
+
+const NavLinkStyled = styled(Link)<LinkProps>`
+  font-family: Righteous;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 26px;
+  height: 100%;
+  text-align: center;
+  text-shadow: 0px 0px 12px #cf721c;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:first-child {
+    color: ${props => (props.href === '' ? '#cf721c' : '#ffffff')};
+    border-bottom: ${props =>
+      props.href === '' ? '4px solid #cf721c' : 'none'};
+  }
+
+  &:nth-child(0n + 2) {
+    color: ${props => (props.href === 'blog' ? '#cf721c' : '#ffffff')};
+    border-bottom: ${props =>
+      props.href === 'blog' ? '4px solid #cf721c' : 'none'};
+  }
+
+  &:last-child {
+    color: ${props => (props.href === 'acuc' ? '#cf721c' : '#ffffff')};
+    border-bottom: ${props =>
+      props.href === 'acuc' ? '4px solid #cf721c' : 'none'};
+  }
+  &:hover {
+    color: #cf721c !important;
+    border-bottom: 4px solid #cf721c !important;
+  }
+`;
+
+const NavButtonStyled = styled(Nav)`
+  display: flex;
+  justify-content: flex-end;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+
+const ButtonStyled = styled(Button)`
+  width: 199px;
+  height: 49px;
+  background-color: #cf721c !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 5px;
+  font-size: 1.2rem;
+  font-weight: bold !important;
+  box-shadow: 0px 0px 12px #cf721c;
+`;
+
+export default Navbar;

src/pages/acuc.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Main } from '../templates/main';
+
+function ACUC() {
+  return <Main />;
+}
+
+export default ACUC;

src/pages/blog.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Main } from '../templates/main';
+
+function Blog() {
+  return <Main />;
+}
+
+export default Blog;

src/pages/index.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Box } from '@chakra-ui/react';
 import VslSection from '../components/VslSection';
+import { Main } from '../templates/main';
 
 function IndexPage() {
   return (
-    <Box width="100%">
+    <Main>
       <VslSection />
-    </Box>
+    </Main>
   );
 }
 

src/styles/theme.ts

@@ -1,11 +0,0 @@
-import { extendTheme } from '@chakra-ui/react';
-
-const colors = {
-  brand: {
-    900: '#1a365d',
-    800: '#153e75',
-    700: '#2a69ac',
-  },
-};
-
-export const theme = extendTheme({ colors });

src/templates/main.tsx

@@ -0,0 +1,22 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import Navbar from '../components/Navbar';
+
+export const Main: React.FC = ({ children }) => {
+  const href = useMemo(() => (window ? window.location.href : ''), [window]);
+
+  const path = href.slice(href.lastIndexOf('/') + 1);
+
+  return (
+    <Container>
+      <Navbar path={path} />
+      {children}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: #131313;
+`;