From d59cb00da74360bacdc1c60ac1aca7c79d4e5c46 Mon Sep 17 00:00:00 2001
From: filesite <release@filesite.io>
Date: Wed, 18 Sep 2024 16:23:25 +0800
Subject: [PATCH] add menu toggle icon

---
 themes/beauty/views/site/index.php    | 10 ++++++++--
 www/css/beauty.css                    |  7 +++++++
 www/img/beauty/arrow-left-circle.svg  |  4 ++++
 www/img/beauty/arrow-right-circle.svg |  4 ++++
 www/js/beauty.js                      | 21 +++++++++++++++++++++
 5 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 www/img/beauty/arrow-left-circle.svg
 create mode 100644 www/img/beauty/arrow-right-circle.svg

diff --git a/themes/beauty/views/site/index.php b/themes/beauty/views/site/index.php
index 85a1ede..85936c1 100644
--- a/themes/beauty/views/site/index.php
+++ b/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] : [];
diff --git a/www/css/beauty.css b/www/css/beauty.css
index 7ccf243..3fc556e 100644
--- a/www/css/beauty.css
+++ b/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}
diff --git a/www/img/beauty/arrow-left-circle.svg b/www/img/beauty/arrow-left-circle.svg
new file mode 100644
index 0000000..b7dcc11
--- /dev/null
+++ b/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>
diff --git a/www/img/beauty/arrow-right-circle.svg b/www/img/beauty/arrow-right-circle.svg
new file mode 100644
index 0000000..cf884b7
--- /dev/null
+++ b/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>
diff --git a/www/js/beauty.js b/www/js/beauty.js
index 3b718c4..89a3c70 100644
--- a/www/js/beauty.js
+++ b/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 });
     }
 });
\ No newline at end of file