Navbar amendments and created sidebar

mosiichuk · Mar 12, 2021 · 7878dbc · 7878dbc
1 parent 5578fc7
commit 7878dbc
Show file tree

Hide file tree

Showing 5 changed files with 260 additions and 32 deletions.
diff --git a/src/app.js b/src/app.js
@@ -1,4 +1,5 @@
-import "bootstrap/dist/css/bootstrap.min.css"
+import "bootstrap/dist/css/bootstrap-grid.min.css"
+import "bootstrap/dist/css/bootstrap-utilities.min.css"
 
 import './js/index';
 import './styles/style.sass';
diff --git a/src/index.html b/src/index.html
@@ -12,34 +12,90 @@
 </head>
 <body>
 
-<section class="hero" id="hero">
-    <img src="./img/hero.svg" alt="Running man" class="hero-img d-none d-xl-block">
-
+<header class="header" id="header">
     <div class="container">
         <div class="row">
-            <div class="col-12">
-                <header class="d-flex justify-content-between">
-                    <nav class="d-flex align-items-center">
-                        <a href="/" class="logo">
-                            <img src="./img/logo.svg" alt="Logo">
-                        </a>
+            <div class="col">
+                <nav class="d-flex align-items-center justify-content-between justify-content-md-start">
+                    <a href="/" class="logo">
+                        <img src="./img/logo.svg" alt="Logo">
+                    </a>
 
-                        <div class="menu">
+                    <div id="menuToggle" class="menu-toggle d-md-none">
+                        <input type="checkbox"/>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
+
+                    <div class="menu">
+                        <div class="menu-list">
                             <a href="#" class="menu-item">About</a>
                             <a href="#" class="menu-item">Gallery</a>
                             <a href="#" class="menu-item">Pricing</a>
                             <a href="#" class="menu-item">FAQ</a>
                             <a href="#" class="menu-item">Benefits</a>
                         </div>
-                    </nav>
 
-                    <div>
+                        <div class="d-flex flex-column flex-md-row">
+                            <a href="#" class="button button-ghost mb-4 mb-md-0 me-md-4">Sign in</a>
+                            <a href="#" class="button button-cta">Sign up</a>
+                        </div>
+                    </div>
+                </nav>
+            </div>
+        </div>
+    </div>
+</header>
+
+<section class="hero" id="hero">
+    <img src="./img/hero.svg" alt="Running man" class="hero-img d-none d-xl-block">
+
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-xl-5 text-center text-xl-start">
+                <div class="content">
+                    <h1 class="title">
+                        Many reasons to get up and start to get back in the business
+                    </h1>
+
+                    <p class="description">
+                        The harder you work for something, the greater you’ll feel when you achieve
+                        it.
+                    </p>
+
+                    <div class="actions">
                         <a href="#" class="button button-ghost me-4">Sign in</a>
                         <a href="#" class="button button-cta">Sign up</a>
                     </div>
-                </header>
+
+                    <div class="video-banner text-start">
+                        <a href="#" class="preview">
+                            <img src="./img/play-icon.svg" alt="Play icon">
+                        </a>
+
+                        <div>
+                            <p class="description">
+                                The harder you work for something, the greater you’ll feel when you
+                                achieve it.
+                            </p>
+
+                            <a href="#" class="preview-button">
+                                Watch preview
+                            </a>
+                        </div>
+                    </div>
+                </div>
             </div>
+        </div>
+    </div>
+</section>
+
+<section class="hero" id="hero">
+    <img src="./img/hero.svg" alt="Running man" class="hero-img d-none d-xl-block">
 
+    <div class="container">
+        <div class="row">
             <div class="col-12 col-xl-5 text-center text-xl-start">
                 <div class="content">
                     <h1 class="title">

diff --git a/src/js/index.js b/src/js/index.js
@@ -0,0 +1,26 @@
+document.addEventListener('DOMContentLoaded', function () {
+    initMenuBurger();
+});
+
+document.addEventListener("scroll", () => {
+    const header = document.getElementById('header');
+
+    if (window.pageYOffset > 50) {
+        header.classList.add("header-scroll");
+    } else {
+        header.classList.remove("header-scroll");
+    }
+});
+
+function initMenuBurger() {
+    let menuDisplayToggle = document.querySelector("#menuToggle input"),
+        menu = document.querySelector(".menu");
+
+    menuDisplayToggle.addEventListener("change", () => {
+        if (menuDisplayToggle.checked) {
+            menu.classList.add("menu-active");
+        } else {
+            menu.classList.remove("menu-active");
+        }
+    })
+}
diff --git a/src/styles/style.sass b/src/styles/style.sass
@@ -11,6 +11,17 @@
 
 html
     scroll-behavior: smooth
