@esershnr/artalk-sidebar 1.0.3

package/src/components/AppNavigationDesktop.vue

@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+/**
+ * The part of the navigation bar that is displayed on desktop
+ */
+import { useNavigationMenu } from './AppNavigationMenu'
+
+const nav = useNavigationMenu()
+const { t } = useI18n()
+
+const getIconCSSAttribute = (icon: string) => `url('${icon.replace(/'/g, "\\'")}')`
+</script>
+
+<template>
+  <div class="sidebar-navigation">
+    <div
+      v-for="(page, pageName) in nav.pages"
+      :key="pageName"
+      class="item"
+      :class="{ active: pageName === nav.curtPage }"
+      @click="nav.goPage(pageName as string)"
+    >
+      <span class="icon" :style="{ backgroundImage: getIconCSSAttribute(page.icon) }"></span>
+      {{ t(page.label) }}
+    </div>
+  </div>
+
+  <div v-if="!!Object.keys(nav.tabs).length" class="top-tabbar-wrap atk-sidebar-container">
+    <div class="top-tabbar">
+      <div
+        v-for="(tabLabel, tabName) in nav.tabs"
+        :key="tabName"
+        class="item-wrap"
+        :class="{ active: nav.curtTab === tabName }"
+        @click="nav.goTab(tabName as string)"
+      >
+        <div class="item">{{ t(tabLabel) }}</div>
+      </div>
+
+      <div v-if="nav.isSearchEnabled" class="item-wrap search-btn" @click="nav.showSearch()">
+        <div class="item">
+          <div class="icon"></div>
+        </div>
+      </div>
+    </div>
+
+    <AppNavigationSearch v-if="!nav.isMobile" :state="nav.searchState" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$colorMain: #8ecee2;
+
+.sidebar-navigation {
+  z-index: 10;
+  width: 280px;
+  position: fixed;
+  left: 0;
+  top: 61px;
+  height: calc(100vh - 61px - 41px);
+  padding: 20px;
+  background: var(--at-color-bg);
+  border-right: 1px solid var(--at-color-border);
+
+  @media (max-width: 1023px) {
+    display: none;
+  }
+
+  .item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 6px 12px;
+    font-size: 15px;
+    border-radius: 6px;
+    cursor: pointer;
+    user-select: none;
+    transition: background 0.2s;
+
+    &:not(:last-child) {
+      margin-bottom: 4px;
+    }
+
+    &.active {
+      font-weight: bold;
+      color: var(--at-color-deep);
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: -8px;
+        top: 5%;
+        background: $colorMain;
+        height: 90%;
+        width: 4px;
+        border-radius: 1000px;
+      }
+    }
+
+    &:hover,
+    &.active {
+      background: var(--at-color-bg-grey-transl);
+    }
+
+    .icon {
+      width: 20px;
+      height: 20px;
+      margin-right: 10px;
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+  }
+}
+
+.top-tabbar-wrap {
+  @media (max-width: 1023px) {
+    display: none;
+  }
+}
+
+.top-tabbar {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  margin: 0 auto;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--at-color-border);
+
+  .item-wrap {
+    margin-bottom: -2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    height: 100%;
+    padding: 0;
+    cursor: pointer;
+    user-select: none;
+    border-bottom: 2px solid transparent;
+
+    &.active {
+      font-weight: bold;
+      border-color: $colorMain;
+    }
+
+    &:not(:last-child) {
+      margin-right: 7px;
+    }
+
+    &:hover .item {
+      background: var(--at-color-bg-grey-transl);
+    }
+
+    &.search-btn {
+      margin-left: auto;
+
+      .icon {
+        background-image: url('@/assets/nav-icon-search.svg');
+      }
+    }
+
+    .item {
+      border-radius: 4px;
+      padding: 5px 16px;
+      transition: background 0.2s;
+
+      .icon {
+        width: 20px;
+        height: 20px;
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+    }
+  }
+}
+</style>

package/src/components/AppNavigationMenu.ts

