feat: make left & right bar responsive

Author: Xecades

src/App.vue

@@ -24,15 +24,13 @@ window.onresize = () => {
     left_stat.value = get_leftbar_status();
     right_stat.value = get_rightbar_status();
 };
-
-const in_view: Ref<number | null> = ref(null);
 </script>
 
 <template>
     <div id="main" v-if="meta">
         <LeftBar :status="left_stat" :current-category="meta.category" />
         <Content :meta="meta" />
-        <RightBar :status="right_stat" :in-view="in_view" :toc="meta.toc" />
+        <RightBar :status="right_stat" :toc="meta.toc" />
         <Logo />
     </div>
 </template>

src/assets/css/global.styl

@@ -25,6 +25,8 @@ $monospace = "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", mono
 $theme-color = #60a5fa;
 $text-color = #181818;
 $text-color-d = #d1d5db;
+$background-light = #fefefe;
+$background-dark = #1a1b1c;
 
 // SVG
 $checkbox-svg = 'data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="white" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>';

src/assets/css/main.styl

@@ -2,7 +2,7 @@
 @import "https://fonts.cdnfonts.com/css/libertinus-serif";
 @import "./global.styl";
 
-schemer(--body-background-color, #fefefe, #1a1b1c);
+schemer(--body-background-color, $background-light, $background-dark);
 schemer(--body-text-color, $text-color, $text-color-d);
 
 // Overlay Scrollbar Theme

src/assets/ts/leftbar.tsx

@@ -16,11 +16,11 @@ import type { JSX } from "vue/jsx-runtime";
  */
 export const get_leftbar_status = (): LEFTBAR_STATUS => {
     if (isMobile()) {
+        return LEFTBAR_STATUS.SHOW_SEARCH_AND_CATEGORY;
+    } else {
         return isWidthLessThan(SMALL_SCREEN_WIDTH)
             ? LEFTBAR_STATUS.SHOW_SEARCH_AND_CATEGORY
-            : LEFTBAR_STATUS.ONLY_SEARCH_BUTTON;
-    } else {
-        return isWidthLessThan(LEFTBAR_THRESHOLD)
+            : isWidthLessThan(LEFTBAR_THRESHOLD)
             ? LEFTBAR_STATUS.ONLY_SEARCH_BUTTON
             : LEFTBAR_STATUS.HOVER_TO_SHOW;
     }

src/assets/ts/rightbar.ts

@@ -13,15 +13,9 @@ export type SerialHeader = MarkdownHeaderJsx & {
 };
 export type CascadeHeader = SerialHeader & { children: SerialHeader[] };
 
-const width_preset: string[] = ["50px", "40px", "30px", "20px", "13px"];
-const indent_preset: string[] = [
-    "0rem",
-    "1.3rem",
-    "1.7rem",
-    "2.3rem",
-    "2.8rem",
-];
-const opacity_preset: string[] = ["1", "0.8", "0.7", "0.7", "0.7"];
+const width_preset = ["50px", "40px", "30px", "20px", "13px"];
+const indent_preset = ["0rem", "1.3rem", "1.7rem", "2.3rem", "2.8rem"];
+const opacity_preset = ["1", "0.8", "0.7", "0.7", "0.7"];
 
 /**
  * Determine rightbar status (i.e. whether to display or not).
@@ -80,14 +74,14 @@ export const cascade_toc = (s_toc: SerialHeader[]): CascadeHeader[] => {
  */
 export class ScrollListener {
     targets: Element[];
-    store: Ref<number | null>;
+    store: Ref<number>;
 
     /**
      * Constructor.
      *
      * @param in_view - Ref to store the index of the element in view
      */
-    constructor(in_view: Ref<number | null>) {
+    constructor(in_view: Ref<number>) {
         this.targets = [];
         this.store = in_view;
 
@@ -115,7 +109,7 @@ export class ScrollListener {
      */
     reset(): void {
         this.targets = [];
-        this.store.value = null;
+        this.store.value = -1;
     }
 
     /**

src/assets/ts/utils.ts

@@ -91,7 +91,7 @@ export const shuffle = <T>(array: T[]): T[] => {
 export const SMALL_SCREEN_WIDTH: number = 768;
 
 /** The minimum screen width required for rightbar to display. */
-export const RIGHTBAR_THRESHOLD: number = 1280;
+export const RIGHTBAR_THRESHOLD: number = 880;
 
 /** The threshold screen width required for leftbar to switch style. */
-export const LEFTBAR_THRESHOLD: number = 1260;
+export const LEFTBAR_THRESHOLD: number = 880;

src/components/LeftBar.vue

@@ -154,7 +154,22 @@ watchEffect(() => {
 </script>
 
 <template>
-    <div id="left" @mouseenter="mouse.enter" @mouseleave="mouse.leave">
+    <div
+        id="left"
+        @mouseenter="mouse.enter"
+        @mouseleave="mouse.leave"
+        :style="{
+            '--z-index': do_show_detail
+                ? 1001
+                : status == LEFTBAR_STATUS.HOVER_TO_SHOW
+                ? 0
+                : 1001,
+            '--height':
+                status == LEFTBAR_STATUS.HOVER_TO_SHOW
+                    ? 'calc(100vh - var(--offset-top) * 2)'
+                    : 'unset',
+        }"
+    >
         <ul class="nav">
             <li class="btn" id="search" @click="search.reveal">
                 <font-awesome-icon :icon="['fas', 'magnifying-glass']" />
@@ -234,10 +249,9 @@ $width = $toc-offset-left + $toc-width;
     scheme(--toc-color, lighten($text-color, 30%), darken($text-color-d, 5%));
 
     // Global
+    scheme(--background-color, alpha($background-light, 90%), alpha($background-dark, 90%));
     dual(--offset-top, 28px, 32px);
     dual(--offset-left, 35px, 27px);
-    dual(--height, calc(100vh - var(--offset-top) * 2), unset);
-    dual(--z-index, 100, 1001);
 
     position: fixed;
     left: var(--offset-left);
@@ -246,9 +260,13 @@ $width = $toc-offset-left + $toc-width;
     height: var(--height);
     z-index: var(--z-index);
 
+    .nav, .category, .content
+        background-color: var(--background-color);
+
     .nav
         display: flex;
         flex-direction: row;
+        width: fit-content;
         gap: var(--nav-gap);
 
         .btn

src/components/RightBar.vue

@@ -18,8 +18,8 @@ const mouse = {
     leave: () => (show_text.value = false),
 };
 
-const in_view: Ref<number | null> = ref(null);
-const sl: ScrollListener = new ScrollListener(in_view);
+const in_view: Ref<number> = ref(-1);
+const sl = new ScrollListener(in_view);
 
 const registerScrollListener = () => {
     sl.reset();
@@ -42,6 +42,7 @@ onMounted(registerScrollListener);
             :key="$route.path"
             @mouseenter="mouse.enter"
             @mouseleave="mouse.leave"
+            :style="{ '--z-index': show_text ? 1001 : 0 }"
         >
             <!-- https://cn.vuejs.org/guide/built-ins/transition.html#javascript-hooks -->
             <Transition name="bars">
@@ -62,7 +63,7 @@ onMounted(registerScrollListener);
                         <RightBarDetail
                             class="root"
                             :item="item"
-                            :in_view="in_view!"
+                            :in_view="in_view"
                             :class="{
                                 expand:
                                     item.children.length &&
@@ -79,7 +80,7 @@ onMounted(registerScrollListener);
                                     v-for="child in item.children"
                                     class="sub"
                                     :item="child"
-                                    :in_view="in_view!"
+                                    :in_view="in_view"
                                     :key="child.index"
                                 />
                             </div>
@@ -113,6 +114,7 @@ $bar-padding = 4px;
 $indicator-margin = 4px;
 
 #right
+    scheme(--background-color, alpha($background-light, 90%), alpha($background-dark, 90%));
     scheme(--detail-color, lighten($text-color, 10%), $text-color-d);
     scheme(--detail-color-passed, lighten($text-color, 55%), darken($text-color-d, 50%));
     scheme(--bar-background-color, lighten(black, 88%), lighten(black, 28%));
@@ -122,7 +124,7 @@ $indicator-margin = 4px;
     width: $width;
     height: $height;
     top: $offset-top;
-    z-index: 100;
+    z-index: var(--z-index);
 
     // To avoid scrollbar flickering
     left: "calc(100vw - %s)" % ($offset-right + $width);
@@ -137,6 +139,8 @@ $indicator-margin = 4px;
         right: 0;
         padding: $toc-padding;
         margin: $toc-margin;
+        background-color: var(--background-color);
+        border-radius: 4px;
 
         // To avoid flickering on hovering edges
         margin-right: $toc-translate-offset;

todo.md

@@ -1,8 +1,6 @@
 ## 近期
 
  - LeftBar 添加折叠
-
- - Left Right Bar 的 Responsive Design
  - 深色模式切换按钮（切换的时候给所有元素设置临时的 transition !important？）（放 rightbar？或者不要也可以）
  - 每次修改 md 后，因为 routes.tsx 变动，导致页面需要全部刷新，可以优化一下
  - 渲染 plugin，遇到 fatal error 不要直接挂掉