Merge pull request #4277 from traPtitech/fix/channel_not_draggable

チャンネルリンクをdraggable='false'に
traPtitech · May 10, 2024 · b0dd54a · b0dd54a
2 parents 5997a5b + c2517ad
commit b0dd54a
Showing 1 changed file with 26 additions and 18 deletions.
diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue
@@ -20,26 +20,34 @@
         @mouseleave="onHashHoveredLeave"
       />
       <router-link
+        v-slot="{ href, navigate }"
+        custom
         :to="channelIdToLink(props.channel.id)"
-        :class="$style.channel"
-        :aria-current="isSelected && 'page'"
-        :aria-expanded="hasChildren && isOpened ? true : undefined"
-        :data-is-inactive="$boolAttr(!channel.active)"
-        :aria-label="showShortenedPath ? pathTooltip : pathToShow"
-        @mouseenter="onMouseEnter"
-        @mouseleave="onMouseLeave"
-        @focus="onFocus"
-        @blur="onBlur"
       >
-        <channel-element-name
-          :channel="channel"
-          :show-shortened-path="showShortenedPath"
-          :is-selected="isSelected"
-        />
-        <channel-element-unread-badge
-          :is-noticeable="notificationState.isNoticeable"
-          :unread-count="notificationState.unreadCount"
-        />
+        <a
+          :class="$style.channel"
+          :href="href"
+          :aria-current="isSelected && 'page'"
+          :aria-expanded="hasChildren && isOpened ? true : undefined"
+          :data-is-inactive="$boolAttr(!channel.active)"
+          :aria-label="showShortenedPath ? pathTooltip : pathToShow"
+          draggable="false"
+          @click="navigate"
+          @mouseenter="onMouseEnter"
+          @mouseleave="onMouseLeave"
+          @focus="onFocus"
+          @blur="onBlur"
+        >
+          <channel-element-name
+            :channel="channel"
+            :show-shortened-path="showShortenedPath"
+            :is-selected="isSelected"
+          />
+          <channel-element-unread-badge
+            :is-noticeable="notificationState.isNoticeable"
+            :unread-count="notificationState.unreadCount"
+          />
+        </a>
       </router-link>
     </div>