(skywalking-website) branch master updated: fix(ui): polish mobile navbar + slide-out drawer (light theme); hide desktop right-group below lg (#846)

[wusheng]

This is an automated email from the ASF dual-hosted git repository.

wu-sheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 2d339cfa1e7 fix(ui): polish mobile navbar + slide-out drawer (light 
theme); hide desktop right-group below lg (#846)
2d339cfa1e7 is described below

commit 2d339cfa1e7e2162c6f58b284994d306782d44b4
Author: 吴晟 Wu Sheng <wu.sh...@foxmail.com>
AuthorDate: Thu May 21 11:39:07 2026 +0800

    fix(ui): polish mobile navbar + slide-out drawer (light theme); hide 
desktop right-group below lg (#846)
---
 assets/scss/_custom_home.scss | 53 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/assets/scss/_custom_home.scss b/assets/scss/_custom_home.scss
index 0fd1376c3f6..6e084da6566 100644
--- a/assets/scss/_custom_home.scss
+++ b/assets/scss/_custom_home.scss
@@ -1118,3 +1118,56 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0 
100%);
     .verify .code-wrapper { grid-template-columns: 1fr; }
   }
 }
+
+// =====================================================================
+// Mobile navbar + slide-out drawer — light-theme polish (global)
+// =====================================================================
+@media (max-width: 991.98px) {
+  // my desktop right-group override forced display:flex even on mobile;
+  // restore the intended "hidden below lg" so the narrow bar isn't crowded
+  .td-navbar .search-input-box { display: none !important; }
+}
+.td-navbar .sidebar-button .iconfont.icon-menu { color: #4b5563; }
+.td-navbar .sidebar-button:hover .iconfont.icon-menu { color: #1F1F20; }
+
+// dimmed backdrop
+.sidebar-mask { background-color: #0f131a; opacity: .38; }
+
+// the drawer panel
+.sidebar {
+  top: 64px;                 // sit flush under the 4rem navbar
+  width: 19rem; max-width: 86vw;
+  background: #fff;
+  border-right: 1px solid #e6e9ee;
+  box-shadow: 0 24px 60px -18px rgba(17, 24, 39, .35);
+  padding: 12px 10px 24px;
+
+  .nav-links { padding: 0; }
+  .nav-links .nav-item, .nav-links .repo-link { border: 0; margin: 0; }
+
+  // top-level links
+  .nav-links a.nav-link {
+    display: block; padding: 10px 14px; border-radius: 9px;
+    color: #4b5563; font-weight: 600; font-size: 15px; line-height: 1.3;
+    &:hover { background: #eef5fd; color: #1F1F20; }
+    &.router-link-active, &.active { color: #2c6cb0; background: #eef5fd; }
+  }
+
+  // dropdown groups (中文资料 / Links)
+  .dropdown-wrapper { margin-top: 4px; }
+  .dropdown-wrapper .dropdown-title {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 10px 14px; border-radius: 9px;
+    color: #8a93a3; font-weight: 700; font-size: 11px; letter-spacing: .08em; 
text-transform: uppercase;
+    cursor: pointer;
+    &:hover { background: #f4f7fb; color: #4b5563; }
+  }
+  .dropdown-wrapper .nav-dropdown { margin: 2px 0 8px; padding: 0; list-style: 
none; }
+  .dropdown-wrapper .nav-dropdown .dropdown-item a {
+    display: block; padding: 8px 14px 8px 22px; border-radius: 8px;
+    color: #5b6573; font-size: 14px; font-weight: 500;
+    &:hover { background: #eef5fd; color: $brand; }
+  }
+  // hide the little caret arrows; the groups read fine as labels
+  .dropdown-wrapper .dropdown-title .arrow { display: none; }
+}