Added navbar for pages

resources/js/home/home.js

@@ -1,2 +1,10 @@
 require('../app');
 
+// event for hamburger-toggle
+document.addEventListener('click',function(e){
+    // Hamburger menu
+    if(e.target.classList.contains('hamburger-toggle')){
+        e.target.children[0].classList.toggle('active');
+    }
+})
+

resources/sass/home/home.scss

@@ -34,13 +34,107 @@ h6 {
     font-size: 0.8rem;
 }
 a {
-    transition: all 0.3s ease;
+    transition: all 0.3s ease-in-out;
     text-decoration: none;
     &:hover {
         text-decoration: none;
     }
 }
 
+// navbar
+.navbar {
+    min-height: 80px;
+    .nav-link {
+        transition: all 0.3s ease-in-out;
+        font-weight: 600;
+        padding: 0 0.875rem;
+        @media screen and (max-width: 991px){
+            padding: 0.375rem 0;
+            font-weight: 500;
+            //border-top: 1px solid #eee;
+            border-top: 1px dashed #eee;
+        }
+    }
+    .navbar-toggler{
+        height: 64px;
+        border: none;
+        padding: 0;
+        outline: none;
+        &:focus{
+            box-shadow: none;
+        }
+        .hamburger-toggle{
+            position: relative;
+            display: inline-block;
+            width: 50px;
+            height: 50px;
+            z-index: 11;
+            float: right;
+            .hamburger {
+                position: absolute;
+                transform: translate(-50%, -50%) rotate(0deg);
+                //left: 50%;
+                left: 25px;
+                top: 50%;
+                width: 50%;
+                height: 50%;
+                pointer-events: none;
+                span {
+                    width: 100%;
+                    height: 4px;
+                    position: absolute;
+                    background: $secondary;
+                    border-radius: 2px;
+                    z-index: 1;
+                    transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0), background 0.2s cubic-bezier(0.77,0.2,0.05,1.0), all 0.2s ease-in-out;
+                    left: 0px;
+                    &:first-child{
+                        top: 10%;
+                        transform-origin: 50% 50%;
+                        transform: translate(0% -50%) !important;
+                    }
+                    &:nth-child(2){
+                        top: 50%;
+                        transform: translate(0,-50%);
+                    }
+                    &:last-child{
+                        left: 0px;
+                        top: auto;
+                        bottom: 10%;
+                        transform-origin: 50% 50%;
+                    }
+                }
+                &.active{
+                    span {
+                        position: absolute;
+                        margin: 0;
+                        &:first-child{
+                            top: 45%;
+                            transform: rotate(45deg);
+                        }
+                        &:nth-child(2){
+                            left: 50%;
+                            width: 0px;
+                        }
+                        &:last-child{
+                            top: 45%;
+                            transform: rotate(-45deg);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .navbar-nav {
+        //padding-right: 1.25rem;
+        padding: 0 1rem;
+    }
+}
+.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .nav-link.active,
+.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
+    color: $secondary;
+}
+
 // style for content single article page
 .container-article-width {
     @media screen and (min-width: 1400px){
@@ -368,3 +462,4 @@ a {
         }
     }
 }
+

resources/views/home/layouts/navbar.blade.php

@@ -1,31 +1,46 @@
-{{--<nav class="navbar navbar-expand-lg navbar-light sticky-top bg-dark">--}}
-{{--
-<nav class="navbar navbar-expand-lg navbar-light bg-dark">
-    navbar
-</nav>
---}}
-<nav class="navbar navbar-expand-lg navbar-light bg-white">
+<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
     <div class="container-fluid">
+        <a class="navbar-brand" href="#">Navbar</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
+            <div class="hamburger-toggle">
+                <div class="hamburger">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+            </div>
         </button>
-        <a class="navbar-brand" href="#">Navbar</a>
+
         <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
-            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+            <ul class="navbar-nav mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="#">صفحه اصلی</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">خدمات</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">محصولات</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">آکادمی</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">فرصت‌های شغلی</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">همکاران</a>
+                </li>
                 <li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="#">Home</a>
+                    <a class="nav-link" href="#">بلاگ</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#">Link</a>
+                    <a class="nav-link" href="#">درباره ما</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+                    <a class="nav-link" href="#">تماس با ما</a>
                 </li>
             </ul>
-            <form class="d-flex">
-                <input class="form-control ms-2" type="search" placeholder="Search" aria-label="Search">
-                <button class="btn btn-outline-success" type="submit">Search</button>
-            </form>
         </div>
     </div>
 </nav>