@@ -0,0 +1,152 @@
+import { storeToRefs } from 'pinia'
+import { RouteLocation } from 'vue-router'
+import CommentsIcon from '@/assets/nav-icon-comments.svg'
+import PagesIcon from '@/assets/nav-icon-pages.svg'
+import UsersIcon from '@/assets/nav-icon-users.svg'
+import SitesIcon from '@/assets/nav-icon-sites.svg'
+import TransferIcon from '@/assets/nav-icon-transfer.svg'
+import SettingsIcon from '@/assets/nav-icon-settings.svg'
+import { useUserStore } from '@/stores/user'
+import { useNavStore } from '@/stores/nav'
+
+export type PageItem = { label: string; link: string; hideOnMobile?: boolean; icon: string }
+
+/**
+ * Pages for admin
+ */
+export const AdminPages: Record<string, PageItem> = {
+  comments: {
+    label: 'comment',
+    link: '/comments',
+    icon: CommentsIcon,
+  },
+  pages: {
+    label: 'page',
+    link: '/pages',
+    icon: PagesIcon,
+  },
+  users: {
+    label: 'user',
+    link: '/users',
+    icon: UsersIcon,
+  },
+  sites: {
+    label: 'site',
+    link: '/sites',
+    hideOnMobile: true,
+    icon: SitesIcon,
+  },
+  transfer: {
+    label: 'transfer',
+    link: '/transfer',
+    hideOnMobile: true,
+    icon: TransferIcon,
+  },
+  settings: {
+    label: 'settings',
+    link: '/settings',
+    icon: SettingsIcon,
+  },
+}
+
+/**
+ * Pages for user
+ */
+export const UserPages: Record<string, PageItem> = {
+  comments: {
+    // Only show comments page for user
+    ...AdminPages.comments,
+  },
+}
+
+export interface NavigationStoreProps {
+  onGoPage?: (pageName: string) => void
+  onGoTab?: (tabName: string) => void
+}
+
+export interface SearchStateApi {
+  show: boolean
+  value: string
+  updateValue: (val: string) => void
+  showSearch: () => void
+  hideSearch: () => void
+}
+
+/**
+ * Navigation menu hook only use for AppNavigation component
+ *
+ * (do not expose to other components, others should call `useNavStore`)
+ */
+export const useNavigationMenu = (props: NavigationStoreProps = {}) => {
+  const router = useRouter()
+  const { is_admin: isAdmin } = storeToRefs(useUserStore())
+  const { tabs, curtPage, curtTab, isMobile, isSearchEnabled } = storeToRefs(useNavStore())
+
+  /**
+   * Pages for current user
+   */
+  const pages = computed((): Record<string, PageItem> => (isAdmin.value ? AdminPages : UserPages))
+
+  /**
+   * State for search input
+   */
+  const searchState = reactive<SearchStateApi>({
+    show: false,
+    value: '',
+    updateValue(val: string) {
+      searchState.value = val
+    },
+    showSearch() {
+      searchState.show = true
+    },
+    hideSearch() {
+      searchState.show = false
+    },
+  })
+
+  /**
+   * Navigate to page
+   */
+  const goPage = (pageName: string) => {
+    props.onGoPage?.(pageName)
+    router.replace(pages.value[pageName].link)
+  }
+
+  /**
+   * Navigate to tab
+   */
+  const goTab = (tabName: string) => {
+    props.onGoTab?.(tabName)
+    curtTab.value = tabName
+  }
+
+  /**
+   * Sync current page name from route
+   */
+  const syncCurtPage = (to?: RouteLocation) =>
+    (curtPage.value = String((to || useRoute()).name).replace(/^\//, ''))
+
+  onMounted(() => {
+    syncCurtPage()
+  })
+
+  router.afterEach((to, from, failure) => {
+    syncCurtPage(to)
+    searchState.value = ''
+    searchState.hideSearch()
+  })
+
+  return reactive({
+    pages,
+    tabs,
+    curtPage,
+    curtTab,
+    goPage,
+    goTab,
+    isMobile,
+    isSearchEnabled,
+    searchState,
+    showSearch: searchState.showSearch,
+    hideSearch: searchState.hideSearch,
+  })
+}

package/src/components/AppNavigationMobile.vue

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+/**
+ * The part of the navigation bar that is displayed on mobile devices and the sidebar
+ */
+import { useNavigationMenu } from './AppNavigationMenu'
+
+const { t } = useI18n()
+
+const indicatorState = ref<'pages' | 'tabs'>('tabs')
+const tabListEl = ref<HTMLElement | null>(null)
+const nav = useNavigationMenu({
+  onGoPage: () => {
+    indicatorState.value = 'tabs'
+  },
+})
+
+/**
+ * For tab list for horizontal scroll
+ */
+const wheelHandler = (evt: WheelEvent) => {
+  evt.preventDefault()
+  tabListEl.value && (tabListEl.value!.scrollLeft += evt.deltaY)
+}
+onMounted(() => tabListEl.value!.addEventListener('wheel', wheelHandler))
+onUnmounted(() => tabListEl.value!.removeEventListener('wheel', wheelHandler))
+
+/**
+ * Toggle indicator
+ */
+function toggleIndicator() {
+  indicatorState.value = indicatorState.value !== 'tabs' ? 'tabs' : 'pages'
+}
+</script>
+
+<template>
+  <div class="top-navigation">
+    <div class="page" @click="toggleIndicator()">
+      <div class="icon" :class="indicatorState === 'tabs' ? 'menu' : 'arrow'"></div>
+      <div v-if="nav.pages[nav.curtPage]?.label" class="text">
+        {{ t(nav.pages[nav.curtPage].label) }}
+      </div>
+    </div>
+
+    <div ref="tabListEl" class="tab-list">
+      <!-- Tabs -->
+      <template v-if="indicatorState === 'tabs'">
+        <div
+          v-for="(tabLabel, tabName) in nav.tabs"
+          :key="tabName"
+          class="item"
+          :class="{ active: nav.curtTab === tabName }"
+          @click="nav.goTab(tabName as string)"
+        >
+          {{ t(tabLabel) }}
+        </div>
+
+        <div v-if="nav.isSearchEnabled" class="item search-btn" @click="nav.showSearch()"></div>
+      </template>
+
+      <!-- Pages -->
+      <template v-if="indicatorState === 'pages'">
+        <div
+          v-for="(page, pageName) in nav.pages"
+          v-show="!page.hideOnMobile"
+          :key="pageName"
+          class="item"
+          :class="{ active: pageName === nav.curtPage }"
+          @click="nav.goPage(pageName as string)"
+        >
+          {{ t(page.label) }}
+        </div>
+      </template>
+    </div>
+
+    <AppNavigationSearch v-if="nav.isMobile" :state="nav.searchState" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.top-navigation {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid var(--at-color-border);
+  height: 41px;
+
+  @media (min-width: 1024px) {
+    display: none;
+  }
+
+  .icon {
+    width: 17px;
+    height: 100%;
+    background-color: var(--at-color-deep);
+    background-size: contain;
+    background-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-position: center;
+    mask-size: 100%;
+    -webkit-mask-size: 100%;
+
+    &.menu {
+      $menuImg: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 9H44V11.8182H5V9ZM5 23.0909H44V25.9091H5V23.0909ZM44 37.1818H5V40H44V37.1818Z' fill='black'/%3E%3C/svg%3E%0A");
+      mask-image: $menuImg;
+      -webkit-mask-image: $menuImg;
+    }
+
+    &.arrow {
+      $arrowImg: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32.1433 7L15 24.4999L15.4676 24.9773L32.1433 42L34 40.1047L18.7133 24.5001L34 8.89529L32.1433 7Z' fill='black'/%3E%3C/svg%3E%0A");
+      mask-image: $arrowImg;
+      -webkit-mask-image: $arrowImg;
+    }
+  }
+
+  .page {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 20px;
+    border-right: 1px solid var(--at-color-border);
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+
+    .icon {
+      margin-right: 10px;
+    }
+
+    .text {
+      color: var(--at-color-deep);
+    }
+  }
+
+  .tab-list {
+    position: relative;
+    flex: auto;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+      background: transparent;
+    }
+  }
+
+  .item {
+    padding: 0 20px;
+    color: var(--at-color-sub);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    cursor: pointer;
+    white-space: nowrap;
+
+    &.active {
+      color: var(--at-color-deep);
+    }
+
+    &:hover {
+      background: var(--at-color-bg-grey);
+    }
+
+    &.search-btn {
+      margin-left: auto;
+      padding: 0 20px;
+      border-left: 1px solid var(--at-color-border);
+
+      &::after {
+        display: inline-block;
+        content: '';
+        height: 15px;
+        width: 15px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.89266 3.70572C8.18412 1.99718 5.41402 1.99718 3.70548 3.70572C1.99694 5.41427 1.99694 8.18436 3.70548 9.89291C5.41402 11.6015 8.18412 11.6015 9.89266 9.89291C11.6012 8.18436 11.6012 5.41427 9.89266 3.70572ZM2.8216 2.82184C5.0183 0.625142 8.57985 0.625142 10.7765 2.82184C12.8239 4.86916 12.9631 8.10202 11.1942 10.3106L13.4282 12.5446L12.5443 13.4284L10.3103 11.1945C8.10177 12.9633 4.86892 12.8241 2.8216 10.7768C0.624897 8.58009 0.624897 5.01854 2.8216 2.82184Z' fill='%23757575'/%3E%3C/svg%3E");
+      }
+    }
+  }
+}
+</style>

package/src/components/AppNavigationSearch.vue

@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import type { SearchStateApi } from './AppNavigationMenu'
+import { useNavStore } from '@/stores/nav'
+
+const { t } = useI18n()
+const nav = useNavStore()
+const inputEl = ref<HTMLInputElement | null>(null)
+
+const props = defineProps<{
+  state: SearchStateApi
+}>()
+
+watch(
+  () => props.state.show,
+  (show) => {
+    if (show) {
+      nextTick(() => {
+        inputEl.value?.focus()
+      })
+    } else {
+      props.state.updateValue('')
+      nav.searchResetEvent?.()
+    }
+  },
+)
+
+const onSearchSubmit = (evt: Event) => {
+  const { value } = props.state
+  if (value.trim() === '') {
+    inputEl.value?.focus()
+    return
+  }
+
+  nav.searchEvent?.(value.trim())
+}
+</script>
+
+<template>
+  <form v-if="props.state.show" class="search-layer atk-fade-in" @submit.prevent="onSearchSubmit">
+    <div class="item back-btn" @click="props.state.hideSearch()">
+      <div class="icon arrow"></div>
+    </div>
+    <input
+      ref="inputEl"
+      :value="props.state.value"
+      type="text"
+      :placeholder="t('searchHint')"
+      required
+      @input="props.state.updateValue(($event.target as HTMLInputElement).value)"
+    />
+    <button type="submit" class="item search-btn"></button>
+  </form>
+</template>
+
+<style lang="scss" scoped>
+.search-layer {
+  z-index: 100;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  background: var(--at-color-bg);
+  display: flex;
+  flex-direction: row;
+
+  .back-btn {
+    padding: 0 20px;
+    border-right: 1px solid var(--at-color-border);
+  }
+
+  input {
+    flex: 1;
+    border: 0;
+    outline: none;
+    padding: 0 20px;
+    font-size: 15px;
+    background: transparent;
+  }
+
+  .search-btn {
+    cursor: pointer;
+    border: none;
+    background: transparent;
+  }
+
+  .icon {
+    width: 17px;
+    height: 100%;
+    background-color: var(--at-color-deep);
+    background-size: contain;
+    background-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 100%;
+
+    &.arrow {
+      $arrowImg: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32.1433 7L15 24.4999L15.4676 24.9773L32.1433 42L34 40.1047L18.7133 24.5001L34 8.89529L32.1433 7Z' fill='black'/%3E%3C/svg%3E%0A");
+      mask-image: $arrowImg;
+    }
+  }
+
+  .item {
+    padding: 0 20px;
+    color: var(--at-color-sub);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    cursor: pointer;
+    white-space: nowrap;
+
+    &.active {
+      color: var(--at-color-deep);
+    }
+
+    &:hover {
+      background: var(--at-color-bg-grey);
+    }
+
+    &.search-btn {
+      margin-left: auto;
+      padding: 0 20px;
+      border-left: 1px solid var(--at-color-border);
+
+      &::after {
+        display: inline-block;
+        content: '';
+        height: 15px;
+        width: 15px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.89266 3.70572C8.18412 1.99718 5.41402 1.99718 3.70548 3.70572C1.99694 5.41427 1.99694 8.18436 3.70548 9.89291C5.41402 11.6015 8.18412 11.6015 9.89266 9.89291C11.6012 8.18436 11.6012 5.41427 9.89266 3.70572ZM2.8216 2.82184C5.0183 0.625142 8.57985 0.625142 10.7765 2.82184C12.8239 4.86916 12.9631 8.10202 11.1942 10.3106L13.4282 12.5446L12.5443 13.4284L10.3103 11.1945C8.10177 12.9633 4.86892 12.8241 2.8216 10.7768C0.624897 8.58009 0.624897 5.01854 2.8216 2.82184Z' fill='%23757575'/%3E%3C/svg%3E");
+      }
+    }
+  }
+}
+</style>