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

restyling dashboard layout

Browse Source
This commit is contained in:
Geriano
2022-09-08 15:09:50 +07:00
parent 364af7a558
commit 5fd44b83a6
9 changed files with 106 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,20 +40,20 @@ const logout = async () => {
</style>
<template>
<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">
<div ref="container" class="flex-none flex items-center justify-end md:justify-between space-x-2 w-14 md:w-full md:max-w-[15rem] h-14">
<img :src="user.profile_photo_url" :alt="user.name" class="hidden md:block flex-none rounded-full w-10 h-10">
<p class="hidden sm:inline font-semibold lowercase first-letter:capitalize truncate w-full">{{ user.name }}</p>
<p class="hidden md: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 border-gray-600 w-full h-full 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 w-full h-full text-gray-700 transition-all ease-in-out duration-150 hover:border-gray-700 hover:text-gray-900">
<Icon name="caret-left" class="transition-all ease-linear duration-500" :class="open && '-rotate-90'" />
</button>
</div>
</div>
<transition name="slide">
<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">
<div v-if="open" class="fixed right-0 md:right-4 top-12 w-full md:max-w-xl md: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-200 dark:hover:bg-gray-800">
<div class="flex items-center space-x-2 dark:text-white font-semibold">
<Icon name="user" />