From 6b35388f33102ad512543ef800a1646c52d399f1 Mon Sep 17 00:00:00 2001
From: Jerry <hwy0127@gmail.com>
Date: Wed, 21 Oct 2020 21:54:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20aside=20=E5=8F=AF=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F/=E5=A2=9E=E5=8A=A0=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=8F=AF=E5=B1=95=E5=BC=80=E6=88=96=E6=94=B6=E7=BC=A9aside?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                       |  2 ++
 layout/includes/layout.pug        |  3 ++-
 layout/includes/rightside.pug     |  4 ++++
 package.json                      |  2 +-
 source/css/_layout/aside.styl     | 11 +++++++++++
 source/css/_layout/rightside.styl |  4 ++++
 source/css/_page/common.styl      |  2 +-
 source/js/main.js                 |  5 +++++
 8 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/_config.yml b/_config.yml
index f1aedd4..7f9d3e3 100644
--- a/_config.yml
+++ b/_config.yml
@@ -600,6 +600,8 @@ preloader: false
 
 aside:
   enable: true
+  hide: false
+  button: true
   mobile: true # display on mobile
   position: right # left or right
   card_author:
diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug
index 38c9bbf..e3a5b8c 100644
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -1,7 +1,8 @@
+- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
 
 doctype html
-html(lang=config.language data-theme=theme.display_mode)
+html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
   head
     include ./head.pug
   body
diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug
index 627bca6..2762162 100644
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -23,6 +23,10 @@
       button#rightside_config(type="button" title=_p("rightside.setting"))
         i.fas.fa-cog
 
+    if theme.aside.enable && theme.aside.button
+      button#hide-aside-btn(type="button")
+        i.fas.fa-arrows-alt-h
+
     if theme.chat_btn
       button#chat_btn(type="button" title=_p("rightside.chat_btn"))
         i.fas.fa-sms
diff --git a/package.json b/package.json
index 63109cf..ab533b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.3.0-b5",
+  "version": "3.3.0-b6",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index 4144b37..9a70f7a 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -327,3 +327,14 @@
 
   100%
     transform: scale(.7)
+
++minWidth900()
+  html.hide-aside
+    .layout
+      justify-content: center
+
+      > div:last-child
+        display: none
+
+      > div:first-child
+        width: 80%
\ No newline at end of file
diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl
index 44ba2c8..2b1f0b7 100644
--- a/source/css/_layout/rightside.styl
+++ b/source/css/_layout/rightside.styl
@@ -38,3 +38,7 @@
 
     +maxWidth900()
       display: block
+
+  +maxWidth900()
+    #hide-aside-btn
+      display: none
diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl
index ced0cac..d28abdd 100644
--- a/source/css/_page/common.styl
+++ b/source/css/_page/common.styl
@@ -19,7 +19,6 @@
     border-radius: 8px
     background: var(--card-bg)
     box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
-    transition: all .3s
 
     &:hover
       box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
@@ -29,6 +28,7 @@
 
   & > div:first-child
     width: 75%
+    transition: all .3s
 
     +maxWidth900()
       width: 100% !important
diff --git a/source/js/main.js b/source/js/main.js
index c8c4e4b..08ae542 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -483,6 +483,11 @@ $(function () {
   // Back to top
   $rightsideEle.on('click', '#go-up', () => btf.scrollToDest('body'))
 
+  $rightsideEle.on('click', '#hide-aside-btn', () => {
+    const $htmlDom = $(document.documentElement)
+    $htmlDom.hasClass('hide-aside') ? $htmlDom.removeClass('hide-aside') : $htmlDom.addClass('hide-aside')
+  })
+
   /**
  * menu
  * 側邊欄sub-menu 展開/收縮