Edit HTML structure

assets/css/main.scss

@@ -80,27 +80,28 @@ body {
 }
 
 // ----------------------------------------------------------------------------
-// HEADER
+// MAIN
 // ----------------------------------------------------------------------------
 
-// Sidebar
+// Home section
 
-.sidebar {
+.home-section {
     position: relative;
     z-index: 1;
     width: 100%;
+    min-height: 100vh;
     padding: var(--sidebar-padding);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: flex-start;
     background-color: transparent;
+}
 
-    .sidebar__nav {
-        max-width: 100%;
-    }
-
-    .sidebar__nav-link {
+.navigation {
+    max-width: 100%;
+    
+    &__link {
         display: inline-block;
         max-width: 100%;
         overflow-x: hidden;
@@ -117,23 +118,23 @@ body {
             }
         }
     }
+}
 
-    .sidebar__social {
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: 0.8rem 0 0 0;
-    }
-
-    .sidebar__social-link {
+.social {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0.8rem 0 0 0;
+    
+    &__link {
         width: var(--icon-size);
         height: var(--icon-size);
         display: flex;
         justify-content: center;
         align-items: center;
 
-        + .sidebar__social-link {
+        + .social__link {
             margin: 0 0 0 0.8rem;
         }
 
@@ -153,34 +154,32 @@ body {
 
 @media screen and (min-width: $desktop-media-query) {
 
-    .sidebar {
+    .home-section {
         position: fixed;
         overflow-y: auto;
         top: 0;
-        bottom: 0;
         left: 0;
+    }
 
-        .sidebar__social {
-            width: auto;
-            justify-content: flex-start;
-        }
+    .social {
+        width: auto;
+        justify-content: flex-start;
     }
 }
 
-// ----------------------------------------------------------------------------
-// MAIN
-// ----------------------------------------------------------------------------
-
 // Slider section
 
 .slider-section {
     position: fixed;
     top: 0;
-    right: 0;
+    left: 0;
 }
 
-.splide__image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+.splide {
+    
+    &__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
 }

assets/js/app.js

@@ -11,12 +11,12 @@ const body = document.body;
 
 // SPLIDE SLIDER
 
-const slider = document.querySelector('.slider-section');
-let splideSlider;
+const sliderSection = document.querySelector('.slider-section');
+let slider;
 const slides = document.querySelectorAll('.splide__slide');
-const sidebar = document.querySelector('.sidebar');
-const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link');
-const sidebarSocialLinks = document.querySelectorAll('.sidebar__social-link');
+const homeSection = document.querySelector('.home-section');
+const navLinks = document.querySelectorAll('.navigation__link');
+const socialLinks = document.querySelectorAll('.social__link');
 
 // ----------------------------------------------------------------------------
 // LOGIC
@@ -38,8 +38,8 @@ function convertRemToPixels(rem) {
 // SPLIDE SLIDER
 
 function setUpSlider() {
-    if (slider) {
-        splideSlider = new Splide('.splide', {
+    if (sliderSection) {
+        slider = new Splide('.splide', {
             type: 'fade',
             rewind: true,
             rewindByDrag: true,
@@ -55,55 +55,55 @@ function setUpSlider() {
 }
 
 function mountSlider() {
-    if (splideSlider) {
-        splideSlider.mount();
+    if (slider) {
+        slider.mount();
     }
 }
 
 function goToNextSlideOnClick() {
-    if (sidebar && splideSlider) {
-        sidebar.addEventListener('click', function(e) {
+    if (homeSection && slider) {
+        homeSection.addEventListener('click', function(e) {
             if (!e.target.matches('a') && !e.target.parentElement.matches('a')) {
-                splideSlider.go('>');
+                slider.go('>');
             }
         });
     }
 }
 
 function changeSlideOnSwipe() {
-    if (sidebar && splideSlider) {
-        sidebar.addEventListener('swiped', function(e) {
+    if (homeSection && slider) {
+        homeSection.addEventListener('swiped', function(e) {
             if (e.detail.dir === 'right') {
-                splideSlider.go('>');
+                slider.go('>');
             } else if (e.detail.dir === 'left') {
-                splideSlider.go('<');
+                slider.go('<');
             }
         });
     }
 }
 
 function turnSidebarLinksToWhite() {
-    if (sidebarNavLinks) {
-        for (let i = 0; i < sidebarNavLinks.length; i++) {
-            sidebarNavLinks[i].classList.add('sidebar__nav-link--white');
+    if (navLinks) {
+        for (let i = 0; i < navLinks.length; i++) {
+            navLinks[i].classList.add('navigation__link--white');
         }
     }
-    if (sidebarSocialLinks) {
-        for (let i = 0; i < sidebarSocialLinks.length; i++) {
-            sidebarSocialLinks[i].classList.add('sidebar__social-link--white');
+    if (socialLinks) {
+        for (let i = 0; i < socialLinks.length; i++) {
+            socialLinks[i].classList.add('social__link--white');
         }
     }
 }
 
 function turnSidebarLinksToBlack() {
-    if (sidebarNavLinks) {
-        for (let i = 0; i < sidebarNavLinks.length; i++) {
-            sidebarNavLinks[i].classList.remove('sidebar__nav-link--white');
+    if (navLinks) {
+        for (let i = 0; i < navLinks.length; i++) {
+            navLinks[i].classList.remove('navigation__link--white');
         }
     }
-    if (sidebarSocialLinks) {
-        for (let i = 0; i < sidebarSocialLinks.length; i++) {
-            sidebarSocialLinks[i].classList.remove('sidebar__social-link--white');
+    if (socialLinks) {
+        for (let i = 0; i < socialLinks.length; i++) {
+            socialLinks[i].classList.remove('social__link--white');
         }
     }
 }
@@ -119,16 +119,16 @@ function editNavLinksColor(slide) {
 }
 
 function editNavLinksColorOnSliderMounted() {
-    if (splideSlider && slides) {
-        splideSlider.on('mounted', function() {
+    if (slider && slides) {
+        slider.on('mounted', function() {
             editNavLinksColor(slides[0]);
         })
     }
 }
 
 function editNavLinksColorOnSlideActive() {
-    if (splideSlider) {
-        splideSlider.on('active', function(e) {
+    if (slider) {
+        slider.on('active', function(e) {
             editNavLinksColor(e.slide);
         });
     }