appstore/dist/components/dock.js

/**
 * {}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/12/19 16:53:27
 */

import { html, css, Component } from 'wkit'

class Dock extends Component {
  static styles = [
    css`
      :host {
        display: flex;
        position: fixed;
        left: 8px;
        top: 50%;
        z-index: 2;
        width: 72px;
        transform: translateY(-50%);
      }

      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 72px;
        min-height: 256px;
        gap: 12px;
        padding: 12px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.5);
        color: var(--color-grey-3);
        transform: translateX(-100%);
        transition: transform 0.2s ease-in-out;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);

        --wc-icon-size: 24px;

        &:hover {
          transform: translateX(0);
        }
      }
    `,
    css`
      .icon {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .apps {
        display: flex;
        flex-direction: column;
        width: 48px;
        gap: 12px;
        cursor: pointer;

        .item {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          background: var(--color-blue-1);
          transition: transform 0.2s ease-in-out;

          &:nth-child(2) {
            background: var(--color-teal-1);
          }
          &:nth-child(3) {
            background: var(--color-red-1);
          }
          &:nth-child(4) {
            background: var(--color-dark-1);
          }

          &:hover {
            transform: scale(1.2) translateX(10%);
          }
        }
      }
      .pipe {
        width: 32px;
        height: 1px;
        background: var(--color-plain-3);
      }
      .dashboard,
      .trash {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: var(--color-plain-3);
        cursor: pointer;
      }
    `
  ]

  render() {
    return html`
      <main class="container">
        <span
          class="dashboard icon"
          @click=${_ => (this.$store.storeAppShow = true)}
          ><wc-icon name="app"></wc-icon
        ></span>
        <mark class="pipe"></mark>
        <nav class="apps">
          <a class="item icon"></a>
          <a class="item icon"></a>
          <a class="item icon"></a>
          <a class="item icon"></a>
        </nav>
        <mark class="pipe"></mark>
        <span
          class="trash icon"
          @click=${_ => (this.$store.aboutAppShow = true)}
        >
          <wc-icon name="info"></wc-icon>
        </span>
      </main>
    `
  }
}

Dock.reg('dock')