add menu toggle icon

themes/beauty/views/site/index.php

@@ -10,6 +10,11 @@ $supportedExts = array_merge($imgExts, $videoExts);
 $authConfig = FSC::$app['config']['password_auth'];
 
 $dir_ext_status = !empty($_COOKIE['dir_ext_status']) ? $_COOKIE['dir_ext_status'] : 'opened';
+$menu_ext_status = !empty($_COOKIE['menu_ext_status']) ? $_COOKIE['menu_ext_status'] : 'opened';
+
+$menu_expand_icon_cls = $menu_ext_status == 'opened' ? '' : 'closed';
+$menu_expand_icon_url = $menu_ext_status == 'opened' ? 'arrow-left-circle.svg' : 'arrow-right-circle.svg';
+$main_view_cls = $menu_ext_status == 'opened' ? '' : 'full';
 ?><!-- 顶部导航栏模块 -->
 <nav class="navbar navbar-default navbar-fixed-top navbarJS">
     <div class="container-fluid">
@@ -47,7 +52,7 @@ $dir_ext_status = !empty($_COOKIE['dir_ext_status']) ? $_COOKIE['dir_ext_status'
             </form>
             */ ?>
 
-            <ul class="nav navbar-fixed-left">
+            <ul class="nav navbar-fixed-left <?=$menu_expand_icon_cls?>">
                 <?php
                 $breadcrumbs = !empty($viewData['breadcrumbs']) ? $viewData['breadcrumbs'] : [];
                 if (!empty($viewData['menus'])) {        //只显示第一级目录
@@ -59,13 +64,14 @@ eof;
                     }
                 }
                 ?>
+                <li class="expand-icon hidden-xs" data-status="<?=$menu_ext_status?>"><img src="/img/beauty/<?=$menu_expand_icon_url?>" width="18" alt="arrow"></li>
             </ul>
         </div><!-- /.navbar-collapse -->
     </div><!-- /.container-fluid -->
 </nav>
 
 <!-- 内容主题 -->
-<div class="img_main">
+<div class="img_main <?=$main_view_cls?>">
 
 <?php
 $category = !empty($viewData['scanResults'][$selectedId]) ? $viewData['scanResults'][$selectedId] : [];

www/css/beauty.css

@@ -87,6 +87,13 @@ a:link{text-decoration:none}
 .im_item .btn-set-snap{display:none;position:absolute;top:5px;right:5px;opacity:0.8}
 .im_item:hover .btn-set-snap{display:inline-block}
 
+
+.navbar-fixed-left .expand-icon{position:fixed;top:58px;left:130px;cursor:pointer;padding:5px}
+.navbar-fixed-left.closed{width:28px;overflow:hidden}
+.navbar-fixed-left.closed li{display:none}
+.navbar-fixed-left.closed li.expand-icon{display:block;left:5px}
+.img_main.full{margin-left:28px}
+
 .locked_dir{position:absolute;right:3px;top:5px}
 
 .web_info{padding:10px 0 42px 0;margin-top:75px;border-top:solid 1px #f5f5f5}

www/img/beauty/arrow-left-circle.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z"/>
+</svg>

www/img/beauty/arrow-right-circle.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/>
+</svg>

www/js/beauty.js

@@ -786,6 +786,27 @@ $('.btn-dir-ext').click(function(evt) {
         $('.btn-dir-ext').find('img').attr('src', '/img/arrow-up.svg');
         $('.btn-dir-ext').find('span').text(opened_title);
 
+        Cookies.set(cookieKey, 'opened', { expires: 1 });
+    }
+});
+
+$('.expand-icon').click(function(evt) {
+    var cookieKey = 'menu_ext_status';
+    var status = $('.expand-icon').attr('data-status');
+
+    if (!status || status == 'opened') {
+        $('.expand-icon').attr('data-status', 'closed');
+        $('.img_main').addClass('full');
+        $('.expand-icon img').attr('src', '/img/beauty/arrow-right-circle.svg');
+        $('.navbar-fixed-left').addClass('closed');
+
+        Cookies.set(cookieKey, 'closed', { expires: 1 });
+    }else {
+        $('.expand-icon').attr('data-status', 'opened');
+        $('.img_main').removeClass('full');
+        $('.expand-icon img').attr('src', '/img/beauty/arrow-left-circle.svg');
+        $('.navbar-fixed-left').removeClass('closed');
+
         Cookies.set(cookieKey, 'opened', { expires: 1 });
     }
 });