correct focus order for nav header - issue #1782
This commit is contained in:
Laurent GAY
@@ -12,6 +12,62 @@
|
||||
>
|
||||
<MobilizonLogo class="w-40" />
|
||||
</router-link>
|
||||
<div
|
||||
class="justify-between items-center w-full md:flex md:w-auto md:order-1"
|
||||
id="mobile-menu-2"
|
||||
:class="{ hidden: !showMobileMenu }"
|
||||
>
|
||||
<ul
|
||||
class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold"
|
||||
>
|
||||
<li class="m-auto">
|
||||
<router-link
|
||||
:to="{ name: RouteName.SEARCH }"
|
||||
class="block relative py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("Search") }}</router-link
|
||||
>
|
||||
</li>
|
||||
|
||||
<li class="m-auto">
|
||||
<router-link
|
||||
:to="{ name: RouteName.EVENT_CALENDAR }"
|
||||
class="block relative py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("Calendar")
|
||||
}}<span class="absolute right-0 text-xs"
|
||||
><br />(beta)</span
|
||||
></router-link
|
||||
>
|
||||
</li>
|
||||
<li class="m-auto" v-if="currentActor?.id">
|
||||
<router-link
|
||||
:to="{ name: RouteName.MY_EVENTS }"
|
||||
class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("My events") }}</router-link
|
||||
>
|
||||
</li>
|
||||
<li class="m-auto" v-if="currentActor?.id">
|
||||
<router-link
|
||||
:to="{ name: RouteName.MY_GROUPS }"
|
||||
class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("My groups") }}</router-link
|
||||
>
|
||||
</li>
|
||||
<li class="m-auto" v-if="!currentUser?.isLoggedIn">
|
||||
<router-link
|
||||
:to="{ name: RouteName.LOGIN }"
|
||||
class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("Login") }}</router-link
|
||||
>
|
||||
</li>
|
||||
<li class="m-auto" v-if="!currentUser?.isLoggedIn && canRegister">
|
||||
<router-link
|
||||
:to="{ name: RouteName.REGISTER }"
|
||||
class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("Register") }}</router-link
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center md:order-2 ml-auto gap-2"
|
||||
v-if="currentUser?.isLoggedIn"
|
||||
@@ -172,62 +228,6 @@
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
class="justify-between items-center w-full md:flex md:w-auto md:order-1"
|
||||
id="mobile-menu-2"
|
||||
:class="{ hidden: !showMobileMenu }"
|
||||
>
|
||||
<ul
|
||||
class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold"
|
||||
>
|
||||
<li class="m-auto">
|
||||
<router-link
|
||||
:to="{ name: RouteName.SEARCH }"
|
||||
class="block relative py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("Search") }}</router-link
|
||||
>
|
||||
</li>
|
||||
|
||||
<li class="m-auto">
|
||||
<router-link
|
||||
:to="{ name: RouteName.EVENT_CALENDAR }"
|
||||
class="block relative py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("Calendar")
|
||||
}}<span class="absolute right-0 text-xs"
|
||||
><br />(beta)</span
|
||||
></router-link
|
||||
>
|
||||
</li>
|
||||
<li class="m-auto" v-if="currentActor?.id">
|
||||
<router-link
|
||||
:to="{ name: RouteName.MY_EVENTS }"
|
||||
class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("My events") }}</router-link
|
||||
>
|
||||
</li>
|
||||
<li class="m-auto" v-if="currentActor?.id">
|
||||
<router-link
|
||||
:to="{ name: RouteName.MY_GROUPS }"
|
||||
class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("My groups") }}</router-link
|
||||
>
|
||||
</li>
|
||||
<li class="m-auto" v-if="!currentUser?.isLoggedIn">
|
||||
<router-link
|
||||
:to="{ name: RouteName.LOGIN }"
|
||||
class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("Login") }}</router-link
|
||||
>
|
||||
</li>
|
||||
<li class="m-auto" v-if="!currentUser?.isLoggedIn && canRegister">
|
||||
<router-link
|
||||
:to="{ name: RouteName.REGISTER }"
|
||||
class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("Register") }}</router-link
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user