diff --git a/public/css/fonts/side_nav_font.woff b/public/css/fonts/side_nav_font.woff
new file mode 100644
index 000000000..297c262f1
Binary files /dev/null and b/public/css/fonts/side_nav_font.woff differ
diff --git a/public/site/css/side_nav.css b/public/site/css/side_nav.css
new file mode 100644
index 000000000..324916190
--- /dev/null
+++ b/public/site/css/side_nav.css
@@ -0,0 +1,142 @@
+@font-face {
+  font-family: "official.iconfont";
+  src: url("../../css/fonts/side_nav_font.woff");
+  font-weight: normal;
+  font-style: normal
+}
+
+.side_nav{
+  position: fixed;
+  right: 20px;
+  bottom: 135px;
+  z-index: 100;
+}
+.side_nav .side_toolbars{
+  width: 48px;
+  padding: 4px;
+  box-sizing: border-box;
+  border-radius: 60px;
+  background-color: var(--pop-bg-color);
+  color: var(--text-color);
+  box-shadow: var(--pop-box-shadow);
+}
+.side_nav .side_toolbars .side_toolbar_item{
+  display: flex;
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  position: relative;
+}
+.side_nav .side_toolbars .side_toolbar_item .toolbar_font{
+  font-size: 24px;
+  height: 24px;
+  color: var(--text-color);
+}
+.side_nav .side_toolbars .side_toolbar_item .toolbar_font::after{
+  display: inline-block;
+  font-family: "official.iconfont";
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+}
+.side_nav .side_toolbars .side_toolbar_item .font_phone::after{
+  content: "\EA25";
+}
+.side_nav .side_toolbars .side_toolbar_item .font_qrcode::after{
+  content: "\EA28";
+}
+.side_nav .side_toolbars .side_toolbar_item .toolbar_tooltip{
+  position: absolute;
+  right: 40px;
+  top: 2px;
+  transform-origin: right center;
+  white-space: nowrap;
+  width: fit-content;
+  display: none;
+  background-color: var(--code-bg-color);
+  color: #fff;
+  margin-right: 12px;
+  border-radius: 4px;
+  padding: 10px;
+  z-index: 2000;
+  font-size: 12px;
+  line-height: 1.2;
+  min-width: 10px;
+  word-wrap: break-word;
+  text-align: center;
+}
+.side_nav .side_toolbars .side_toolbar_item .toolbar_tooltip .toolbar_whtasapp{
+  width: 120px;
+  height: 120px;
+  background-image: url('../img/side_nav_whatsapp.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+} 
+.side_nav .side_toolbars .side_toolbar_item .toolbar_tooltip .toolbar_qrcode{
+  width: 120px;
+  height: 120px;
+  background-image: url('../img/side_nav_wechat.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+} 
+.side_nav .side_toolbars .side_toolbar_item .toolbar_tooltip .tooltip_arrow{
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  right: -5px;
+  top: 11px;
+  border-width: 6px;
+  border-right-width: 0;
+  border-left-color: var(--code-bg-color);
+}
+.side_nav .side_to_top{
+  width: 48px;
+  height: 48px;
+  background: #fff;
+  margin-top: 16px;
+  border-radius: 50%;
+  cursor: pointer;
+  position: relative;
+  display: none;
+  background-color: var(--pop-bg-color);
+  color: var(--text-color);
+  box-shadow: var(--pop-box-shadow);
+}
+.side_nav .side_to_top .side_to_top_wrapper{
+  height: 40px;
+  width: 40px;
+  padding: 4px;
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.side_nav .side_to_top .side_to_top_wrapper svg{
+  transform: rotate(180deg);
+  fill: var(--text-color);
+  height: 24px;
+  width: 24px;
+}
+.font_whatsapp svg{
+  fill: var(--text-color);
+}
+.side_nav .side_toolbars .side_toolbar_item:hover,.side_nav .side_to_top .side_to_top_wrapper:hover{
+  background-color: var(--bg-hover-color);
+}
+.side_nav .side_toolbars .side_toolbar_item_whtasapp:hover .toolbar_tooltip_qq,
+.side_nav .side_toolbars .side_toolbar_item_phone:hover .toolbar_tooltip_phone,
+.side_nav .side_toolbars .side_toolbar_item_qrcode:hover .toolbar_tooltip_qrcode{
+  display: block;
+}
\ No newline at end of file
diff --git a/public/site/en/about.html b/public/site/en/about.html
index c584cfa42..5018f2148 100644
--- a/public/site/en/about.html
+++ b/public/site/en/about.html
@@ -389,6 +389,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="//cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
@@ -517,5 +519,31 @@
   }
   window.addEventListener('scroll', animateBoxes);
   animateBoxes();
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/en/download.html b/public/site/en/download.html
index 708093d8c..fb33edc87 100644
--- a/public/site/en/download.html
+++ b/public/site/en/download.html
@@ -340,6 +340,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -483,5 +485,31 @@ if(!logsItem) {
 }else{
   updates.innerHTML = logsItem;
 }
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/en/help.html b/public/site/en/help.html
index 1066f0238..04d6ceb22 100644
--- a/public/site/en/help.html
+++ b/public/site/en/help.html
@@ -2370,6 +2370,8 @@
               </div>
         </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
 </div>
 </body>
 <script src="../js/common.js"></script>
@@ -2476,5 +2478,31 @@
             }
         }
     }
+    document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/en/index.html b/public/site/en/index.html
index 42db17507..a5576b161 100644
--- a/public/site/en/index.html
+++ b/public/site/en/index.html
@@ -532,6 +532,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -745,5 +747,31 @@ const arcs = document.querySelector('.home_arc');
   }
   window.addEventListener('scroll', animateBoxes);
   animateBoxes();
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/en/log.html b/public/site/en/log.html
index b5d10529b..fd1e17513 100644
--- a/public/site/en/log.html
+++ b/public/site/en/log.html
@@ -289,6 +289,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -527,5 +529,31 @@ function scrollHandler(){
         }
     }
 }
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/en/price.html b/public/site/en/price.html
index fb4251065..746f3187e 100644
--- a/public/site/en/price.html
+++ b/public/site/en/price.html
@@ -1271,6 +1271,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js">
@@ -1308,5 +1310,31 @@
     const box = document.querySelector('.BulletBox1')
     box.style.display = 'none'
   })
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/en/product.html b/public/site/en/product.html
index b3f7e8c16..d92781028 100644
--- a/public/site/en/product.html
+++ b/public/site/en/product.html
@@ -634,6 +634,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -718,5 +720,31 @@
   }
   window.addEventListener('scroll', animateBoxes);
   animateBoxes();
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/en/sideNav.html b/public/site/en/sideNav.html
new file mode 100644
index 000000000..58530e9e0
--- /dev/null
+++ b/public/site/en/sideNav.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Solutions - DooTask</title>
+  <meta name="google" value="notranslate">
+  <meta name="description" content="Lightweight open source online project task management tool to help teams efficiently advance their projects and make work easier.">
+  <meta name="keywords" content="China DooTask Task management Lightweight Hitosea Teamwork">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="shortcut icon" href="../img/favicon.ico">
+  <link rel="stylesheet" type="text/css" href="../css/side_nav.css">
+  <link rel="stylesheet" type="text/css" href="../css/rem.css">
+</head>
+<body>
+  <nav class="side_nav">
+    <ul class="side_toolbars">
+      <li class="side_toolbar_item side_toolbar_item_whtasapp" id="qq">
+        <i class="toolbar_font font_whatsapp">
+          <svg t="1714295618588" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5948" id="mx_n_1714295618589" width="24" height="24"><path d="M540.444444 56.888889c61.383111 0 120.32 12.117333 176.64 36.266667 56.035556 24.064 104.476444 56.433778 145.123556 97.080888 40.675556 40.647111 73.016889 89.088 97.080889 145.123556A443.648 443.648 0 0 1 995.555556 512c0 61.383111-12.117333 120.32-36.266667 176.64-24.064 56.035556-56.433778 104.476444-97.080889 145.123556-40.647111 40.675556-89.088 73.016889-145.123556 97.080888A443.648 443.648 0 0 1 540.444444 967.111111c-77.511111 0-150.072889-18.574222-217.258666-55.552l-11.804445-6.741333-9.415111-5.688889-151.694222 48.298667a28.472889 28.472889 0 0 1-36.977778-30.094223l0.568889-3.128889 0.853333-3.015111 49.009778-144.64-5.290666-7.907555A440.149333 440.149333 0 0 1 86.016 537.6l-0.540444-13.368889L85.333333 512c0-61.383111 12.117333-120.32 36.266667-176.64 24.064-56.035556 56.433778-104.476444 97.080889-145.123556 40.647111-40.675556 89.088-73.016889 145.123555-97.080888A443.648 443.648 0 0 1 540.444444 56.888889z m0 56.888889c-53.674667 0-104.988444 10.524444-154.225777 31.658666-49.493333 21.248-91.875556 49.578667-127.317334 85.020445-35.441778 35.441778-63.772444 77.824-85.020444 127.317333A386.759111 386.759111 0 0 0 142.222222 512c0 85.902222 25.258667 163.413333 76.088889 233.301333a28.444444 28.444444 0 0 1 4.835556 22.528l-0.910223 3.328-35.612444 104.988445 110.791111-35.242667a28.444444 28.444444 0 0 1 17.749333 0.170667l3.356445 1.365333 3.157333 1.820445C388.636444 888.32 461.368889 910.222222 540.444444 910.222222c53.674667 0 104.988444-10.524444 154.225778-31.658666 49.493333-21.248 91.875556-49.578667 127.317334-85.020445 35.441778-35.441778 63.772444-77.824 85.020444-127.317333A386.759111 386.759111 0 0 0 938.666667 512c0-53.674667-10.524444-104.988444-31.658667-154.225778-21.248-49.493333-49.578667-91.875556-85.020444-127.317333-35.441778-35.441778-77.824-63.772444-127.317334-85.020445A386.759111 386.759111 0 0 0 540.444444 113.777778z m-141.312 184.888889c1.706667 0 4.067556 0.170667 7.054223 0.483555l3.214222 0.369778c3.413333 0.426667 6.314667 0.711111 8.675555 0.796444l2.190223 0.056889c7.224889 0 12.288 1.251556 15.132444 3.697778 2.389333 2.076444 4.835556 6.058667 7.338667 11.946667l10.154666 26.453333 17.237334 46.990222c4.835556 13.767111 7.281778 21.589333 7.281778 23.495111 0 7.196444-5.319111 16.782222-15.985778 28.757334l-3.726222 4.096c-13.141333 13.909333-19.712 22.755556-19.712 26.567111 0 2.673778 0.938667 5.518222 2.844444 8.561778 12.942222 27.818667 32.369778 53.930667 58.311111 78.307555 19.171556 18.176 44.373333 35.555556 75.633778 52.195556l10.638222 5.518222c4.551111 2.645333 8.760889 3.982222 12.572445 3.982222 5.233778 0 14.307556-7.765333 27.221333-23.267555l3.612444-4.437334c14.876444-18.488889 24.775111-27.704889 29.724445-27.704889 4.636444 0 21.248 7.367111 49.834666 22.101334l17.237334 9.016889c24.860444 13.198222 38.115556 21.304889 39.793778 24.291555 0.768 1.905778 1.137778 4.778667 1.137777 8.590222 0 12.572444-3.242667 27.022222-9.728 43.406223-6.087111 14.876444-19.626667 27.335111-40.561777 37.432889-20.963556 10.097778-40.391111 15.160889-58.282667 15.160888-21.703111 0-57.912889-11.804444-108.572445-35.441777a326.115556 326.115556 0 0 1-97.137777-67.413334c-27.420444-27.818667-55.637333-63.061333-84.565334-105.728-27.448889-40.760889-40.96-77.710222-40.590222-110.848v-4.551111c1.137778-34.702222 15.246222-64.796444 42.296889-90.311111 9.130667-8.391111 19.057778-12.572444 29.724444-12.572444z" p-id="5949"></path></svg>
+        </i>
+        <div class="toolbar_tooltip toolbar_tooltip_qq">
+          <div class="toolbar_whtasapp"></div>
+          <span class="toolbar_qrcode_text">
+            WhatsApp
+          </span>
+          <div class="tooltip_arrow"></div>
+        </div>
+      </li>
+      <li class="side_toolbar_item side_toolbar_item_phone">
+        <i class="toolbar_font font_phone"></i>
+        <div class="toolbar_tooltip toolbar_tooltip_phone">
+          Phone：0771-3164099
+          <div class="tooltip_arrow"></div>
+        </div>
+      </li>
+      <li class="side_toolbar_item side_toolbar_item_qrcode">
+        <i class="toolbar_font font_qrcode"></i>
+        <div class="toolbar_tooltip toolbar_tooltip_qrcode">
+          <div class="toolbar_qrcode"></div>
+          <span class="toolbar_qrcode_text">
+            WeChat
+          </span>
+          <div class="tooltip_arrow"></div>
+        </div>
+      </li>
+    </ul>
+    <div class="side_to_top" id="back_to_top">
+      <div class="side_to_top_wrapper">
+        <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 12.2531C3.58579 12.2531 3.25 11.9173 3.25 11.5031C3.25 11.0889 3.58579 10.7531 4 10.7531L12 10.7531C12.4142 10.7531 12.75 11.0889 12.75 11.5031C12.75 11.9173 12.4142 12.2531 12 12.2531H4Z"></path>
+          <path d="M10.803 4.13636C11.0959 3.84346 11.5708 3.84346 11.8637 4.13636C12.1566 4.42925 12.1566 4.90412 11.8637 5.19702L8.53037 8.53035C8.38972 8.671 8.19895 8.75002 8.00004 8.75002C7.80113 8.75002 7.61036 8.671 7.46971 8.53035L4.13638 5.19702C3.84348 4.90412 3.84348 4.42925 4.13638 4.13636C4.42927 3.84346 4.90414 3.84346 5.19704 4.13636L8.00004 6.93936L10.803 4.13636Z"></path>
+        </svg>
+      </div>
+    </div>
+  </nav>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/site/en/solutions.html b/public/site/en/solutions.html
index d4384a985..c858b1c29 100644
--- a/public/site/en/solutions.html
+++ b/public/site/en/solutions.html
@@ -341,6 +341,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -363,5 +365,31 @@
   }
   window.addEventListener('scroll', animateBoxes);
   animateBoxes();
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/img/side_nav_wechat.png b/public/site/img/side_nav_wechat.png
new file mode 100644
index 000000000..91f16ea93
Binary files /dev/null and b/public/site/img/side_nav_wechat.png differ
diff --git a/public/site/img/side_nav_whatsapp.png b/public/site/img/side_nav_whatsapp.png
new file mode 100644
index 000000000..368b9dd23
Binary files /dev/null and b/public/site/img/side_nav_whatsapp.png differ
diff --git a/public/site/zh/about.html b/public/site/zh/about.html
index 8fc664141..db843f335 100644
--- a/public/site/zh/about.html
+++ b/public/site/zh/about.html
@@ -387,6 +387,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="//cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
@@ -517,5 +519,31 @@
   }
   window.addEventListener('scroll', animateBoxes);
   animateBoxes();
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/zh/download.html b/public/site/zh/download.html
index d317eeffb..d2183005d 100644
--- a/public/site/zh/download.html
+++ b/public/site/zh/download.html
@@ -338,6 +338,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -481,5 +483,31 @@ if(!logsItem) {
 }else{
   updates.innerHTML = logsItem;
 }
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/zh/help.html b/public/site/zh/help.html
index 0f00b878f..191e2fdaf 100644
--- a/public/site/zh/help.html
+++ b/public/site/zh/help.html
@@ -749,6 +749,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -843,5 +845,31 @@ function scrollHandler(){
         }
     }
 }
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/zh/index.html b/public/site/zh/index.html
index 79d7d759b..36ea3ecb6 100644
--- a/public/site/zh/index.html
+++ b/public/site/zh/index.html
@@ -531,6 +531,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -745,5 +747,31 @@ const arcs = document.querySelector('.home_arc');
   }
   window.addEventListener('scroll', animateBoxes);
   animateBoxes();
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/zh/log.html b/public/site/zh/log.html
index 59a5a9571..389260294 100644
--- a/public/site/zh/log.html
+++ b/public/site/zh/log.html
@@ -289,6 +289,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -525,5 +527,31 @@ function scrollHandler(){
         }
     }
 }
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/zh/price.html b/public/site/zh/price.html
index 501df49db..73e3c4ab0 100644
--- a/public/site/zh/price.html
+++ b/public/site/zh/price.html
@@ -1279,6 +1279,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -1314,5 +1316,31 @@
     const box = document.querySelector('.BulletBox1')
     box.style.display = 'none'
   })
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/zh/product.html b/public/site/zh/product.html
index 479d7b1cd..d87a45245 100644
--- a/public/site/zh/product.html
+++ b/public/site/zh/product.html
@@ -636,6 +636,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -719,5 +721,31 @@
   }
   window.addEventListener('scroll', animateBoxes);
   animateBoxes();
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>
diff --git a/public/site/zh/sideNav.html b/public/site/zh/sideNav.html
new file mode 100644
index 000000000..49e8f60bb
--- /dev/null
+++ b/public/site/zh/sideNav.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>DooTask - 最受欢迎的开源项目协助工具</title>
+  <meta name="google" value="notranslate">
+  <meta name="description" content="DooTask是一款轻量级的开源在线项目任务管理工具，提供各类文档协作工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM，文件管理等工具。助力团队高效推进项目，让工作更简单。">
+  <meta name="keywords" content="中国 DooTask 开源在线项目 任务管理工具 任务管理 轻量级 海豚有海 团队协作">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="shortcut icon" href="../img/favicon.ico">
+  <link rel="stylesheet" type="text/css" href="../css/common.css">
+  <link rel="stylesheet" type="text/css" href="../css/side_nav.css">
+  <link rel="stylesheet" type="text/css" href="../css/rem.css">
+</head>
+<body>
+  <nav class="side_nav">
+    <ul class="side_toolbars">
+      <li class="side_toolbar_item side_toolbar_item_whtasapp" id="qq">
+        <i class="toolbar_font font_whatsapp">
+          <svg t="1714295618588" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5948" id="mx_n_1714295618589" width="24" height="24"><path d="M540.444444 56.888889c61.383111 0 120.32 12.117333 176.64 36.266667 56.035556 24.064 104.476444 56.433778 145.123556 97.080888 40.675556 40.647111 73.016889 89.088 97.080889 145.123556A443.648 443.648 0 0 1 995.555556 512c0 61.383111-12.117333 120.32-36.266667 176.64-24.064 56.035556-56.433778 104.476444-97.080889 145.123556-40.647111 40.675556-89.088 73.016889-145.123556 97.080888A443.648 443.648 0 0 1 540.444444 967.111111c-77.511111 0-150.072889-18.574222-217.258666-55.552l-11.804445-6.741333-9.415111-5.688889-151.694222 48.298667a28.472889 28.472889 0 0 1-36.977778-30.094223l0.568889-3.128889 0.853333-3.015111 49.009778-144.64-5.290666-7.907555A440.149333 440.149333 0 0 1 86.016 537.6l-0.540444-13.368889L85.333333 512c0-61.383111 12.117333-120.32 36.266667-176.64 24.064-56.035556 56.433778-104.476444 97.080889-145.123556 40.647111-40.675556 89.088-73.016889 145.123555-97.080888A443.648 443.648 0 0 1 540.444444 56.888889z m0 56.888889c-53.674667 0-104.988444 10.524444-154.225777 31.658666-49.493333 21.248-91.875556 49.578667-127.317334 85.020445-35.441778 35.441778-63.772444 77.824-85.020444 127.317333A386.759111 386.759111 0 0 0 142.222222 512c0 85.902222 25.258667 163.413333 76.088889 233.301333a28.444444 28.444444 0 0 1 4.835556 22.528l-0.910223 3.328-35.612444 104.988445 110.791111-35.242667a28.444444 28.444444 0 0 1 17.749333 0.170667l3.356445 1.365333 3.157333 1.820445C388.636444 888.32 461.368889 910.222222 540.444444 910.222222c53.674667 0 104.988444-10.524444 154.225778-31.658666 49.493333-21.248 91.875556-49.578667 127.317334-85.020445 35.441778-35.441778 63.772444-77.824 85.020444-127.317333A386.759111 386.759111 0 0 0 938.666667 512c0-53.674667-10.524444-104.988444-31.658667-154.225778-21.248-49.493333-49.578667-91.875556-85.020444-127.317333-35.441778-35.441778-77.824-63.772444-127.317334-85.020445A386.759111 386.759111 0 0 0 540.444444 113.777778z m-141.312 184.888889c1.706667 0 4.067556 0.170667 7.054223 0.483555l3.214222 0.369778c3.413333 0.426667 6.314667 0.711111 8.675555 0.796444l2.190223 0.056889c7.224889 0 12.288 1.251556 15.132444 3.697778 2.389333 2.076444 4.835556 6.058667 7.338667 11.946667l10.154666 26.453333 17.237334 46.990222c4.835556 13.767111 7.281778 21.589333 7.281778 23.495111 0 7.196444-5.319111 16.782222-15.985778 28.757334l-3.726222 4.096c-13.141333 13.909333-19.712 22.755556-19.712 26.567111 0 2.673778 0.938667 5.518222 2.844444 8.561778 12.942222 27.818667 32.369778 53.930667 58.311111 78.307555 19.171556 18.176 44.373333 35.555556 75.633778 52.195556l10.638222 5.518222c4.551111 2.645333 8.760889 3.982222 12.572445 3.982222 5.233778 0 14.307556-7.765333 27.221333-23.267555l3.612444-4.437334c14.876444-18.488889 24.775111-27.704889 29.724445-27.704889 4.636444 0 21.248 7.367111 49.834666 22.101334l17.237334 9.016889c24.860444 13.198222 38.115556 21.304889 39.793778 24.291555 0.768 1.905778 1.137778 4.778667 1.137777 8.590222 0 12.572444-3.242667 27.022222-9.728 43.406223-6.087111 14.876444-19.626667 27.335111-40.561777 37.432889-20.963556 10.097778-40.391111 15.160889-58.282667 15.160888-21.703111 0-57.912889-11.804444-108.572445-35.441777a326.115556 326.115556 0 0 1-97.137777-67.413334c-27.420444-27.818667-55.637333-63.061333-84.565334-105.728-27.448889-40.760889-40.96-77.710222-40.590222-110.848v-4.551111c1.137778-34.702222 15.246222-64.796444 42.296889-90.311111 9.130667-8.391111 19.057778-12.572444 29.724444-12.572444z" p-id="5949"></path></svg>
+        </i>
+        <div class="toolbar_tooltip toolbar_tooltip_qq">
+          <div class="toolbar_whtasapp"></div>
+          <span class="toolbar_qrcode_text">
+            WhatsApp
+          </span>
+          <div class="tooltip_arrow"></div>
+        </div>
+      </li>
+      <li class="side_toolbar_item side_toolbar_item_phone">
+        <i class="toolbar_font font_phone"></i>
+        <div class="toolbar_tooltip toolbar_tooltip_phone">
+          服务电话：0771-3164099
+          <div class="tooltip_arrow"></div>
+        </div>
+      </li>
+      <li class="side_toolbar_item side_toolbar_item_qrcode">
+        <i class="toolbar_font font_qrcode"></i>
+        <div class="toolbar_tooltip toolbar_tooltip_qrcode">
+          <div class="toolbar_qrcode"></div>
+          <span class="toolbar_qrcode_text">
+            微信客服
+          </span>
+          <div class="tooltip_arrow"></div>
+        </div>
+      </li>
+    </ul>
+    <div class="side_to_top" id="back_to_top">
+      <div class="side_to_top_wrapper">
+        <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 12.2531C3.58579 12.2531 3.25 11.9173 3.25 11.5031C3.25 11.0889 3.58579 10.7531 4 10.7531L12 10.7531C12.4142 10.7531 12.75 11.0889 12.75 11.5031C12.75 11.9173 12.4142 12.2531 12 12.2531H4Z"></path>
+          <path d="M10.803 4.13636C11.0959 3.84346 11.5708 3.84346 11.8637 4.13636C12.1566 4.42925 12.1566 4.90412 11.8637 5.19702L8.53037 8.53035C8.38972 8.671 8.19895 8.75002 8.00004 8.75002C7.80113 8.75002 7.61036 8.671 7.46971 8.53035L4.13638 5.19702C3.84348 4.90412 3.84348 4.42925 4.13638 4.13636C4.42927 3.84346 4.90414 3.84346 5.19704 4.13636L8.00004 6.93936L10.803 4.13636Z"></path>
+        </svg>
+      </div>
+    </div>
+  </nav>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/site/zh/solutions.html b/public/site/zh/solutions.html
index 5c6216293..6c433c5da 100644
--- a/public/site/zh/solutions.html
+++ b/public/site/zh/solutions.html
@@ -342,6 +342,8 @@
         </div>
       </div>
     </footer>
+    <!-- 侧边导航 -->
+    <div id="nav_wrap"></div>
   </div>
 </body>
 <script src="../js/common.js"></script>
@@ -364,5 +366,31 @@
   }
   window.addEventListener('scroll', animateBoxes);
   animateBoxes();
+  document.addEventListener('DOMContentLoaded', function() {
+    fetch('./sideNav.html')
+      .then(response => response.text())
+        .then(data => {
+            document.getElementById('nav_wrap').innerHTML = data;
+            // 回到顶部
+            const back_top_button = document.getElementById('back_to_top');
+            window.addEventListener('scroll', () => {
+              if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                back_top_button.style.display = 'block';
+              } else {
+                back_top_button.style.display = 'none';
+              }
+            });
+            back_top_button.addEventListener('click', () => {
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+            });
+            // 检查页面加载时的滚动位置以决定是否显示回到顶部按钮
+            if (document.documentElement.scrollTop > 20) {
+              back_top_button.style.display = 'block'; // 显示回到顶部按钮
+            }
+        });
+  });
 </script>
 </html>