jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix transition and adding more responsive layout in mobile

Browse Source
This commit is contained in:
Geriano
2022-07-23 15:37:30 +07:00
parent 2e103128d4
commit 58cee6aba5
2 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
resources/js/Components/DashboardLayout/TopbarDropdown.vue
View File

@@ -16,15 +16,21 @@ const logout = () => Inertia.post(route('logout'))
}
.slide-enter-from, .slide-leave-to {
right: -15rem;
right: -100vw;
}
@media (min-width: 669px) {
.slide-enter-from, .slide-leave-to {
right: -15rem;
}
}
</style>
<template>
<div ref="container" class="flex-none flex items-center justify-between space-x-2 w-full max-w-xs h-14 px-3">
<img :src="user.profile_photo_url" :alt="user.name" class="flex-none rounded-full w-10 h-10">
<div ref="container" class="flex-none flex items-center justify-end sm:justify-between space-x-2 sm:w-full sm:max-w-xs h-14 sm:px-3">
<img :src="user.profile_photo_url" :alt="user.name" class="hidden sm:block flex-none rounded-full w-10 h-10">
<p class="font-semibold lowercase first-letter:capitalize truncate w-full">{{ user.name }}</p>
<p class="hidden sm:inline font-semibold lowercase first-letter:capitalize truncate w-full">{{ user.name }}</p>
<div class="flex-none w-14 h-14 p-3">
<button @click.prevent="open = ! open" class="rounded-md border dark:border-gray-600 w-full h-full text-white dark:text-gray-700 transition-all ease-in-out duration-150 hover:border-gray-700 hover:text-gray-900">
@@ -34,7 +40,7 @@ const logout = () => Inertia.post(route('logout'))
</div>
<transition name="slide">
<div v-if="open" class="fixed sm:right-4 top-12 w-full max-w-xl sm:w-48 bg-white dark:bg-gray-700 rounded-md shadow-xl">
<div v-if="open" class="fixed right-0 sm:right-4 top-12 w-full sm:max-w-xl sm:w-48 bg-white dark:bg-gray-700 rounded-md shadow-xl">
<Link :href="route('profile.show')" as="button" class="w-full border-l-8 border-transparent dark:hover:border-gray-600 px-4 py-2 rounded-t-md transition-all ease-linear duration-150 hover:bg-gray-800">
<div class="flex items-center space-x-2 dark:text-white font-semibold">
<Icon name="user" />