更新

assets/css/joe.global.scss

@@ -467,6 +467,22 @@
 			}
 		}
 	}
+	&__slideout {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		width: 70%;
+		z-index: 990;
+		background: var(--background);
+		transform: translate3d(-100%, 0, 0);
+		visibility: hidden;
+		transition: transform 0.35s, visibility 0.35s;
+		&.active {
+			visibility: visible;
+			transform: translate3d(0, 0, 0);
+		}
+	}
 }
 
 .joe_aside {

assets/js/joe.global.js

@@ -351,13 +351,30 @@ document.addEventListener('DOMContentLoaded', () => {
 	/* 小屏幕伸缩侧边栏 */
 	{
 		$('.joe_header__above-slide').on('click', function () {
-			$(this).toggleClass('active')
+			/* 关闭搜索框 */
+			$('.joe_header__searchout').removeClass('active')
+			/* 处理开启关闭状态 */
+			if ($('.joe_header__slideout').hasClass('active')) {
+				$('body').css('overflow', '')
+				$('.joe_mask').removeClass('active')
+				$('.joe_header__above-slide').removeClass("active")
+				$('.joe_header__slideout').removeClass("active")
+			} else {
+				$('body').css('overflow', 'hidden')
+				$('.joe_mask').addClass('active')
+				$('.joe_header__above-slide').addClass("active")
+				$('.joe_header__slideout').addClass("active")
+			}
 		})
 	}
 
 	/* 小屏幕搜索框 */
 	{
 		$('.joe_header__above-searchicon').on('click', function () {
+			/* 关闭侧边栏 */
+			$('.joe_header__above-slide').removeClass('active')
+			$('.joe_header__slideout').removeClass('active')
+			/* 处理开启关闭状态 */
 			if ($('.joe_header__searchout').hasClass('active')) {
 				$('body').css('overflow', '')
 				$('.joe_mask').removeClass('active')
@@ -376,6 +393,8 @@ document.addEventListener('DOMContentLoaded', () => {
 			$('body').css('overflow', '')
 			$('.joe_mask').removeClass('active')
 			$('.joe_header__searchout').removeClass('active')
+			$('.joe_header__slideout').removeClass('active')
+			$('.joe_header__above-slide').removeClass('active')
 		})
 	}
 })

public/header.php

@@ -1,5 +1,5 @@
 <header class="joe_header">
-    
+
     <div class="joe_header__above">
         <div class="joe_container">
             <div class="joe_header__above-slide">
@@ -257,6 +257,10 @@
             </div>
         </div>
     </div>
+
+    <div class="joe_header__slideout">
+        <img src="" alt="">
+    </div>
 </header>
 
 <div class="joe_mask"></div>