@esershnr/artalk-sidebar 1.0.3

package/README.md

@@ -0,0 +1,16 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
+
+1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
+2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
+
+You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).

package/auto-imports.d.ts

@@ -0,0 +1,76 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useI18n: typeof import('vue-i18n')['useI18n']
+  const useId: typeof import('vue')['useId']
+  const useModel: typeof import('vue')['useModel']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

package/components.d.ts

@@ -0,0 +1,31 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AppHeader: typeof import('./src/components/AppHeader.vue')['default']
+    AppNavigation: typeof import('./src/components/AppNavigation.vue')['default']
+    AppNavigationDesktop: typeof import('./src/components/AppNavigationDesktop.vue')['default']
+    AppNavigationMobile: typeof import('./src/components/AppNavigationMobile.vue')['default']
+    AppNavigationSearch: typeof import('./src/components/AppNavigationSearch.vue')['default']
+    FileUploader: typeof import('./src/components/FileUploader.vue')['default']
+    ItemTextEditor: typeof import('./src/components/ItemTextEditor.vue')['default']
+    LoadingLayer: typeof import('./src/components/LoadingLayer.vue')['default']
+    LogTerminal: typeof import('./src/components/LogTerminal.vue')['default']
+    PageEditor: typeof import('./src/components/PageEditor.vue')['default']
+    Pagination: typeof import('./src/components/Pagination.vue')['default']
+    PreferenceArr: typeof import('./src/components/PreferenceArr.vue')['default']
+    PreferenceGrp: typeof import('./src/components/PreferenceGrp.vue')['default']
+    PreferenceItem: typeof import('./src/components/PreferenceItem.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SiteCreate: typeof import('./src/components/SiteCreate.vue')['default']
+    SiteEditor: typeof import('./src/components/SiteEditor.vue')['default']
+    SiteSwitcher: typeof import('./src/components/SiteSwitcher.vue')['default']
+    UserEditor: typeof import('./src/components/UserEditor.vue')['default']
+  }
+}

package/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />

package/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="referrer" content="strict-origin" />
+    <meta name="robots" content="noindex" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+    <title>Artalk</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@esershnr/artalk-sidebar",
+  "version": "1.0.3",
+  "license": "MIT",
+  "description": "The sidebar of artalk",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/crypto-js": "^4.2.2",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@esershnr/artalk": "workspace:^",
+    "crypto-js": "^4.2.0",
+    "pinia": "^2.2.4",
+    "typescript": "^5.6.3",
+    "unplugin-auto-import": "^0.18.3",
+    "unplugin-vue-components": "^0.27.4",
+    "unplugin-vue-router": "^0.10.8",
+    "vue": "^3.5.12",
+    "vue-i18n": "^10.0.4",
+    "vue-router": "^4.4.5",
+    "vue-tsc": "^2.1.6",
+    "yaml": "^2.6.0"
+  }
+}

package/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent:  *
+Disallow:  /

