MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-06 22:46:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

red dot

Browse Source
This commit is contained in:
pa
2026-02-22 19:29:54 +09:00
committed by Natsumi
parent bd8551461b
commit d9f88fe987
2 changed files with 38 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/NavMenu.vue
+37 -30
View File
@@ -12,14 +12,16 @@
@click="handleMenuItemClick(item)"> @click="handleMenuItemClick(item)">
<i <i
:class="item.icon" :class="item.icon"
class="inline-flex size-6 items-center justify-center text-lg" /> class="inline-flex size-6 items-center justify-center text-lg relative">
<span
v-if="isNavItemNotified(item)"
class="notify-dot-not-collapsed"
:class="{ '-right-1!': isCollapsed }"
aria-hidden="true"></span>
</i>
<span v-show="!isCollapsed">{{ <span v-show="!isCollapsed">{{
item.titleIsCustom ? item.title : t(item.title || '') item.titleIsCustom ? item.title : t(item.title || '')
}}</span> }}</span>
<span
v-if="isNavItemNotified(item)"
class="notify-dot-not-collapsed"
aria-hidden="true"></span>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
@@ -34,14 +36,15 @@
:tooltip="item.titleIsCustom ? item.title : t(item.title || '')"> :tooltip="item.titleIsCustom ? item.title : t(item.title || '')">
<i <i
:class="item.icon" :class="item.icon"
class="inline-flex size-6 items-center justify-center text-lg" /> class="inline-flex size-6 items-center justify-center text-lg relative"
><span
v-if="isNavItemNotified(item)"
class="notify-dot -right-1!"
aria-hidden="true"></span
></i>
<span v-show="!isCollapsed">{{ <span v-show="!isCollapsed">{{
item.titleIsCustom ? item.title : t(item.title || '') item.titleIsCustom ? item.title : t(item.title || '')
}}</span> }}</span>
<span
v-if="isNavItemNotified(item)"
class="notify-dot"
aria-hidden="true"></span>
</SidebarMenuButton> </SidebarMenuButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent side="right" align="start" class="w-56"> <DropdownMenuContent side="right" align="start" class="w-56">
@@ -52,12 +55,13 @@
<i <i
v-if="entry.icon" v-if="entry.icon"
:class="entry.icon" :class="entry.icon"
class="inline-flex size-4 items-center justify-center text-base" /> class="inline-flex size-4 items-center justify-center text-base relative"
<span>{{ t(entry.label) }}</span ><span
><span v-if="isEntryNotified(entry)"
v-if="isEntryNotified(entry)" class="notify-dot -right-1! top-0.5!"
class="notify-dot left-6!" aria-hidden="true"></span
aria-hidden="true"></span> ></i>
<span>{{ t(entry.label) }}</span>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
@@ -75,14 +79,16 @@
:tooltip="item.titleIsCustom ? item.title : t(item.title || '')"> :tooltip="item.titleIsCustom ? item.title : t(item.title || '')">
<i <i
:class="item.icon" :class="item.icon"
class="inline-flex size-6 items-center justify-center text-lg" /> class="inline-flex size-6 items-center justify-center text-lg relative"
><span
v-if="isNavItemNotified(item)"
class="notify-dot"
aria-hidden="true"></span
></i>
<span v-show="!isCollapsed">{{ <span v-show="!isCollapsed">{{
item.titleIsCustom ? item.title : t(item.title || '') item.titleIsCustom ? item.title : t(item.title || '')
}}</span> }}</span>
<span
v-if="isNavItemNotified(item)"
class="notify-dot left-1!"
aria-hidden="true"></span>
<ChevronRight <ChevronRight
v-show="!isCollapsed" v-show="!isCollapsed"
class="ml-auto transition-transform" class="ml-auto transition-transform"
@@ -98,12 +104,13 @@
<i <i
v-if="entry.icon" v-if="entry.icon"
:class="entry.icon" :class="entry.icon"
class="inline-flex size-5 items-center justify-center text-base" /> class="inline-flex size-5 items-center justify-center text-base relative"
><span
v-if="isEntryNotified(entry)"
class="notify-dot -right-0.5!"
aria-hidden="true"></span
></i>
<span>{{ t(entry.label) }}</span> <span>{{ t(entry.label) }}</span>
<span
v-if="isEntryNotified(entry)"
class="notify-dot left-0.75!"
aria-hidden="true"></span>
</SidebarMenuSubButton> </SidebarMenuSubButton>
</SidebarMenuSubItem> </SidebarMenuSubItem>
</SidebarMenuSub> </SidebarMenuSub>
@@ -853,8 +860,8 @@
.notify-dot { .notify-dot {
position: absolute; position: absolute;
top: 6px; top: 4px;
right: 3px; right: 0;
width: 6px; width: 6px;
height: 6px; height: 6px;
background-color: #ef4444; background-color: #ef4444;
@@ -864,8 +871,8 @@
.notify-dot-not-collapsed { .notify-dot-not-collapsed {
position: absolute; position: absolute;
top: 6px; top: 4px;
left: 3px; right: 0;
width: 6px; width: 6px;
height: 6px; height: 6px;
background-color: #ef4444; background-color: #ef4444;
src/views/Sidebar/Sidebar.vue
+1 -1
View File
@@ -83,7 +83,7 @@
<Bell /> <Bell />
<span <span
v-if="hasUnseenNotifications" v-if="hasUnseenNotifications"
class="absolute top-0.5 right-0.25 size-1.5 rounded-full bg-red-500" /> class="absolute top-1 right-1.25 size-1.5 rounded-full bg-red-500" />
</Button> </Button>
</TooltipWrapper> </TooltipWrapper>
<Popover> <Popover>