Compare commits

..

No commits in common. '4d911b38ca0a75c65507231ecb7d8cd59fabc622' and '01aa374f4f84ec6c3bf75bee20115d8a3d2eacf0' have entirely different histories.

@ -3,7 +3,6 @@ const isSidebarActive = useSidebar()
const user = useUser() const user = useUser()
const sidebar = ref<HTMLElement | undefined>() const sidebar = ref<HTMLElement | undefined>()
const openSetting = ref<Boolean>(false)
type UserOption = { type UserOption = {
title: string title: string
@ -30,7 +29,9 @@ const userOptions: Array<UserOption> = [
{ {
title: 'Profile', title: 'Profile',
icon: 'user', icon: 'user',
onClick: () => openUserProfile(), onClick: () => {
useRouter().push('/profile')
},
}, },
] ]
@ -57,21 +58,17 @@ onClickOutside(sidebar, () => {
class="hover:cursor-pointer" /> class="hover:cursor-pointer" />
</div> </div>
<Icon <Icon
@click="openUserProfile()"
name="user" name="user"
size="36" size="36"
ref="userIcon" ref="userIcon" />
class="hover:cursor-pointer" /> <div>
<div
@click="openUserProfile()"
class="hover:cursor-pointer hover:underline">
{{ user }} {{ user }}
</div> </div>
</div> </div>
<div ref="userOptionsCard"> <div ref="userOptionsCard">
<div <div
v-for="userOption in userOptions" v-for="userOption in userOptions"
class="flex w-full items-center p-4 text-xl hover:cursor-pointer hover:bg-lightgray" class="flex w-full items-center p-4 text-xl hover:bg-lightgray"
@click="userOption.onClick()"> @click="userOption.onClick()">
<Icon <Icon
v-if="userOption.icon" v-if="userOption.icon"
@ -82,25 +79,6 @@ onClickOutside(sidebar, () => {
</div> </div>
</div> </div>
</div> </div>
<div class="mt-4 flex flex-col border-t-2 border-t-lightgray">
<div
@click="openSetting = !openSetting"
class="flex justify-between p-4 hover:cursor-pointer hover:bg-lightgray">
<div>Settings</div>
<Icon
name="mdi:chevron-up"
class="transition-transform"
:class="{
'rotate-0': !openSetting,
'-rotate-180': openSetting,
}" />
</div>
<div
v-if="openSetting"
class="px-4 py-2 hover:cursor-pointer hover:bg-lightgray">
Delete Account
</div>
</div>
</div> </div>
<div <div
class="absolute z-40 h-screen w-screen bg-white/5" class="absolute z-40 h-screen w-screen bg-white/5"

@ -2,12 +2,8 @@ const openUrl = (url: string) => {
window.open(url, '_blank') window.open(url, '_blank')
} }
const openUserProfile = () => {
useRouter().push('/profile')
}
const useSidebar = () => useState<Boolean>('isSidebarActive', () => false) const useSidebar = () => useState<Boolean>('isSidebarActive', () => false)
const openSidebar = () => [(useSidebar().value = true)] const openSidebar = () => [(useSidebar().value = true)]
const closeSidebar = () => [(useSidebar().value = false)] const closeSidebar = () => [(useSidebar().value = false)]
export { closeSidebar, openSidebar, openUrl, openUserProfile, useSidebar } export { closeSidebar, openSidebar, openUrl, useSidebar }

Loading…
Cancel
Save