Merge pull request #29 from shivero/feature/development

align channels with icon

Author: shivero

src/components/Channel.vue

@@ -1,18 +1,17 @@
 <template>
   <div :class="unreadClass" class="">
-    <div
-      :class="isActive"
-      class="mx-2 flex h-8 items-center gap-2 rounded-md px-2 opacity-100 hover:cursor-pointer ">
+    <div :class="isActive"
+      class="mx-2 flex h-8 items-center gap-2 rounded-md px-2 opacity-100 hover:cursor-pointer leading-none">
       <div v-if="props.channel.type == 'voice'">
-        <div><VolumeChannelIcon class="fill-gray-500" /></div>
+        <div>
+          <VolumeChannelIcon class="fill-gray-500" />
+        </div>
       </div>
-      
+
       <div v-else-if="props.channel.type == 'text'">
-        <div><TextChannelIcon class="fill-gray-500" /></div>
+        <TextChannelIcon class="fill-gray-500" />
       </div>
-      <div
-        :class="props.channel.unread ? 'text-white' : ''"
-        class="w-[80%] -translate-y-0.5 truncate font-semibold">
+      <div :class="props.channel.unread ? 'text-white' : ''" class="truncate font-semibold">
         {{ props.channel.name }}
       </div>
     </div>
@@ -29,13 +28,13 @@ import { useChannelStore } from "@/store/channelStore";
 const channelStore = useChannelStore();
 
 const isActive = computed(() => {
-  return `${channelStore.group}+${channelStore.name}` === `${props.channel.group}+${props.channel.name}` 
-  ? "bg-gray-700 text-white hover:bg-gray-700"
-  : "text-gray-500 hover:bg-gray-700 hover:text-gray-400";
+  return `${channelStore.group}+${channelStore.name}` === `${props.channel.group}+${props.channel.name}`
+    ? "bg-gray-700 text-white hover:bg-gray-700"
+    : "text-gray-500 hover:bg-gray-700 hover:text-gray-400";
 });
 let unreadClass =
   props.channel.unread ?
-  `before:content-[" "] relative before:absolute before:-translate-y-1/2 before:top-1/2
+    `before:content-[" "] relative before:absolute before:-translate-y-1/2 before:top-1/2
  before:rounded-full before:bg-white before:h-3 before:w-2 before:block before:-translate-x-1
 overflow-hidden before:overflow-auto` : "";
 </script>

src/components/ChannelHeader.vue

@@ -83,7 +83,7 @@ const muteNotificationOptions = [
         </MenuButton>
 
         <MenuItems
-          class="absolute right-0 top-10 flex w-min max-w-sm flex-col rounded-lg bg-zinc-900 px-2 py-2">
+          class="absolute z-10 right-0 top-10 flex w-min max-w-sm flex-col rounded-lg bg-zinc-900 px-2 py-2">
           <MenuItem class="mb-1">
             <span>
               <Menu as="div" class="relative" v-slot="{ open }">