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

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

@@ -15,16 +15,22 @@ const logout = () => Inertia.post(route('logout'))
transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;
} }
.slide-enter-from, .slide-leave-to {
right: -100vw;
}
@media (min-width: 669px) {
.slide-enter-from, .slide-leave-to { .slide-enter-from, .slide-leave-to {
right: -15rem; right: -15rem;
} }
}
</style> </style>
<template> <template>
<div ref="container" class="flex-none flex items-center justify-between space-x-2 w-full max-w-xs h-14 px-3"> <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="flex-none rounded-full w-10 h-10"> <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"> <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"> <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> </div>
<transition name="slide"> <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"> <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"> <div class="flex items-center space-x-2 dark:text-white font-semibold">
<Icon name="user" /> <Icon name="user" />

8
resources/js/Layouts/DashboardLayout.vue
View File

@@ -30,13 +30,15 @@ onMounted(() => window.addEventListener('resize', () => open.value = window.inne
<div class="flex bg-gray-200 dark:bg-gray-900 w-full h-screen max-h-screen font-sans"> <div class="flex bg-gray-200 dark:bg-gray-900 w-full h-screen max-h-screen font-sans">
<Head :title="title" /> <Head :title="title" />
<div class="flex-none flex flex-col transition-all ease-in-out duration-300" :class="`${themes().get('sidebar', 'bg-gray-700 text-gray-200 hover:bg-gray-800 hover:text-gray-100 transition-all ease-in-out duration-150').replace(/hover:(bg|text)-(.*?)-(\d+)/)} ${open ? 'w-60' : 'w-0'}`"> <div ref="sidebar" class="fixed sm:static flex-none flex flex-col h-full transition-all ease-in-out duration-300 z-10" :class="`${themes().get('sidebar', 'bg-gray-700 text-gray-200 hover:bg-gray-800 hover:text-gray-100 transition-all ease-in-out duration-100').replace(/hover:(bg|text)-(.*?)-(\d+)/)} ${open ? 'w-full sm:w-60' : 'w-0'}`">
<div class="flex-none flex items-center justify-between w-full h-14 px-2" :class="themes().get('topbar', 'bg-cyan-500 text-gray-700 hover:bg-cyan-600 hover:text-gray-800 transition-all ease-in-out duration-150').replace(/hover:(bg|text)-(.*?)-(\d+)/, '')"> <div v-if="open" class="flex-none flex items-center justify-between w-full h-14 px-2" :class="themes().get('topbar', 'bg-cyan-500 text-gray-700 hover:bg-cyan-600 hover:text-gray-800 transition-all ease-in-out duration-150').replace(/hover:(bg|text)-(.*?)-(\d+)/, '')">
<Toggler @toggle="open = ! open" class="sm:hidden" /> <Toggler @toggle="open = ! open" class="sm:hidden" />
<h1 class="text-2xl text-center font-bold w-full">Template</h1> <h1 class="text-2xl text-center font-bold w-full">Template</h1>
<Toggler class="sm:hidden" /> <div class="flex-none sm:hidden">
<TopbarDropdown />
</div>
</div> </div>
<Sidebar v-if="open" /> <Sidebar v-if="open" />