package/src/App.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useNavStore } from './stores/nav'
+
+const nav = useNavStore()
+const { scrollableArea, darkMode } = storeToRefs(nav)
+
+const query = window.matchMedia('(prefers-color-scheme: dark)')
+
+onMounted(() => query.addEventListener('change', onDarkModeChange))
+onUnmounted(() => query.removeEventListener('change', onDarkModeChange))
+const onDarkModeChange = (e: MediaQueryListEvent) => {
+  // auto switch when localStorage is empty
+  if (localStorage.getItem('ATK_SIDEBAR_DARK_MODE') === null) darkMode.value = e.matches
+}
+</script>
+
+<template>
+  <div class="app-wrap artalk atk-sidebar" :class="{ 'atk-dark-mode': darkMode }">
+    <AppHeader />
+    <AppNavigation />
+
+    <div class="main">
+      <div ref="scrollableArea" class="atk-sidebar-inner">
+        <div class="atk-sidebar-container">
+          <router-view />
+        </div>
+      </div>
+      <LoadingLayer v-if="nav.isPageLoading" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$headerHeight: 61px;
+$subHeaderHeight: 41px;
+$maxWidth: 1100px;
+$sidebarWidth: 280px;
+
+.app-wrap {
+  background: var(--at-color-bg);
+  color: var(--at-color-font);
+  min-height: 100vh;
+}
+
+.main {
+  position: relative;
+
+  .atk-sidebar-inner {
+    overflow-y: auto;
+    height: calc(100vh - $headerHeight - $subHeaderHeight);
+    padding-bottom: 50px;
+
+    @media (min-width: 1024px) {
+      height: calc(100vh - $headerHeight - 51px);
+    }
+  }
+
+  // The placeholder area for the pagination bar
+  :deep(.atk-pagination-wrap) {
+    z-index: 200;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background: var(--at-color-bg);
+    border-top: 1px solid var(--at-color-border);
+  }
+}
+
+:deep(.atk-sidebar-container) {
+  position: relative;
+}
+
+@media (min-width: 1024px) {
+  :deep(.atk-sidebar-container) {
+    max-width: $maxWidth;
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+
+@media (min-width: 1024px) and (max-width: calc($maxWidth + $sidebarWidth * 2)) {
+  :deep(.atk-sidebar-container) {
+    margin-left: $sidebarWidth;
+    max-width: calc(100% - $sidebarWidth);
+  }
+}
+</style>

package/src/artalk.ts

@@ -0,0 +1,82 @@
+import Artalk, { type Context } from '@esershnr/artalk'
+import { Router } from 'vue-router'
+import { bootParams } from './global'
+import { useUserStore } from './stores/user'
+
+export function setupArtalk() {
+  // Create virtual element for Artalk
+  const artalkEl = document.createElement('div')
+  artalkEl.style.display = 'none'
+  document.body.append(artalkEl)
+
+  // Init Artalk
+  return Artalk.init({
+    el: artalkEl,
+    server: '../',
+    pageKey: bootParams.pageKey,
+    site: bootParams.site,
+    darkMode: bootParams.darkMode,
+    pvAdd: false,
+    noComment: `<div class="atk-sidebar-no-content"></div>`,
+    flatMode: true,
+    pagination: {
+      pageSize: 20,
+      readMore: false,
+      autoLoad: false,
+    },
+    listUnreadHighlight: true,
+    fetchCommentsOnInit: false,
+  })
+}
+
+export async function syncArtalkUser(artalk: Context, router: Router) {
+  const user = useUserStore()
+  const logout = () => {
+    user.logout()
+    nextTick(() => {
+      router.replace('/login')
+    })
+  }
+
+  // Access from open sidebar or directly by url
+  if (bootParams.user?.email) {
+    // sync user from sidebar to artalk
+    artalk.getUser().update(bootParams.user)
+  } else {
+    // Sync user from artalk to sidebar
+    try {
+      user.sync()
+    } catch {
+      logout()
+      return
+    }
+  }
+
+  // Async check user status (no await)
+  checkUser(artalk, logout)
+}
+
+function checkUser(artalk: Context, logout: () => void) {
+  // Get user info from artalk
+  const { name, email } = artalk.getUser().getData()
+
+  // Remove login failed dialog if sidebar
+  artalk.getApiHandlers().remove('need_login')
+  artalk.getApiHandlers().add('need_login', async () => {
+    logout()
+    throw new Error('Need login')
+  })
+
+  // Check user status
+  artalk
+    .getApi()
+    .user.getUserStatus({ email, name })
+    .then((res) => {
+      if (res.data.is_admin && !res.data.is_login) {
+        logout()
+      } else {
+        // Mark all notifications as read
+        artalk.getApi().notifies.markAllNotifyRead({ email, name })
+      }
+    })
+}

package/src/assets/icon-darkmode-off.svg

@@ -0,0 +1 @@
+<svg fill="none" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="m7.5 5.25c0 2.8995 2.3505 5.25 5.25 5.25 1.4688 0 2.7967-.60323 3.7496-1.57538.0004.02513.0004.05025.0004.07538 0 4.1421-3.3579 7.5-7.5 7.5-4.14214 0-7.5-3.3579-7.5-7.5 0-4.14214 3.35786-7.5 7.5-7.5.02512 0 .05025 0 .07537.00037-.97215.95286-1.57537 2.28081-1.57537 3.74963zm-4.5 3.75c0 3.3137 2.68629 6 6 6 2.2937 0 4.2868-1.2871 5.2965-3.1784-.5006.1174-1.0189.1784-1.5465.1784-3.72795 0-6.75-3.02205-6.75-6.75 0-.52764.061-1.0459.17842-1.5465-1.89134 1.00967-3.17842 3.00277-3.17842 5.2965z" fill="#000"/></svg>

package/src/assets/icon-darkmode-on.svg

@@ -0,0 +1 @@
+<svg fill="none" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h18v18h-18z"/></clipPath><g clip-path="url(#a)"><path d="m9 13.5c-2.48528 0-4.5-2.0147-4.5-4.5 0-2.48528 2.01472-4.5 4.5-4.5 2.4853 0 4.5 2.01472 4.5 4.5 0 2.4853-2.0147 4.5-4.5 4.5zm0-1.5c1.6568 0 3-1.3432 3-3 0-1.65686-1.3432-3-3-3-1.65686 0-3 1.34314-3 3 0 1.6568 1.34314 3 3 3zm-.75-11.25h1.5v2.25h-1.5zm0 14.25h1.5v2.25h-1.5zm-5.61396-11.3033 1.06066-1.06066 1.59099 1.59099-1.06066 1.06066zm10.07626 10.0763 1.0607-1.0607 1.591 1.591-1.0607 1.0607zm1.591-11.13696 1.0607 1.06066-1.591 1.59099-1.0607-1.06066zm-10.07627 10.07626 1.06066 1.0607-1.59099 1.591-1.06066-1.0607zm13.02297-4.4623v1.5h-2.25v-1.5zm-14.25 0v1.5h-2.25v-1.5z" fill="#fff"/></g></svg>

package/src/assets/icon-eye-off.svg

@@ -0,0 +1 @@
+<svg fill="none" height="13" viewBox="0 0 13 13" width="13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h13v13h-13z"/></clipPath><g clip-path="url(#a)"><path d="m9.68646 10.4524c-.92153.5843-2.0144.9227-3.1863.9227-2.92076 0-5.35066-2.10155-5.860105-4.87499.236535-1.28775.887075-2.43062 1.808535-3.28555l-1.693691-1.69368.766041-.766039 10.72446 10.724459-.766.7661zm-6.47134-6.47131c-.71981.65566-1.24464 1.52614-1.46945 2.51902.49695 2.19478 2.46016 3.79169 4.75449 3.79169.86635 0 1.68551-.2277 2.39634-.62933l-1.09867-1.09866c-.37575.23676-.82073.3738-1.29767.3738-1.34621 0-2.43752-1.09135-2.43752-2.4375 0-.47699.13699-.92197.37378-1.29771zm3.77991 3.77991-1.75578-1.75576c-.06021.1533-.09328.32018-.09328.49487 0 .74788.60631 1.35417 1.35419 1.35417.17464 0 .34158-.0331.49487-.09328zm4.27537 1.22661-.7751-.77502c.3553-.5064.6172-1.08501.7593-1.71248-.4969-2.19484-2.46015-3.79169-4.75444-3.79169-.45819 0-.90317.06369-1.32589.1831l-.85477-.85477c.67535-.26572 1.41095-.41166 2.18066-.41166 2.92072 0 5.35064 2.10154 5.86004 4.87502-.1691.92062-.5498 1.76724-1.0898 2.4875zm-4.9205-4.92047c.04968-.00302.09978-.00455.15026-.00455 1.34615 0 2.4375 1.0913 2.4375 2.43752 0 .05043-.00157.10053-.00455.1502z" fill="#636c76"/></g></svg>

package/src/assets/icon-eye-on.svg

@@ -0,0 +1 @@
+<svg fill="none" height="13" viewBox="0 0 13 13" width="13" xmlns="http://www.w3.org/2000/svg"><path d="m6.50016 1.625c2.92072 0 5.35064 2.10154 5.86004 4.875-.5094 2.77344-2.93932 4.875-5.86004 4.875-2.92076 0-5.35066-2.10156-5.860105-4.875.509445-2.77346 2.939345-4.875 5.860105-4.875zm0 8.6667c2.29429 0 4.25754-1.59687 4.75444-3.7917-.4969-2.19482-2.46015-3.79167-4.75444-3.79167-2.29433 0-4.25754 1.59685-4.75449 3.79167.49695 2.19483 2.46016 3.7917 4.75449 3.7917zm0-1.3542c-1.34621 0-2.43752-1.0913-2.43752-2.4375 0-1.34619 1.09131-2.4375 2.43752-2.4375 1.34615 0 2.4375 1.09131 2.4375 2.4375 0 1.3462-1.09135 2.4375-2.4375 2.4375zm0-1.08333c.74788 0 1.35417-.60629 1.35417-1.35417s-.60629-1.35417-1.35417-1.35417-1.35419.60629-1.35419 1.35417.60631 1.35417 1.35419 1.35417z" fill="#636c76"/></svg>

package/src/assets/nav-icon-comments.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m5.37879 15.8333-3.71212 2.9167v-15.41667c0-.46023.3731-.83333.83333-.83333h15c.4603 0 .8333.3731.8333.83333v11.66667c0 .4602-.373.8333-.8333.8333zm-.57644-1.6666h11.86435v-10.00003h-13.33337v11.15423zm1.86432-5.83337h6.66663v1.66667h-6.66663z" fill="#636c76"/></svg>

package/src/assets/nav-icon-pages.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m15.8333 18.3333h-11.66663c-1.38071 0-2.5-1.1192-2.5-2.5v-13.3333c0-.46023.3731-.83333.83333-.83333h11.6667c.4602 0 .8333.3731.8333.83333v10h3.3333v3.3333c0 1.3808-1.1192 2.5-2.5 2.5zm-.8333-4.1666v1.6666c0 .4603.3731.8334.8333.8334.4603 0 .8334-.3731.8334-.8334v-1.6666zm-1.6667 2.5v-13.33337h-9.99997v12.49997c0 .4603.3731.8334.83334.8334zm-8.3333-10.83337h6.6667v1.66667h-6.6667zm0 3.33334h6.6667v1.66663h-6.6667zm0 3.33333h4.16667v1.6667h-4.16667z" fill="#636c76"/></svg>

package/src/assets/nav-icon-search.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m9.16667 1.66667c4.14003 0 7.50003 3.36 7.50003 7.5 0 4.14003-3.36 7.50003-7.50003 7.50003-4.14 0-7.5-3.36-7.5-7.50003 0-4.14 3.36-7.5 7.5-7.5zm0 13.33333c3.22293 0 5.83333-2.6104 5.83333-5.83333 0-3.22292-2.6104-5.83334-5.83333-5.83334-3.22292 0-5.83334 2.61042-5.83334 5.83334 0 3.22293 2.61042 5.83333 5.83334 5.83333zm7.07113.0593 2.3569 2.357-1.1784 1.1784-2.357-2.3569z" fill="#636c76"/></svg>

package/src/assets/nav-icon-settings.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m10 .833333 7.9167 4.583337v9.16663l-7.9167 4.5834-7.91666-4.5834v-9.16663zm0 1.925837-6.25 3.61842v7.24481l6.25 3.6184 6.25-3.6184v-7.24481zm0 10.57413c-1.84095 0-3.33333-1.4924-3.33333-3.3333 0-1.84095 1.49238-3.33333 3.33333-3.33333 1.8409 0 3.3333 1.49238 3.3333 3.33333 0 1.8409-1.4924 3.3333-3.3333 3.3333zm0-1.6666c.9205 0 1.6667-.7462 1.6667-1.6667s-.7462-1.66667-1.6667-1.66667-1.66666.74617-1.66666 1.66667.74616 1.6667 1.66666 1.6667z" fill="#636c76"/></svg>

package/src/assets/nav-icon-sites.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m16.7362 12.6666 1.0017.6011c.1974.1184.2613.3743.1429.5716-.0352.0587-.0842.1078-.1429.1429l-7.3091 4.3855c-.2639.1584-.59363.1584-.85746 0l-7.30915-4.3855c-.19732-.1184-.26131-.3743-.14291-.5716.03519-.0587.08426-.1078.14291-.1429l1.00174-.6011 6.73617 4.0416zm0-3.91668 1.0017.60108c.1974.11842.2613.37433.1429.57167-.0352.05866-.0842.10773-.1429.14293l-7.7378 4.6427-7.73791-4.6427c-.19732-.11843-.26131-.37435-.14291-.57168.03519-.05867.08426-.10775.14291-.14292l1.00174-.60108 6.73617 4.04168zm-6.3074-7.65939 7.3091 4.38547c.1974.11839.2613.37433.1429.57166-.0352.05865-.0842.10773-.1429.14291l-7.7378 4.64263-7.73791-4.64263c-.19732-.11839-.26131-.37433-.14291-.57165.03519-.05865.08426-.10773.14291-.14292l7.30915-4.38547c.26383-.15833.59356-.15833.85746 0zm-.4287 1.68641-5.09397 3.05635 5.09397 3.05638 5.0939-3.05638z" fill="#636c76"/></svg>

package/src/assets/nav-icon-transfer.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m5.00007 4.92853-1.91075 1.91075-1.17851-1.17851 3.92259-3.92259 3.9226 3.92259-1.1785 1.17851-1.91077-1.91075v4.23814h-1.66666zm9.16673 2.98816c1.1505 0 2.0833-.93274 2.0833-2.08333s-.9328-2.08333-2.0833-2.08333c-1.1506 0-2.0834.93274-2.0834 2.08333s.9328 2.08333 2.0834 2.08333zm0 1.66664c-2.0711 0-3.75-1.67891-3.75-3.74997 0-2.07107 1.6789-3.75 3.75-3.75 2.071 0 3.7499 1.67893 3.7499 3.75 0 2.07106-1.6789 3.74997-3.7499 3.74997zm3.9225 4.75587-1.1785-1.1785-1.9107 1.9108v-4.2382h-1.6667v4.2382l-1.9107-1.9108-1.1785 1.1785 3.9226 3.9226zm-13.92257 1.4941h3.33333l.00001-3.3333h-3.33334zm4.16669-5c.46025 0 .83333.3731.83333.8334v5c0 .4602-.37308.8333-.83333.8333h-5.00003c-.46023 0-.83333-.3731-.83332-.8333v-5c0-.4603.37309-.8334.83333-.8334z" fill="#636c76"/></svg>

package/src/assets/nav-icon-users.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m2.5 4.16257c0-.91821.74385-1.66257 1.66257-1.66257h11.67483c.9183 0 1.6626.74385 1.6626 1.66257v11.67483c0 .9183-.7438 1.6626-1.6626 1.6626h-11.67483c-.91821 0-1.66257-.7438-1.66257-1.6626zm1.66667.0041v11.66663h11.66663v-11.66663zm2.4768 10.98403c-.51558-.2233-1.00415-.4971-1.45945-.8154 1.03909-1.6059 2.846-2.6686 4.90118-2.6686 1.9994 0 3.7639 1.0059 4.8149 2.5393-.4469.3303-.9281.6171-1.4372.8538-.7569-1.046-1.9879-1.7265-3.3777-1.7265-1.42978 0-2.69128.7201-3.44173 1.8174zm3.35653-4.3174c-1.61083 0-2.91667-1.3058-2.91667-2.91663 0-1.61084 1.30584-2.91667 2.91667-2.91667 1.6108 0 2.9167 1.30583 2.9167 2.91667 0 1.61083-1.3059 2.91663-2.9167 2.91663zm0-1.66663c.6903 0 1.25-.55967 1.25-1.25 0-.69036-.5597-1.25-1.25-1.25-.69033 0-1.25.55964-1.25 1.25 0 .69033.55967 1.25 1.25 1.25z" fill="#636c76"/></svg>

package/src/components/AppHeader.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useUserStore } from '../stores/user'
+import { useNavStore } from '../stores/nav'
+import { isOpenFromSidebar } from '../global'
+
+const nav = useNavStore()
+const router = useRouter()
+const user = useUserStore()
+const { t } = useI18n()
+const { site: curtSite, is_admin: isAdmin, avatar } = storeToRefs(user)
+const { darkMode } = storeToRefs(nav)
+
+const avatarClickHandler = () => {
+  if (!isOpenFromSidebar()) logout()
+}
+
+const logout = () => {
+  if (!window.confirm(t('logoutConfirm'))) return
+
+  useUserStore().logout()
+  nextTick(() => {
+    router.replace('/login')
+  })
+}
+</script>
+
+<template>
+  <div class="header">
+    <template v-if="isAdmin">
+      <div
+        class="avatar clickable"
+        :class="{ active: nav.siteSwitcherShow }"
+        @click="nav.showSiteSwitcher()"
+      >
+        <div class="site">{{ curtSite.substring(0, 1) || '_' }}</div>
+      </div>
+    </template>
+    <template v-else>
+      <div class="avatar" @click="avatarClickHandler">
+        <img :src="avatar" />
+      </div>
+    </template>
+
+    <div class="title">
+      <div class="text show-mobile">{{ isAdmin ? t('ctrlCenter') : t('msgCenter') }}</div>
+      <div class="text show-desktop">
+        <template v-if="!isAdmin">{{ t('msgCenter') }}</template>
+        <template v-else-if="!!curtSite">{{ curtSite }}</template>
+        <template v-else>
+          <img src="../assets/favicon.png" class="artalk-logo" draggable="false" />
+        </template>
+      </div>
+    </div>
+
+    <div class="close-btn"></div>
+    <div
+      class="dark-mode-toggle"
+      :data-darkmode="darkMode ? 'on' : 'off'"
+      @click="nav.toggleDarkMode()"
+    ></div>
+  </div>
+  <SiteSwitcher v-if="isAdmin" />
+</template>
+
+<style scoped lang="scss">
+.header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid var(--at-color-border);
+
+  @media (min-width: 1024px) {
+    background: var(--at-sidebar-header-bg);
+  }
+
+  .avatar {
+    position: relative;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid transparent;
+    padding: 0 10px 0 15px;
+
+    .site {
+      user-select: none;
+      color: #fff;
+      background: #697182;
+      height: 30px;
+      width: 30px;
+      border-radius: 2px;
+      text-align: center;
+      line-height: 30px;
+      font-size: 13px;
+    }
+
+    &.clickable {
+      cursor: pointer;
+
+      &:hover,
+      &.active {
+        background: var(--at-color-bg-grey);
+        border-right: 1px solid var(--at-color-border);
+      }
+
+      &::after {
+        content: '';
+        margin-left: 10px;
+        vertical-align: middle;
+        border-top: 5px solid #747474;
+        border-left: 3px solid transparent;
+        border-right: 3px solid transparent;
+        margin-top: -1px;
+        display: inline-block;
+      }
+    }
+
+    img {
+      height: 30px;
+      width: 30px;
+      border-radius: 2px;
+      background: #697182;
+      text-align: center;
+      line-height: 30px;
+      font-size: 13px;
+      color: #fff;
+    }
+  }
+
+  .title {
+    flex: auto;
+    text-align: center;
+    user-select: none;
+
+    .text {
+      display: inline-block;
+      position: relative;
+      color: var(--at-color-deep);
+      font-size: 20px;
+
+      &.show-mobile {
+        display: none;
+      }
+
+      &.show-desktop {
+        display: inline-block;
+
+        &::after {
+          display: none;
+        }
+      }
+
+      @media (max-width: 1023px) {
+        &.show-mobile {
+          display: inline-block;
+        }
+
+        &.show-desktop {
+          display: none;
+        }
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 6px;
+        background: #0083ff;
+        opacity: 0.4;
+      }
+    }
+
+    .artalk-logo {
+      border-radius: 2px;
+      height: 40px;
+      width: 40px;
+      background: #697182;
+      text-align: center;
+      line-height: 30px;
+      font-size: 13px;
+      color: #fff;
+    }
+  }
+
+  .close-btn {
+    width: 60px;
+    height: 60px;
+    margin-left: 10px;
+  }
+
+  .dark-mode-toggle {
+    display: none;
+    width: 60px;
+    height: 60px;
+    margin-left: 10px;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+
+    @media (min-width: 1024px) {
+      display: flex;
+    }
+
+    &:hover {
+      &::after {
+        background-color: var(--at-color-bg-grey);
+      }
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      transition: background-color 0.2s;
+      width: 35px;
+      height: 35px;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 60%;
+      border-radius: 50%;
+    }
+
+    &[data-darkmode='on']::after {
+      background-image: url('@/assets/icon-darkmode-on.svg');
+    }
+
+    &[data-darkmode='off']::after {
+      background-image: url('@/assets/icon-darkmode-off.svg');
+    }
+  }
+}
+</style>

package/src/components/AppNavigation.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <!-- Desktop -->
+  <AppNavigationDesktop />
+
+  <!-- Mobile or Sidebar -->
+  <AppNavigationMobile />
+</template>
+
+<style scoped lang="scss"></style>