public/index.html

@@ -8,7 +8,8 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -42,7 +43,9 @@
       To create a production bundle, use `npm run build` or `yarn build`.
       
     -->
-
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+    crossorigin="anonymous"></script>
 </body>
 
 </html>

src/components/NavigationBar/NavigationBar.tsx

@@ -1,17 +1,14 @@
-/*import Container from "react-bootstrap/Container";
-import Nav from "react-bootstrap/Nav";
-import Navbar from "react-bootstrap/Navbar";
-import NavDropdown from "react-bootstrap/NavDropdown";
-
-*/
+import { M3Logo } from "../M3Logo/M3Logo";
 import styles from "./navigationBar.module.scss";
+import m3LogoImg from "./assets/image/Logo-M3Academy.svg";
+import { Cart } from "../Cart/Cart";
 const NavigationBar = () => {
   return (
-    <nav className="navbar navbar-expand-lg bg-body-tertiary" id="navegador">
+    <nav
+      className="navbar navbar-expand-xpp bg-body-tertiary navbar-dark bg-dark"
+      id="navegador"
+    >
       <div className="container-fluid">
-        <a className="navbar-brand" href="#">
-          Navbar
-        </a>
         <button
           className="navbar-toggler"
           type="button"
@@ -23,6 +20,13 @@ const NavigationBar = () => {
         >
           <span className="navbar-toggler-icon"></span>
         </button>
+        <a className="navbar-brand" href="#">
+          <img className="logoM3Img" src={m3LogoImg} alt="M3 Academy mobile" />
+        </a>
+        <div className="carrinho-wrapper">
+          <Cart />
+        </div>
+
         <div className="collapse navbar-collapse" id="navbarNavDropdown">
           <ul className="navbar-nav">
             <li className="nav-item">

src/components/NavigationBar/navigationBar.module.scss

@@ -1,13 +1 @@
-/*#navegador {
-  xs: 0;
-  sm: 375px;
-  md: 768px;
-  lg: 1025px;
-  xl: 1280px;
-  xxl: 2500px;
-}*/
-@media (min-width: 768px) and (max-width: 1024px) {
-  .collapse {
-    display: none !important;
-  }
-}
+

src/styles/main.scss

@@ -3,5 +3,5 @@
 @import "common/reset.scss";
 @import "partials/header.scss";
 @import "partials/container.scss";
-@import "utils/bootcustom.scss";
-@import "/node_modules/bootstrap/scss/bootstrap";
+@import "utils/custom.scss";
+@import "partials/navigation.scss";

src/styles/partials/navigation.scss

@@ -0,0 +1,11 @@
+@media screen and (min-width: 1025px) {
+  .logoM3Img {
+    display: none;
+  }
+  .carrinho-wrapper {
+    display: none;
+  }
+}
+.logoM3Img {
+  width: 136px;
+}

src/styles/utils/bootcustom.scss

@@ -1,13 +0,0 @@
-@import "/node_modules/bootstrap/scss/functions";
-$grid-breakpoints: (
-  xs: 0,
-  xsm: 362px,
-  sm: 576px,
-  md: 768px,
-  lg: 950px,
-  xl: 1200px,
-  xxl: 1400px,
-);
-@import "/node_modules/bootstrap/scss/variables";
-@import "/node_modules/bootstrap/scss/mixins";
-@import "/node_modules/bootstrap/scss/bootstrap";

src/styles/utils/custom.scss

@@ -0,0 +1,20 @@
+// Custom.scss
+// Option A: Include all of Bootstrap
+
+// Include any default variable overrides here (though functions won't be available)
+@import "/node_modules/bootstrap/scss/functions";
+
+$grid-breakpoints: (
+  xs: 0,
+  xsm: 362px,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xpp: 1025px,
+  xl: 1200px,
+  xxl: 1400px,
+);
+
+@import "/node_modules/bootstrap/scss/bootstrap.scss";
+
+// Then add additional custom code here