Travail sur le main navigation

MareveD · Jul 11, 2024 · c704ff9 · c704ff9
1 parent 869d0b5
commit c704ff9
Show file tree

Hide file tree

Showing 7 changed files with 358 additions and 76 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/css/style.css.map b/assets/css/style.css.map
diff --git a/assets/img/main-nav_poly_1.svg b/assets/img/main-nav_poly_1.svg
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -101,7 +101,7 @@ document.addEventListener('DOMContentLoaded', () => {
 /* Animations en general */
 
 document.addEventListener('DOMContentLoaded', () => {
-    const elements = document.querySelectorAll('.shape, .caption, .btn-arrow, .section-title, .cta-arrow');
+    const elements = document.querySelectorAll('.shape, .caption, .btn-arrow, .section-title, .cta-arrow, .nav-logo');
     const options = {
         threshold: 0.5
     };
@@ -128,12 +128,35 @@ document.addEventListener('DOMContentLoaded', () => {
 document.addEventListener('DOMContentLoaded', () => {
     //const baseUrl = window.location.origin; // Get the base URL when I am local
     const baseUrl = 'https://mareved.github.io/portfolio';
-    const sections = ['.home-portfolio', '.home-intro', '.cta-contact', '.footer-content'];
+    const sections = ['.home-portfolio', '.home-intro', '.cta-contact', '.footer-content', '.header-menu'];
     sections.forEach(section => {
         const links = document.querySelectorAll(`${section} a[data-path]`);
         links.forEach(link => {
             const path = link.getAttribute('data-path');
             link.setAttribute('href', `${baseUrl}/${path}`);
         });
     });
-});
+});
+
+/* ------------------------------------------------------------------------------ */
+
+/* Menu burger */
+document.addEventListener('DOMContentLoaded', function () {
+    const btnOpen = document.querySelector('.menu-open');
+    const btnClose = document.querySelector('.menu-close');
+    const nav = document.querySelector('.main-navigation');
+
+    btnOpen.addEventListener('click', function (e) {
+        e.preventDefault();
+        btnOpen.style.display = 'none';
+        nav.style.display = 'flex';
+    });
+
+    btnClose.addEventListener('click', function (e) {
+        e.preventDefault();
+        nav.style.display = 'none';
+        btnOpen.style.display = 'flex';
+    });
+});
+
+/* ------------------------------------------------------------------------------ */
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
@@ -2,12 +2,17 @@
 @import '../../node_modules/bootstrap/scss/bootstrap';
 // @import '../../node_modules/@fortawesome/fontawesome-free/css/all.css';
 
+/* ------------------------------------------------------------ */
+
+/* variables */
 $accent-color: #ED7745;
 $dark-color: #0E2B36;
 $light-color: #BFCAD3;
 $white-color: #DCE6EE;
 $section-padding: 100px 0px;
 
+/* ------------------------------------------------------------ */
+
 /* animations */
 @keyframes fadeIn {
     from {
@@ -28,6 +33,8 @@ $section-padding: 100px 0px;
     animation-delay: 0.5s;
 }
 
+/* ------------------------------------------------------------ */
+
 /* custom colors */
 .coul-accent {color: $accent-color !important;}
 .coul-dark {color: $dark-color !important;}
@@ -44,6 +51,8 @@ $section-padding: 100px 0px;
 .bg-light {background-color: $light-color !important;}
 .bg-white {background-color: $white-color !important;}
 
+/* ------------------------------------------------------------ */
+
 /* Transitions */
 .border-right, .border-left {
     position: relative;
@@ -67,8 +76,9 @@ $section-padding: 100px 0px;
     transition: transform 0.1s linear;
 }
 
-/* Styles generaux */
+/* ------------------------------------------------------------ */
 
+/* Styles generaux */
 body {
     font-family: 'Montserrat', sans-serif;
     background-color: $light-color;
@@ -196,6 +206,125 @@ section {
     align-items: flex-start;
 }
 
+/* ------------------------------------------------------------ */
+
+/* Navigations */
+.menu-open, 
+.menu-close {
+    top: 25px;
+    position: fixed;
+    z-index: 100;
+    color: $accent-color;
+    cursor: pointer;
+    border: none;
+    right: 25px;
+    width: 60px;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    clip-path: polygon(
+        25% 0%, 
+        75% 0%, 
+        100% 50%, 
+        75% 100%, 
+        25% 100%, 
+        0% 50%
+    );
+    background: $dark-color;
+    transition: all 0.3s;
+    font-size: 25px;
+}
+
+.menu-open:hover,
+.menu-close:hover {
+    color: $light-color;
+}
+
+.main-navigation {
+    display: none;
+    position: fixed;
+    z-index: 101;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: $dark-color;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+
+    .nav-logo {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        .logo {
+            position: absolute;
+            left: 0;
+            right: 0;
+            margin: auto;
+            top: 30%;
+            z-index: 102;
+        }
+    }
+
+    .navigation {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        height: 90vh;
+        row-gap: 60px;
+        justify-content: space-between;
+        padding: 100px 25px 100px 0px;
+
+        .header-menu {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            justify-content: space-between;
+            height: 100%;
+            padding-right: 100px;
+
+            a {
+                font-size: 75px;
+                color: $light-color;
+                font-family: 'Prata', serif; 
+            }
+
+            a:hover {
+                color: $white-color;
+            }
+        }
+    }
+
+    .social-media {
+        display: flex;
+        flex-direction: row;
+        column-gap: 20px;
+        padding-right: 100px;
+
+        a {
+            width: fit-content;
+            height: fit-content;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            color: $accent-color;
+
+            i {
+                font-size: 24px;
+            }
+        }
+
+        a:hover {
+            color: $white-color;
+        }
+    }
+}
+
+/* ------------------------------------------------------------ */
+
 /* Accueil - Header */
 .header-home {
     display: flex;