Merge pull request #44 from pagevamp/PR2-WTFA-2

PR2-WTFA-2: Header scss updated
pagevamp · Dec 17, 2024 · 6850f7a · 6850f7a
2 parents 6710518 + 152cec2
commit 6850f7a
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 15 deletions.
diff --git a/wp-content/themes/outside-traineeship-boilerplate/package.json b/wp-content/themes/outside-traineeship-boilerplate/package.json
@@ -6,6 +6,7 @@
   "description": "[![Build Status](https://travis-ci.org/Automattic/_s.svg?branch=master)](https://travis-ci.org/Automattic/_s)",
   "dependencies": {
     "@vimeo/player": "^2.25.0",
+    "@popperjs/core": "^2.11.8",
     "bootstrap": "5.3.2",
     "swiper": "^11.1.15"
   },

diff --git a/wp-content/themes/outside-traineeship-boilerplate/resources/scripts/app.js b/wp-content/themes/outside-traineeship-boilerplate/resources/scripts/app.js
@@ -1,3 +1,5 @@
 console.log('App JS hello world');
 
 import './modules/swiper';
+
+import './global/header';
diff --git a/wp-content/themes/outside-traineeship-boilerplate/resources/scripts/global/header.js b/wp-content/themes/outside-traineeship-boilerplate/resources/scripts/global/header.js
@@ -1,16 +1,18 @@
-import { Offcanvas } from 'bootstrap';
+import "../../../node_modules/bootstrap/js/dist/offcanvas";
+import "bootstrap/js/dist/dropdown.js"
 
-
-const header = () => {
-    const offcanvasEl = document.querySelector('header .offcanvas');
-    console.log('I am a function');
-    if (!offcanvasEl) {
-        return;
+window.addEventListener('DOMContentLoaded', () => {
+    const header = () => {
+        const offcanvasEl = document.querySelector('#header .navbar');
+        console.log('I am a function');
+        if (!offcanvasEl) {
+            return;
+        }
+        console.log('i am running')
+        new Offcanvas(offcanvasEl);
     }
-    console.log('i am running')
-    new Offcanvas(offcanvasEl);
+    header();
+});
 
-}
-header();
 export default header;
 
diff --git a/wp-content/themes/outside-traineeship-boilerplate/resources/scripts/modules/vimeo-video.js b/wp-content/themes/outside-traineeship-boilerplate/resources/scripts/modules/vimeo-video.js
@@ -1,4 +1,4 @@
-import Player from '@vimeo/player';
+// import Player from '@vimeo/player';
 
 document.addEventListener('DOMContentLoaded', function () {
     const iframe = document.getElementById('vimeo-player');

diff --git a/wp-content/themes/outside-traineeship-boilerplate/resources/styles/components/header.scss b/wp-content/themes/outside-traineeship-boilerplate/resources/styles/components/header.scss
@@ -1,3 +1,8 @@
+@import '../custom.scss';
+@import '../../../node_modules/bootstrap/scss/dropdown';
+@import '../../../node_modules/bootstrap/scss/offcanvas';
+@import '../../../node_modules/bootstrap/scss/navbar';
+
 .header {
 
     $self: ".header";
@@ -7,15 +12,14 @@
 
     &__logo-container {
         width: clamp(85px, 10vw, 120px);
-        height: clamp(33px, 10vw, 46.2px);
 
         a {
             width: 100%;
             height: 100%;
 
             img {
                 width: 100%;
-                height: 100%;
+                aspect-ratio: 12 / 5;
             }
         }
     }
@@ -93,12 +97,13 @@
                         text-wrap: nowrap;
 
                         @include media-breakpoint-down(md) {
-                            padding-bottom: 1.5rem;
+                            padding: 1.5rem;
                             border-bottom: 1px solid $neutral-100;
                         }
 
                         .nav-link {
                             color: $neutral-600;
+                            text-decoration: none;
 
                             &:hover {
                                 background-color: $neutral-100;
@@ -128,6 +133,11 @@
                             border: none;
                             width: 254px;
 
+                            padding: 1rem;
+                            display: flex;
+                            flex-direction: column;
+                            gap: 0.75rem;
+
                             .nav-item {
 
                                 @include media-breakpoint-down(md) {

diff --git a/wp-content/themes/outside-traineeship-boilerplate/yarn.lock b/wp-content/themes/outside-traineeship-boilerplate/yarn.lock
@@ -1003,6 +1003,11 @@
     "@parcel/watcher-win32-ia32" "2.5.0"
     "@parcel/watcher-win32-x64" "2.5.0"
 
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@socket.io/component-emitter@~3.1.0":
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz#821f8442f4175d8f0467b9daf26e3a18e2d02af2"