+    scrollbar-width: thin
+    scrollbar-color: $accent $blue
+
+body::-webkit-scrollbar
+    width: 0.5rem
+
+body::-webkit-scrollbar-track
+    background: $blue
+
+body::-webkit-scrollbar-thumb
+    background:  $accent
 
 body
     font-family: 'Gilroy', sans-serif
@@ -19,6 +30,7 @@ body
     font-weight: $semi-bold-text
     line-height: 22px
     font-size: 16px
+    overflow-x: hidden
 
 h1
     font-family: 'Inter', sans-serif
@@ -64,43 +76,161 @@ h2
         &:hover
             color: $text-color-white
 
-header
-    margin: 0 0 10%
+.header
+    position: fixed
+    padding: 3% 0
+    width: 100%
+    display: flex
+    flex-direction: column
+    justify-content: start
+    z-index: $z-1
+
+    +screen-up(md)
+        position: absolute
+        justify-content: space-between
+        flex-direction: row
+        padding: 5% 0 0
+        background: none
+
+    &-scroll
+        background: $background-color-main
+        border-bottom: 2px solid $accent
+
+    & .logo
+        margin: 0 44px 0 0
+
+.menu
+    position: absolute
+    display: flex
+    align-items: center
+    flex-direction: column
+    justify-content: flex-start
+    width: 100%
+    height: 100vh
+    padding: 25% 0 0
+    top: 0
+    right: 0
+    background: $accent
+    transform-origin: 0 0
+    transform: translate(100%, 0)
+    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0)
+
+    +screen-up(sm)
+        width: 50%
+
+    +screen-up(md)
+        position: relative
+        flex-direction: row
+        justify-content: space-between
+        width: 100%
+        padding: 0
+        height: auto
+        background: none
+        transform: none
+        transition: none
+
+    &-active
+        +screen-down(md)
+            transform: none
+
+    &-list
+        display: flex
+        flex-direction: column
+        color: $text-color-white
+        text-transform: uppercase
+        font-size: 18px
+        margin: 0 0 22px
+
+        +screen-up(md)
+            margin: 0
+            font-size: 12px
+            color: $text-color-grey
+            flex-direction: row
+
+    &-item:not(:last-child)
+        margin: 0 0 22px
+
+        +screen-up(md)
+            margin: 0 22px 0 0
+
+    &-toggle
+        margin-left: auto
+        position: relative
+
+        & input
+            display: block
+            width: 42px
+            height: 32px
+            position: absolute
+            top: -5px
+            left: -5px
+            cursor: pointer
+            opacity: 0
+            z-index: $z-10
+
+            &:checked~div
+                opacity: 1
+                transform: rotate(45deg) translate(3px, 0px)
+                background: #FFFFFF
+
+            &:checked~div:nth-last-child(2)
+                opacity: 0
+                transform: rotate(0deg) scale(0.2, 0.2)
+
+            &:checked~div:nth-last-child(1)
+                transform: rotate(-45deg) translate(-1px, 0px)
+
+        & div
+            width: 32px
+            height: 4px
+            margin-bottom: 5px
+            background-color: #FFFFFF
+            border-radius: 3px
+            position: relative
+            z-index: $z-1
+            transform-origin: 4px 0
+            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease
+
+    & .button-ghost
+        +screen-down(md)
+            color: $text-color-blue
+            border: 1px solid $background-color-blue
+
+    & .button-cta
+        +screen-down(md)
+            color: $text-color-white
+            background: $background-color-blue
 
 .hero
     position: relative
+    display: flex
+    align-items: center
     min-height: 100vh
     padding: 5% 0 6%
 
-    & .logo
-        margin: 0 44px 0 0
-
     & .title
         margin: 0 0 20px
 
     & .description
-        margin: 0 0 40px
+        margin: 0 0 20px
+
+        +screen-up(sm)
+            margin: 0 0 40px
 
     & .actions
-        margin: 0 0 60px
+        margin: 0 0 35px
+
+        +screen-up(sm)
+            margin: 0 0 60px
 
     &-img
         position: absolute
-        top: 50%
+        top: 55%
         right: 10%
         width: 40%
         height: auto
         transform: translateY(-50%)
 
-.menu
-    display: flex
-    color: $text-color-grey
-    text-transform: uppercase
-    font-size: 12px
-
-    &-item:not(:last-child)
-        margin: 0 22px 0 0
-
 .video-banner
     display: flex
     flex-direction: column
@@ -113,17 +243,22 @@ header
         justify-content: start
 
     & .preview
-        padding: 16px 45px
+
         text-align: center
         background: #361C5D
         border-radius: 4px
+        padding: 30px 45px
         margin: 0 0 10px
 
         +screen-up(sm)
             margin: 0 20px 0 0
+            padding: 16px 45px
 
     & .description
         margin: 0 0 6px
 
+        +screen-up(md)
+            margin: 0 0 6px
+
     & .preview-button
         color: $grey-400