kamilniemczycki/toby
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Activity

#58 - highlight active section in menu (#59)

Browse Source 
* #58 - wip

* Update resources/js/Shared/MainMenu.vue

Co-authored-by: Ewelina Lasowy <56546832+EwelinaLasowy@users.noreply.github.com>

Co-authored-by: Ewelina Lasowy <56546832+EwelinaLasowy@users.noreply.github.com>
This commit is contained in:
Adrian Hopek 2022-02-22 13:46:09 +01:00 committed by GitHub
parent 17cdee38e0
commit 10b5d0c37e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
resources/js/Shared/MainMenu.vue
View File

@ -45,10 +45,7 @@
@click="sidebarOpen = false" @click="sidebarOpen = false"
> >
<span class="sr-only">Close sidebar</span> <span class="sr-only">Close sidebar</span>
<XIcon <XIcon class="h-6 w-6 text-white" />
class="h-6 w-6 text-white"
aria-hidden="true"
/>
</button> </button>
</div> </div>
</TransitionChild> </TransitionChild>
@ -61,38 +58,27 @@
> >
</InertiaLink> </InertiaLink>
</div> </div>
<nav <nav class="mt-5 flex-shrink-0 h-full divide-y divide-blumilk-800 overflow-y-auto">
class="mt-5 flex-shrink-0 h-full divide-y divide-blumilk-800 overflow-y-auto"
aria-label="Sidebar"
>
<div class="px-2 space-y-1"> <div class="px-2 space-y-1">
<InertiaLink <InertiaLink
v-for="item in navigation" href="/"
:key="item.name" :class="[$page.url === '/' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
:href="item.href"
:class="[item.current ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']"
:aria-current="item.current ? 'page' : undefined"
> >
<component <HomeIcon class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200" />
:is="item.icon" Strona główna
class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
aria-hidden="true"
/>
{{ item.name }}
</InertiaLink> </InertiaLink>
</div> </div>
<div class="mt-6 pt-6"> <div class="mt-3 pt-3">
<div class="px-2 space-y-1"> <div class="px-2 space-y-1">
<InertiaLink <InertiaLink
v-for="item in secondaryNavigation" v-for="item in navigation"
:key="item.name" :key="item.name"
:href="item.href" :href="item.href"
class="group flex items-center px-2 py-2 text-base font-medium rounded-md text-blumilk-100 hover:text-white hover:bg-blumilk-600" :class="[$page.url.startsWith(item.href) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']"
> >
<component <component
:is="item.icon" :is="item.icon"
class="mr-4 h-6 w-6 text-blumilk-200" class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
aria-hidden="true"
/> />
{{ item.name }} {{ item.name }}
</InertiaLink> </InertiaLink>
@ -101,10 +87,7 @@
</nav> </nav>
</div> </div>
</TransitionChild> </TransitionChild>
<div <div class="flex-shrink-0 w-14" />
class="flex-shrink-0 w-14"
aria-hidden="true"
/>
</Dialog> </Dialog>
</TransitionRoot> </TransitionRoot>
@ -120,38 +103,27 @@
> >
</InertiaLink> </InertiaLink>
</div> </div>
<nav <nav class="mt-5 flex-1 flex flex-col divide-y divide-blumilk-800 overflow-y-auto">
class="mt-5 flex-1 flex flex-col divide-y divide-blumilk-800 overflow-y-auto"
aria-label="Sidebar"
>
<div class="px-2 space-y-1"> <div class="px-2 space-y-1">
<InertiaLink <InertiaLink
v-for="item in navigation" href="/"
:key="item.name" :class="[$page.url === '/' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
:href="item.href"
:class="[item.current ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
:aria-current="item.current ? 'page' : undefined"
> >
<component <HomeIcon class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200" />
:is="item.icon" Dashboard
class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
aria-hidden="true"
/>
{{ item.name }}
</InertiaLink> </InertiaLink>
</div> </div>
<div class="mt-6 pt-6"> <div class="mt-4 pt-4">
<div class="px-2 space-y-1"> <div class="px-2 space-y-1">
<InertiaLink <InertiaLink
v-for="item in secondaryNavigation" v-for="item in navigation"
:key="item.name" :key="item.name"
:href="item.href" :href="item.href"
class="group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-blumilk-100 hover:text-white hover:bg-blumilk-600" :class="[$page.url.startsWith(item.href) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
> >
<component <component
:is="item.icon" :is="item.icon"
class="mr-4 h-6 w-6 text-blumilk-200" class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200"
aria-hidden="true"
/> />
{{ item.name }} {{ item.name }}
</InertiaLink> </InertiaLink>
@ -169,10 +141,7 @@
@click="sidebarOpen = true" @click="sidebarOpen = true"
> >
<span class="sr-only">Open sidebar</span> <span class="sr-only">Open sidebar</span>
<MenuAlt1Icon <MenuAlt1Icon class="h-6 w-6" />
class="h-6 w-6"
aria-hidden="true"
/>
</button> </button>
<div class="flex-1 px-4 flex justify-between sm:px-6 lg:px-8"> <div class="flex-1 px-4 flex justify-between sm:px-6 lg:px-8">
<div class="flex items-center"> <div class="flex items-center">
@ -305,12 +274,9 @@ import {
} from '@headlessui/vue' } from '@headlessui/vue'
import { import {
BellIcon, BellIcon,
CogIcon,
HomeIcon, HomeIcon,
CollectionIcon, CollectionIcon,
MenuAlt1Icon, MenuAlt1Icon,
QuestionMarkCircleIcon,
ShieldCheckIcon,
UserGroupIcon, UserGroupIcon,
XIcon, XIcon,
SunIcon, SunIcon,
@ -362,29 +328,23 @@ export default {
const years = computed(() => usePage().props.value.years) const years = computed(() => usePage().props.value.years)
const navigation = [ const navigation = [
{name: 'Strona główna', href: '/', icon: HomeIcon, current: true}, {name: 'Wnioski urlopowe', href: '/vacation-requests', icon: CollectionIcon},
{name: 'Wnioski urlopowe', href: '/vacation-requests', icon: CollectionIcon, current: false}, {name: 'Kalendarz urlopów', href: '/vacation-calendar', icon: CalendarIcon},
{name: 'Kalendarz urlopów', href: '/vacation-calendar', icon: CalendarIcon, current: false}, {name: 'Dni wolne', href: '/holidays', icon: StarIcon},
{name: 'Dni wolne', href: '/holidays', icon: StarIcon, current: false}, {name: 'Limity urlopów', href: '/vacation-limits', icon: SunIcon},
{name: 'Limity urlopów', href: '/vacation-limits', icon: SunIcon, current: false}, {name: 'Użytkownicy', href: '/users', icon: UserGroupIcon},
{name: 'Użytkownicy', href: '/users', icon: UserGroupIcon, current: false},
] ]
const userNavigation = [ const userNavigation = [
{name: 'Your Profile', href: '#'}, {name: 'Your Profile', href: '#'},
{name: 'Settings', href: '#'}, {name: 'Settings', href: '#'},
{name: 'Wyloguj się', href: '/logout', method: 'post', as: 'button'}, {name: 'Wyloguj się', href: '/logout', method: 'post', as: 'button'},
] ]
const secondaryNavigation = [
{name: 'Settings', href: '#', icon: CogIcon},
{name: 'Help', href: '#', icon: QuestionMarkCircleIcon},
{name: 'Privacy', href: '#', icon: ShieldCheckIcon},
]
return { return {
user, user,
years, years,
navigation, navigation,
secondaryNavigation,
userNavigation, userNavigation,
sidebarOpen, sidebarOpen,
} }