Se agrega Header de landing

package.json

@@ -13,7 +13,7 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@gcba/obelisco": "^1.50.1",
+    "@gcba/obelisco": "^1.55.0",
     "@mdx-js/mdx": "^1.6.4",
     "@mdx-js/react": "^1.6.4",
     "@popperjs/core": "^2.5.4",

src/components/layout.tsx

@@ -3,6 +3,7 @@ import { MDXRenderer } from "gatsby-plugin-mdx"
 import { MDXProvider } from "@mdx-js/react"
 import * as _ from "lodash"
 import "../styles/main.scss"
+import "../styles/header.scss"
 
 import { Sidebar } from "./includes/Sidebar"
 import { TableOfContents } from "./includes/TableOfContent"
@@ -32,10 +33,39 @@ const Layout = (props: any) => {
       <a href="#content" className="sr-only sr-only-focusable">
         Pasar al contenido principal
       </a>
+      <header className="navbar navbar-light sticky-header">
+        <div className="container">
+          <img className="header-logo-obelisco" src="/Obelisco-logo.svg" alt="Ciudad de Buenos Aires" />
+          <button className="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent" aria-expanded="false">
+            <span className="navbar-toggler-icon"></span>
+          </button>
+          <div className="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul className="nav nav-pills">
+              <li className="nav-item">
+                <a href="https://gcba.github.io/#seccion-obelisco" className="nav-link">
+                  <span>Qué es Obelisco</span>
+                </a>
+              </li>
+              <li className="nav-item">
+                <a href="https://gcba.github.io/#seccion-herramientas" className="nav-link"><span>Herramientas</span></a>
+              </li>
+              <li className="nav-item">
+                <a href="https://gcba.github.io/#seccion-nosotros" className="nav-link"><span>Quiénes somos</span></a>
+              </li>
+              <li className="nav-item">
+                <a href="https://gcba.github.io/#seccion-noticias" className="nav-link">
+                  <span>Noticias</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </header>
       <div className="d-block d-md-none">
         <Sidebar current={path} navigation={navigation} />
       </div>
-      <div className="container">
+      <div className="container main-container">
         <div className="row">
           <div className="col-md-3 d-none d-md-block">
             <Sidebar current={path} navigation={navigation} />

src/components/seo.js

@@ -77,9 +77,16 @@ function Seo({ description, lang, meta, title }) {
         href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap"
         rel="stylesheet"
       ></link>
-      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
-      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+      <script
+        src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
+        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
+        crossorigin="anonymous"
+      ></script>
+      <script
+        src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
+        crossorigin="anonymous"
+      ></script>
     </Helmet>
   )
 }

src/styles/header.scss

@@ -0,0 +1,66 @@
+@import "~@gcba/obelisco/src/scss/obelisco.scss";
+
+//Estilos para el header
+.navbar.navbar-light {
+  @media (max-width: 752px) {
+    padding: 0.88rem 1rem;
+  }
+  @media (min-width: 752px) {
+    height: 5.5rem;
+  }
+
+  &.sticky-header {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 9999;
+    border: none;
+    border-radius: 0px 0px 8px 8px;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08);
+
+    .container {
+      @include media-breakpoint-up(md) {
+        flex-wrap: nowrap;
+      }
+
+      .header-logo-obelisco {
+        width: 8rem;
+      }
+
+      .navbar-toggler {
+        box-shadow: none;
+        padding: 0;
+        border: none;
+        outline: none;
+        height: 44px;
+        width: 44px;
+
+        .navbar-toggler-icon {
+          background-image: url("data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.33333 24H26.6667C27.4 24 28 23.4 28 22.6667C28 21.9333 27.4 21.3333 26.6667 21.3333H5.33333C4.6 21.3333 4 21.9333 4 22.6667C4 23.4 4.6 24 5.33333 24ZM5.33333 17.3333H26.6667C27.4 17.3333 28 16.7333 28 16C28 15.2667 27.4 14.6667 26.6667 14.6667H5.33333C4.6 14.6667 4 15.2667 4 16C4 16.7333 4.6 17.3333 5.33333 17.3333ZM4 9.33333C4 10.0667 4.6 10.6667 5.33333 10.6667H26.6667C27.4 10.6667 28 10.0667 28 9.33333C28 8.6 27.4 8 26.6667 8H5.33333C4.6 8 4 8.6 4 9.33333Z' fill='%2338485C'/%3e%3c/svg%3e") !important;
+        }
+      }
+
+      .navbar-collapse {
+        .nav .nav-item .nav-link {
+          line-height: 24px;
+          span {
+            font-size: 1.125rem;
+          }
+        }
+      }
+    }
+  }
+}
+
+//Estilos para aside y container
+.main-container {
+  @include media-breakpoint-up(md) {
+    margin-top: 88px;
+  }
+}
+
+aside {
+  @include media-breakpoint-down(sm) {
+    margin-top: 72.15px;
+  }
+}