Skip to content

Commit e9e6baa

Browse files
yaroslav8765yaroslav8765
committed
fix: update header icons size and grouping
1 parent 49646d4 commit e9e6baa

File tree

1 file changed

+55
-55
lines changed

1 file changed

+55
-55
lines changed

‎adminforth/spa/src/App.vue‎

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</svg>
1616
</button>
1717
</div>
18-
<div class="flex items-center">
18+
<div class="flex items-center gap-4">
1919
<component
2020
v-if="coreStore?.adminUser"
2121
v-for="c in coreStore?.config?.globalInjections?.header || []"
@@ -24,61 +24,61 @@
2424
:adminUser="coreStore.adminUser"
2525
/>
2626

27-
<div class="flex items-center ms-3 ">
28-
<Tooltip>
29-
<IconWifiOff v-if="coreStore.isInternetError" class="blinking-icon w-8 h-8 text-red-500" />
30-
<template #tooltip>
31-
{{$t('Internet connection lost')}}
32-
</template>
33-
</Tooltip>
34-
<span
35-
v-if="!coreStore.config?.singleTheme"
36-
@click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black dark:text-darkSidebarTextHover dark:hover:text-darkSidebarTextActive" role="menuitem">
37-
<IconMoonSolid class="w-5 h-5 text-blue-300" v-if="coreStore.theme !== 'dark'" />
38-
<IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
39-
</span>
40-
<div>
41-
<button
42-
ref="dropdownUserButton"
43-
type="button" class="flex text-sm bg- rounded-full focus:ring-4 focus:ring-lightSidebarDevider dark:focus:ring-darkSidebarDevider dark:bg-" aria-expanded="false" data-dropdown-toggle="dropdown-user">
44-
<span class="sr-only">{{ $t('Open user menu') }}</span>
45-
<img
46-
v-if="coreStore.userAvatarUrl"
47-
class="w-8 h-8 rounded-full object-cover"
48-
:src="coreStore.userAvatarUrl"
49-
alt="user photo"
50-
/>
51-
<svg v-else class="w-8 h-8 text-lightNavbarIcons dark:text-darkNavbarIcons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
52-
<path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
53-
</svg>
54-
</button>
55-
</div>
56-
<div class="z-50 hidden my-4 text-base list-none bg-lightUserMenuBackground divide-y divide-lightUserMenuBorder text-lightUserMenuText rounded shadow dark:shadow-black dark:bg-darkUserMenuBackground dark:divide-darkUserMenuBorder text-darkUserMenuText dark:shadow-black" id="dropdown-user">
57-
<div class="px-4 py-3" role="none">
58-
<p class="text-sm text-gray-900 dark:text-darkNavbarText" role="none" v-if="coreStore.userFullname">
59-
{{ coreStore.userFullname }}
60-
</p>
61-
<p class="text-sm font-medium text-gray-900 truncate dark:text-darkSidebarText" role="none">
62-
{{ coreStore.username }}
63-
</p>
64-
</div>
65-
66-
<ul class="py-1" role="none">
67-
<li v-for="c in userMenuComponents" class="bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover" >
68-
<component
69-
:is="getCustomComponent(c)"
70-
:meta="c.meta"
71-
:adminUser="coreStore.adminUser"
72-
/>
73-
</li>
74-
<li v-if="coreStore?.config?.settingPages && coreStore.config.settingPages.length > 0">
75-
<UserMenuSettingsButton />
76-
</li>
77-
<li>
78-
<button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover w-full" role="menuitem">{{ $t('Sign out') }}</button>
79-
</li>
80-
</ul>
27+
<Tooltip v-if="coreStore.isInternetError">
28+
<IconWifiOff class="blinking-icon w-8 h-8 text-red-500 hover:scale-110 transition-transform duration-200" />
29+
<template #tooltip>
30+
{{$t('Internet connection lost')}}
31+
</template>
32+
</Tooltip>
33+
34+
<span
35+
v-if="!coreStore.config?.singleTheme"
36+
class="flex items-center gap-1 block py-2 text-sm text-black dark:text-darkSidebarTextHover dark:hover:text-darkSidebarTextActive" role="menuitem">
37+
<IconMoonSolid class="w-6 h-6 text-blue-300 hover:scale-110 cursor-pointer transition-transform duration-200" @click="toggleTheme" v-if="coreStore.theme !== 'dark'" />
38+
<IconSunSolid class="w-6 h-6 text-yellow-300 hover:scale-110 cursor-pointer transition-transform duration-200" @click="toggleTheme" v-else />
39+
</span>
40+
41+
<div>
42+
<button
43+
ref="dropdownUserButton"
44+
type="button" class=" hover:scale-110 transition-transform duration-200 flex text-sm bg- rounded-full focus:ring-4 focus:ring-lightSidebarDevider dark:focus:ring-darkSidebarDevider dark:bg-" aria-expanded="false" data-dropdown-toggle="dropdown-user">
45+
<span class="sr-only">{{ $t('Open user menu') }}</span>
46+
<img
47+
v-if="coreStore.userAvatarUrl"
48+
class="w-8 h-8 rounded-full object-cover"
49+
:src="coreStore.userAvatarUrl"
50+
alt="user photo"
51+
/>
52+
<svg v-else class="w-8 h-8 text-lightNavbarIcons dark:text-darkNavbarIcons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
53+
<path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
54+
</svg>
55+
</button>
56+
</div>
57+
<div class="z-50 hidden my-4 text-base list-none bg-lightUserMenuBackground divide-y divide-lightUserMenuBorder text-lightUserMenuText rounded shadow dark:shadow-black dark:bg-darkUserMenuBackground dark:divide-darkUserMenuBorder text-darkUserMenuText dark:shadow-black" id="dropdown-user">
58+
<div class="px-4 py-3" role="none">
59+
<p class="text-sm text-gray-900 dark:text-darkNavbarText" role="none" v-if="coreStore.userFullname">
60+
{{ coreStore.userFullname }}
61+
</p>
62+
<p class="text-sm font-medium text-gray-900 truncate dark:text-darkSidebarText" role="none">
63+
{{ coreStore.username }}
64+
</p>
8165
</div>
66+
67+
<ul class="py-1" role="none">
68+
<li v-for="c in userMenuComponents" class="bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover" >
69+
<component
70+
:is="getCustomComponent(c)"
71+
:meta="c.meta"
72+
:adminUser="coreStore.adminUser"
73+
/>
74+
</li>
75+
<li v-if="coreStore?.config?.settingPages && coreStore.config.settingPages.length > 0">
76+
<UserMenuSettingsButton />
77+
</li>
78+
<li>
79+
<button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover w-full" role="menuitem">{{ $t('Sign out') }}</button>
80+
</li>
81+
</ul>
8282
</div>
8383
</div>
8484
</div>

0 commit comments

Comments
 (0)