From b046ee11c44313f904cc53987a27f2e4c18197e7 Mon Sep 17 00:00:00 2001 From: kmw Date: Fri, 26 Aug 2022 11:19:01 +0900 Subject: [PATCH] sidebar --- public/css/app.css | 36 +++++++++++++++ public/js/app.js | 59 ++++++++++++++++++++++-- resources/sass/app.scss | 38 +++++++++++++++ resources/views/layouts/header.blade.php | 26 +++++++++-- resources/views/pages/inquiry.blade.php | 4 +- 5 files changed, 153 insertions(+), 10 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index d2617b6..3485dce 100644 --- a/public/css/app.css +++ b/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; } diff --git a/public/js/app.js b/public/js/app.js index 06ba9c0..1c14b16 100644 --- a/public/js/app.js +++ b/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); @@ -337,6 +392,4 @@ $(document).ready(function() { }); autosize($(".autosize")); -}); - - +}); \ No newline at end of file diff --git a/resources/sass/app.scss b/resources/sass/app.scss index de3075d..971a17c 100644 --- a/resources/sass/app.scss +++ b/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; } diff --git a/resources/views/layouts/header.blade.php b/resources/views/layouts/header.blade.php index 5745d08..e209138 100644 --- a/resources/views/layouts/header.blade.php +++ b/resources/views/layouts/header.blade.php @@ -4,19 +4,22 @@ +
+ +
diff --git a/resources/views/pages/inquiry.blade.php b/resources/views/pages/inquiry.blade.php index e746bcc..cc9010a 100644 --- a/resources/views/pages/inquiry.blade.php +++ b/resources/views/pages/inquiry.blade.php @@ -1,5 +1,5 @@ -
-
+
+
방문해주셔서 감사합니다. 궁금하신 점이 있다면 언제든 문의 주세요.