sidebar

public/css/app.css

@@ -1,4 +1,5 @@
 @import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
+@charset "UTF-8";
 html {
   font-feature-settings: "ss01", "ss02", "ss08";
   scroll-behavior: smooth !important;
@@ -66,6 +67,33 @@ header {
   z-index: 99;
 }
 
+.open-sidebar {
+  overflow: hidden;
+}
+
+.sidebar {
+  height: 100vh;
+  width: 100%;
+  background: white;
+  position: absolute;
+  left: -100%;
+}
+.sidebar.show {
+  left: 0;
+  transition: all 1s ease;
+}
+.sidebar .sidebar-item {
+  padding-left: 15px;
+}
+.sidebar .sidebar-item.active {
+  background: #f7f7f7;
+}
+
+.inquiry-link.active, .portfolio-link.active, .introduce-link.active {
+  color: #24469B !important;
+  font-weight: 700;
+}
+
 .intro-image-box {
   background: url("/images/middle-img.png");
   background-size: cover;
@@ -113,6 +141,14 @@ header {
   font-size: 18px;
 }
 
+.main-introduce::before, .main-inquiry-container::before {
+  content: "";
+  display: block;
+  height: 80px; /* fixed header 높이 만큼 부여 or 브라우저 상단에서 띄워놓기 원하는 높이 */
+  margin-top: -80px; /* 위에서 설정한 높이와 동일한 만큼을 음수로 제공 */
+  visibility: hidden;
+}
+
 .main-inquiry {
   padding-bottom: 40px;
 }

public/js/app.js

@@ -14,6 +14,43 @@ $.ajaxSetup({
     }
 });
 
+var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: 0.01}});
+var portfolioHeight = $('.main-portfolio').height();
+var introduceHeight = $('.main-introduce').height()-80;
+var inquiryHeight = $('.main-inquiry').height()-80;
+	// build scenes
+new ScrollMagic.Scene({triggerElement: ".main-portfolio", duration: getPortHeight})
+                .setClassToggle(".portfolio-link", "active") // add class toggle
+                .addTo(controller);
+new ScrollMagic.Scene({triggerElement: ".main-introduce", duration: getIntroHeight})
+                .setClassToggle(".introduce-link", "active") // add class toggle
+                .addTo(controller);
+new ScrollMagic.Scene({triggerElement: ".main-inquiry", duration: getInquHeight})
+                .setClassToggle(".inquiry-link", "active") // add class toggle
+                .addTo(controller);
+
+function getPortHeight() {
+    return portfolioHeight
+}
+function getIntroHeight() {
+    return introduceHeight
+}
+function getInquHeight() {
+    return inquiryHeight
+}
+$(window).on('resize', function() {
+    portfolioHeight = $('.main-portfolio').height();
+    introduceHeight = $('.main-introduce').height()-80;
+    inquiryHeight = $('.main-inquiry').height()-80;
+
+    if($(window).width() >= 992){
+        $('.sidebar').removeClass('show')
+        $('body').removeClass('open-sidebar')
+        $('#sidebar-open').removeClass('d-none')
+        $('#sidebar-close').addClass('d-none')
+    }
+})
+
 $(document).ajaxError(handleAjaxError);
 $(document).ajaxComplete(function(event, xhr,settings){
     if(!settings.hideLoading) closeAjaxLoading();
@@ -168,6 +205,24 @@ var extExecutes = "php,php3,php4,phps,phtm,phtml,htm,html,sh,ph,inc,cgi,pl,tpl,e
 var extImages = "gif,jpg,jpeg,png,bmp";
 
 $(document).ready(function() {
+    $('#sidebar-open').click(function() {
+        $('.sidebar').addClass('show')
+        $('body').addClass('open-sidebar')
+        $('#sidebar-open').addClass('d-none')
+        $('#sidebar-close').removeClass('d-none')
+    })
+    $('#sidebar-close').click(function() {
+        $('.sidebar').removeClass('show')
+        $('body').removeClass('open-sidebar')
+        $('#sidebar-open').removeClass('d-none')
+        $('#sidebar-close').addClass('d-none')
+    })
+    $('.sidebar-item').click(function() {
+        $('.sidebar').removeClass('show')
+        $('body').removeClass('open-sidebar')
+        $('#sidebar-open').removeClass('d-none')
+        $('#sidebar-close').addClass('d-none')
+    })
     var checkMessage = function (result, msg, obj) {
         if (!result) {
             if (msg != undefined) alert(msg);
@@ -338,5 +393,3 @@ $(document).ready(function() {
 
     autosize($(".autosize"));
 });
-
-

resources/sass/app.scss

@@ -23,6 +23,35 @@ header{
     background-color: white;
     z-index: 99;
 }
+.open-sidebar{
+    overflow: hidden;
+}
+.sidebar{
+    height:100vh;
+    width: 100%;
+    background: white;
+    position: absolute;
+    left:-100%;
+
+    &.show{
+        left:0;
+        transition: all 1s ease;
+    }
+
+    .sidebar-item{
+        padding-left:15px;
+        &.active{
+            background:#f7f7f7;
+        }
+    }
+}
+
+.inquiry-link, .portfolio-link, .introduce-link{
+    &.active{
+        color:#24469B !important;
+        font-weight: 700;
+    }
+}
 
 .intro-image-box{
     background: url('/images/middle-img.png');
@@ -69,6 +98,15 @@ header{
         font-size:18px;
     }
 }
+.main-introduce, .main-inquiry-container{
+    &::before{
+        content: "";
+        display: block;
+        height: 80px;          /* fixed header 높이 만큼 부여 or 브라우저 상단에서 띄워놓기 원하는 높이 */
+        margin-top: -80px;     /* 위에서 설정한 높이와 동일한 만큼을 음수로 제공 */
+        visibility: hidden;
+    }
+}
 .main-inquiry{
     padding-bottom:40px;
 }

resources/views/layouts/header.blade.php

@@ -4,19 +4,22 @@
         <nav class="navbar navbar-expand-lg navbar-light">
             <div class="container-fluid solar-header">
               <a class="navbar-brand" href="#"><img src="/images/logo.png" alt="{{ $settings->site_name }}" class="logo"/></a>
-              <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+              <button class="navbar-toggler border-0" id="sidebar-open">
-                <span class="navbar-toggler-icon"></span>
+                <i class="fas fa-bars"></i>
+              </button>
+              <button class="navbar-toggler border-0 d-none" id="sidebar-close">
+                <i class="fas fa-times"></i>
               </button>
               <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                 <ul class="navbar-nav mb-2 mb-lg-0">
                   <li class="nav-item">
-                    <a class="nav-link" href="#portfolio">시공사진</a>
+                    <a class="nav-link portfolio-link" href="#portfolio">시공사진</a>
                   </li>
                   <li class="nav-item ms-0 ms-md-2">
-                    <a class="nav-link" href="#introduce">소개</a>
+                    <a class="nav-link introduce-link" href="#introduce">소개</a>
                   </li>
                   <li class="nav-item ms-0 ms-md-2">
-                    <a class="nav-link" href="#inquiry">문의</a>
+                    <a class="nav-link inquiry-link" href="#inquiry">문의</a>
                   </li>
                 </ul>
               </div>
@@ -24,4 +27,17 @@
         </nav>
       </div>
     </div>
+    <div class="sidebar">
+      <ul class="navbar-nav mb-2 mb-lg-0">
+        <li class="nav-item">
+          <a class="nav-link sidebar-item portfolio-link" href="#portfolio">시공사진</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link sidebar-item introduce-link" href="#introduce">소개</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link sidebar-item inquiry-link" href="#inquiry">문의</a>
+        </li>
+      </ul>
+    </div>
 </header>

resources/views/pages/inquiry.blade.php

@@ -1,5 +1,5 @@
-<section class="main-inquiry" id="inquiry">
+<section class="main-inquiry">
-    <div class="container">
+    <div class="container main-inquiry-container" id="inquiry">
         <div class="row">
             <div class="inquiry-message-box text-center">
                 방문해주셔서 감사합니다. 궁금하신 점이 있다면 언제든 문의 주세요.<br><br>