fix(sidebar): icons and links

mnenie · Feb 10, 2025 · c98cb3c · c98cb3c
1 parent 4da4a10
commit c98cb3c
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 6 deletions.
diff --git a/apps/client/src/core/__tests__/__snapshots__/WorkSpace.spec.ts.snap b/apps/client/src/core/__tests__/__snapshots__/WorkSpace.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`tests for WorkSpace.vue > should be render correctly 1`] = `
 "<div class="flex flex-col space-y-1.5 justify-start mb-20px"><a class="flex items-center gap-1.5 cursor-pointer text-neutral-900 justify-start w-full"><button class="btn btn-secondary h-9 2xl:h-8 rounded-md w-full gap-2 shadow-none px-2 transition-all duration-200 ease !bg-neutral-200/40 dark:!bg-neutral-700/50" style="justify-content: space-between;">
       <!--v-if-->
-      <div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="!w-16px !h-16px !2xl:w-4 !2xl:h-4 text-neutral-900 dark:text-neutral-200" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-default !fw500 text-neutral-900 dark:text-neutral-100">Boards</span></div>
+      <div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="!w-16px !h-16px !2xl:min-w-4 !2xl:min-h-4 text-neutral-800 dark:text-neutral-200" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-default !fw500 text-neutral-950 dark:text-neutral-100">Boards</span></div>
       <!--v-if-->
     </button></a></div>"
 `;
diff --git a/apps/client/src/core/components/sidebar/AppSidebar.vue b/apps/client/src/core/components/sidebar/AppSidebar.vue
@@ -6,6 +6,7 @@ import IntegrationItems from './IntegrationItems.vue'
 import WorkSpace from './WorkSpace.vue'
 import WorkspaceChooser from './WorkSpaceChooser.vue'
 import PlanCard from './plan/PlanCard.vue'
+import BoardsRows from './BoardsRows.vue'
 import type { Board } from '@/modules/boards/types'
 import { links } from '@/shared/constants/links'
 import SearchBox from '@/modules/search/components/SearchBox.vue'
@@ -38,6 +39,7 @@ const paddingExpanded = computed(() => {
       <div>
         <SearchBox :boards />
         <WorkSpace :links />
+        <BoardsRows />
         <IntegrationItems />
       </div>
       <div>

diff --git a/apps/client/src/core/components/sidebar/BoardsRows.vue b/apps/client/src/core/components/sidebar/BoardsRows.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { UiButton } from '@/shared/ui'
+import { useExpandedContext } from '@/shared/composables/expanded'
+import { useBoardsStore } from '@/modules/boards/stores/board'
+
+const boardsStore = useBoardsStore()
+const { boards } = storeToRefs(boardsStore)
+
+const { isExpanded } = useExpandedContext()
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between w-full pt-0 pb-3"
+    :class="[isExpanded ? 'px-2' : 'px-1']"
+  >
+    <p
+      class="text-neutral-500 dark:text-neutral-400 text-small capitalize text-ellipsis
+        whitespace-nowrap overflow-hidden"
+    >
+      {{ $t('sidebar.boards') }}
+    </p>
+  </div>
+  <div class="flex flex-col gap-5px justify-start mb-20px">
+    <UiButton
+      v-for="board, idx in boards"
+      :key="idx"
+      variant="ghost"
+      size="sm"
+      class="w-full gap-2 shadow-none py-0 px-2 transition-all duration-200 ease"
+      :class="[isExpanded ? 'justify-between' : 'justify-center']"
+      :style="{ padding: !isExpanded ? '0px' : '' }"
+      @click="$router.push({
+        name: 'boards-id',
+        params: { id: board._id },
+      })"
+    >
+      <div class="flex items-center gap-2">
+        <div
+          class="flex items-center justify-center w-5 h-5 rounded-sm"
+          :style="{ backgroundColor: `${board.color}33`, color: board.color }"
+        >
+          {{ board.name.charAt(0).toUpperCase() }}
+        </div>
+        <span v-show="isExpanded" class="text-default !fw500 text-neutral-900 dark:text-neutral-100">
+          {{ board.name }}
+        </span>
+      </div>
+    </UiButton>
+  </div>
+</template>
diff --git a/apps/client/src/core/components/sidebar/WorkSpace.vue b/apps/client/src/core/components/sidebar/WorkSpace.vue
@@ -58,11 +58,11 @@ const contentPosition = computed(() => isExpanded.value ? 'space-between' : 'cen
         <div class="flex items-center gap-2">
           <Icon
             :icon="link.icon"
-            class="!w-16px !h-16px 2xl:(!w-4 !h-4) text-neutral-900 dark:text-neutral-200"
+            class="!w-16px !h-16px 2xl:(!min-w-4 !min-h-4) text-neutral-800 dark:text-neutral-200"
           />
           <span
             v-show="isExpanded"
-            class="text-default !fw500 text-neutral-900 dark:text-neutral-100"
+            class="text-default !fw500 text-neutral-950 dark:text-neutral-100"
           >
             {{ $t(`sidebar.${link.name}`) }}
           </span>

diff --git a/apps/client/src/modules/boards/stores/board.ts b/apps/client/src/modules/boards/stores/board.ts
@@ -12,6 +12,7 @@ export const useBoardsStore = defineStore('boards', () => {
       users: [],
       status: 'active',
       labels: [],
+      color: '#df50f2',
     },
   ])
   const board = ref<Board>()

diff --git a/apps/client/src/shared/constants/links.ts b/apps/client/src/shared/constants/links.ts
@@ -11,20 +11,20 @@ export const links: WorkspaceLink[] = [
     id: 1,
     name: 'notes',
     pathName: 'notes',
-    icon: 'hugeicons:checkmark-square-03',
+    icon: 'hugeicons:sticky-note-02',
     badge: true,
   },
   {
     id: 2,
     name: 'templates',
     pathName: 'templates',
-    icon: 'hugeicons:dashboard-square-add',
+    icon: 'hugeicons:block-game',
   },
   {
     id: 3,
     name: 'workflows',
     pathName: 'workflows',
-    icon: 'carbon:workflow-automation',
+    icon: 'hugeicons:route-block',
     badge: true,
   },
   {