[gem-book] Improve mobile

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

Hide file tree

Showing 6 changed files with 65 additions and 15 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,18 @@
 import { raw } from '@mantou/gem';
 
 export const icons = {
+  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.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;
 
@@ -148,7 +150,15 @@ export class Nav extends GemElement {
         gem-use {
           width: 1em;
         }
+        .menu {
+          display: none;
+          width: 2.25rem;
+          margin-inline-end: 1rem;
+        }
         @media ${mediaQuery.PHONE} {
+          .menu {
+            display: block;
+          }
           gem-book-nav-logo + .item {
             margin-left: 0;
           }
@@ -160,6 +170,7 @@ export class Nav extends GemElement {
           }
         }
       </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>

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/index.ts b/packages/gem-book/src/element/index.ts
@@ -197,11 +197,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",