[gem-book] Improve mobile

mantou132 · Dec 26, 2023 · fe5d96a · fe5d96a
1 parent 890af84
commit fe5d96a
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 34 deletions.
diff --git a/packages/duoyun-ui/package.json b/packages/duoyun-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "duoyun-ui",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "A lightweight desktop UI component library, implemented using Gem",
   "keywords": [
     "frontend",
@@ -48,7 +48,7 @@
     "elkjs": "^0.7.1"
   },
   "peerDependencies": {
-    "@mantou/gem": "^1.7.2"
+    "@mantou/gem": "^1.7.6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4-fix.0",

diff --git a/packages/gem-book/src/element/elements/icons.ts b/packages/gem-book/src/element/elements/icons.ts
@@ -1,6 +1,23 @@
 import { raw } from '@mantou/gem';
 
 export const icons = {
+  github: raw`
+    <svg width="16" height="16" viewBox="0 0 16 16">
+      <path fill="currentColor" d="M8 0a8.1 8.1 0 0 0-8 8.2c0 3.63 2.3 6.7 5.47 7.79l.14.01c.3 0 .4-.22.4-.4v-1.4c-.3.06-.57.1-.81.1-1.54 0-1.89-1.2-1.89-1.2-.36-.95-.89-1.2-.89-1.2-.7-.5 0-.5.05-.5.8.06 1.23.84 1.23.84.4.7.94.9 1.41.9.38 0 .72-.12.92-.21.07-.53.28-.9.5-1.1-1.77-.2-3.64-.91-3.64-4.05 0-.9.31-1.63.82-2.2-.08-.21-.35-1.05.08-2.18l.18-.01c.3 0 .94.1 2.02.86a7.5 7.5 0 0 1 4.01 0c1.08-.75 1.73-.86 2.02-.86l.18.01c.44 1.13.16 1.97.08 2.18.5.57.82 1.3.82 2.2 0 3.15-1.87 3.84-3.65 4.04.28.25.54.75.54 1.52l-.01 2.25c0 .2.1.41.4.41l.15-.01A8.19 8.19 0 0 0 16 8.2 8.1 8.1 0 0 0 8 0Z"/>
+    </svg>
+  `,
+  menu: raw`
+    <svg part="icon" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
+      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
+    </svg>
+  `,
+  close: raw`
+    <svg part="icon" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
+      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
+    </svg>
+  `,
   i18n: raw`
     <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none"></path>

diff --git a/packages/gem-book/src/element/elements/nav-logo.ts b/packages/gem-book/src/element/elements/nav-logo.ts
@@ -14,7 +14,9 @@ const style = createCSSSheet(css`
     flex-shrink: 0;
   }
   gem-link {
-    display: contents;
+    display: flex;
+    align-items: center;
+    height: 100%;
     text-decoration: none;
     color: inherit;
   }

diff --git a/packages/gem-book/src/element/elements/nav.ts b/packages/gem-book/src/element/elements/nav.ts
@@ -16,6 +16,7 @@ import { capitalize, isSameOrigin } from '../lib/utils';
 import { bookStore } from '../store';
 
 import { icons } from './icons';
+import { sidebarStore, toggleSidebar } from './sidebar';
 
 import '@mantou/gem/elements/link';
 import '@mantou/gem/elements/use';
@@ -28,6 +29,7 @@ import './nav-logo';
  */
 @customElement('gem-book-nav')
 @connectStore(bookStore)
+@connectStore(sidebarStore)
 export class Nav extends GemElement {
   @boolattribute logo: boolean;
 
@@ -38,10 +40,8 @@ export class Nav extends GemElement {
   renderI18nSelect = () => {
     const { langList = [], lang } = bookStore;
     if (lang) {
-      const name = langList.find(({ code }) => code === lang)?.name;
       return html`
-        <div class="item">
-          ${mediaQuery.isPhone ? '' : name || lang}
+        <div class="icon item">
           <gem-use @click=${() => this.i18nRef.element?.click()} .element=${icons.i18n}></gem-use>
           <select
             aria-label="language select"
@@ -76,10 +76,20 @@ export class Nav extends GemElement {
     }
   };
 
+  renderIcon = ({ title, link }: NavItem, icon: string | Element | DocumentFragment) => {
+    if (link) {
+      return html`
+        <gem-active-link class="item icon external" title=${title} href=${link}>
+          <gem-use .element=${icon}></gem-use>
+        </gem-active-link>
+      `;
+    }
+  };
+
   render() {
     const { config, nav = [] } = bookStore;
     const { github = '' } = config || {};
-    const githubLink = config ? this.renderExternalItem({ title: 'github', link: github }) : null;
+    const githubLink = config ? this.renderIcon({ title: 'github', link: github }, icons.github) : null;
     const internals = nav?.filter((e) => isSameOrigin(e.link)) || [];
     const externals = nav?.filter((e) => !isSameOrigin(e.link)) || [];
 
@@ -101,8 +111,8 @@ export class Nav extends GemElement {
           cursor: pointer;
           overflow: hidden;
         }
-        .item gem-use {
-          margin-left: 0.3rem;
+        .item + .item {
+          margin-left: 1rem;
         }
         .item select {
           -webkit-appearance: none;
@@ -119,20 +129,15 @@ export class Nav extends GemElement {
         .internals .item {
           padding: 0 1rem;
         }
-        :where(.item + .item:not(.slot)),
-        .slot::slotted(*) {
-          margin-left: 1rem;
-          display: block;
-        }
         gem-link,
         gem-active-link {
           text-decoration: none;
           color: inherit;
         }
-        gem-active-link:active {
+        gem-active-link:not(.icon):active {
           background: rgba(${theme.primaryColorRGB}, 0.1);
         }
-        gem-active-link:hover,
+        gem-active-link:not(.icon):hover,
         gem-active-link:where(:state(active), [data-active]) {
           color: ${theme.primaryColor};
         }
@@ -145,26 +150,56 @@ export class Nav extends GemElement {
           background: currentColor;
           width: 100%;
         }
-        gem-use {
+        .item:not(.icon) gem-use {
           width: 1em;
+          margin-left: 0.3rem;
+        }
+        .icon gem-use {
+          opacity: 0.6;
+          width: 1.5em;
+        }
+        .icon:hover gem-use {
+          opacity: 0.8;
+        }
+        .menu {
+          display: none;
+          opacity: 0.8;
+          width: 2rem;
+          margin-inline-end: 1rem;
         }
         @media ${mediaQuery.PHONE} {
+          :host(:not([logo])) .menu {
+            display: block;
+          }
           gem-book-nav-logo + .item {
             margin-left: 0;
           }
-          .internals .item {
-            padding: 0 0.3rem;
+          .internals {
+            align-items: center;
+          }
+          .internals gem-active-link {
+            border-radius: 100em;
+            margin-left: 0;
+            height: 2em;
+          }
+          .internals gem-active-link:where(:state(active), [data-active]) {
+            background: rgba(${theme.primaryColorRGB}, 0.1);
+          }
+          .internals gem-active-link:where(:state(active), [data-active])::after {
+            content: none;
           }
+          gem-book-nav-logo,
           .external {
             display: none;
           }
         }
       </style>
+      <gem-use class="menu" @click=${toggleSidebar} .element=${sidebarStore.open ? icons.close : icons.menu}></gem-use>
       <div class="internals">
         ${this.logo ? html`<gem-book-nav-logo></gem-book-nav-logo>` : ''} ${internals.map(this.renderInternalItem)}
       </div>
-      ${externals.map(this.renderExternalItem)} ${githubLink} ${this.renderI18nSelect()}
-      <slot class="slot item"></slot>
+      <slot class="item"></slot>
+      ${this.renderI18nSelect()}${githubLink}${externals.map(this.renderExternalItem)}
     `;
   }
 

diff --git a/packages/gem-book/src/element/elements/sidebar.ts b/packages/gem-book/src/element/elements/sidebar.ts
@@ -1,4 +1,17 @@
-import { html, GemElement, customElement, TemplateResult, connectStore, classMap } from '@mantou/gem';
+import {
+  html,
+  GemElement,
+  customElement,
+  TemplateResult,
+  connectStore,
+  classMap,
+  state,
+  createStore,
+  connect,
+  updateStore,
+  history,
+  disconnect,
+} from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
 import { NavItem } from '../../common/config';
@@ -13,9 +26,17 @@ import '@mantou/gem/elements/use';
 import './side-link';
 import './nav-logo';
 
+export const sidebarStore = createStore({ open: false });
+
+const closeSidebar = () => updateStore(sidebarStore, { open: false });
+export const toggleSidebar = () => updateStore(sidebarStore, { open: !sidebarStore.open });
+
 @customElement('gem-book-sidebar')
 @connectStore(bookStore)
+@connectStore(sidebarStore)
 export class SideBar extends GemElement {
+  @state open: boolean;
+
   #toggleLinks = (e: MouseEvent) => {
     const ele = e.target as HTMLDivElement;
     ele.classList.toggle('close');
@@ -72,6 +93,7 @@ export class SideBar extends GemElement {
   };
 
   render() {
+    this.open = sidebarStore.open;
     return html`
       <style>
         :host {
@@ -102,13 +124,18 @@ export class SideBar extends GemElement {
         }
         @media ${mediaQuery.PHONE} {
           :host {
-            position: static;
-            height: auto;
-            margin: 0;
-            padding: 0;
-            overflow: visible;
+            position: fixed;
+            background: ${theme.backgroundColor};
+            width: 100%;
+            height: calc(100vh - ${theme.headerHeight});
+            top: ${theme.headerHeight};
+            z-index: 3;
+          }
+          :host(:not(:where([data-open], :state(open)))) {
+            display: none;
+          }
+          .nav {
             border-inline-end: none;
-            border-block-end: 1px solid ${theme.borderColor};
           }
           gem-book-nav-logo {
             display: none;
@@ -208,4 +235,9 @@ export class SideBar extends GemElement {
     };
     removeCloseClass(activeEle);
   }
+
+  mounted() {
+    connect(history.store, closeSidebar);
+    return () => disconnect(history.store, closeSidebar);
+  }
 }
diff --git a/packages/gem-book/src/element/elements/toc.ts b/packages/gem-book/src/element/elements/toc.ts
@@ -20,6 +20,7 @@ export const tocStore = createStore<{ elements: HTMLHeadingElement[] }>({
 
 const style = createCSSSheet(css`
   :host {
+    font-size: 0.875rem;
     padding: 2rem 1.5rem;
     box-sizing: border-box;
     height: min-content;
@@ -109,6 +110,7 @@ export class GemBookTocElement extends GemElement<State> {
   };
 
   render = () => {
+    if (!tocStore.elements.length) return html``;
     return html`
       <h2>CONTENTS</h2>
       <ul>

diff --git a/packages/gem-book/src/element/index.ts b/packages/gem-book/src/element/index.ts
@@ -188,6 +188,9 @@ export class GemBookElement extends GemElement {
           gem-book-footer {
             text-align: center;
           }
+          gem-book-toc {
+            display: none;
+          }
         }
         @media ${mediaQuery.PHONE} {
           :host {
@@ -197,11 +200,6 @@ export class GemBookElement extends GemElement {
           main {
             padding-inline: 1rem;
           }
-          gem-book-nav ~ gem-book-sidebar {
-            margin-top: 0;
-            height: auto;
-            max-height: none;
-          }
           slot[name='${this.mainBefore}'] {
             margin-top: 1rem;
           }

diff --git a/packages/gem-examples/package.json b/packages/gem-examples/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@mantou/gem": "^1.7.6",
-    "duoyun-ui": "^1.1.6"
+    "duoyun-ui": "^1.1.7"
   },
   "devDependencies": {
     "@gemjs/config": "^1.6.11",