hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change from div click to routerling inside top bar menu

Browse Source
This commit is contained in:
RcleydsonR 2022-12-25 23:26:43 -03:00
parent 36e3368f58
commit d70b009b93
1 changed files with 50 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/TopBar.vue
View File

@ -35,24 +35,38 @@ const formatWalletBalance = (): String => {
const disconnectUser = () => { const disconnectUser = () => {
etherStore.setWalletAddress(""); etherStore.setWalletAddress("");
const currentRoute = router.currentRoute.value.path; closeMenu();
if (currentRoute !== "/") { window.location.reload();
router.push("/"); };
} else {
window.location.reload(); const closeMenu = () => {
} menuOpenToggle.value = false;
}; };
</script> </script>
<template> <template>
<header> <header>
<img alt="P2Pix logo" class="logo" src="@/assets/logo.svg" width="75" height="75" /> <img
alt="P2Pix logo"
class="logo"
src="@/assets/logo.svg"
width="75"
height="75"
/>
<div class="flex gap-4 items-center"> <div class="flex gap-4 items-center">
<button type="button" class="default-button" v-on:click="router.push('/seller')"> <button
type="button"
class="default-button"
v-on:click="router.push('/seller')"
>
Quero vender Quero vender
</button> </button>
<button type="button" v-if="!walletAddress" class="border-amber-500 border-2 rounded default-button" <button
@click="connectMetaMask()"> type="button"
v-if="!walletAddress"
class="border-amber-500 border-2 rounded default-button"
@click="connectMetaMask()"
>
Conectar carteira Conectar carteira
</button> </button>
<div v-if="walletAddress" class="account-info"> <div v-if="walletAddress" class="account-info">
@ -105,37 +119,29 @@ const disconnectUser = () => {
src="@/assets/chevronDownBlack.svg" src="@/assets/chevronDownBlack.svg"
/> />
</div> </div>
<div <div v-show="menuOpenToggle" class="mt-10 absolute w-full text-black">
v-show="menuOpenToggle"
class="mt-10 absolute w-full text-black"
>
<div class="pl-4 mt-2"> <div class="pl-4 mt-2">
<div class="bg-white rounded-md z-10"> <div class="bg-white rounded-md z-10">
<div <div class="menu-button" @click="closeMenu()">
class="menu-button px-4 rounded-md cursor-pointer" <RouterLink to="/bid_history" class="redirect_button px-0">
onclick="window.location='/bid_history'"
>
<div class="py-4 text-end font-semibold text-xs">
Histórico de compras Histórico de compras
</div> </RouterLink>
<hr />
</div> </div>
<div <div class="w-full flex justify-center">
class="menu-button px-4 cursor-pointer" <hr class="w-4/5" />
onclick="window.location='/manage_bids'" </div>
> <div class="menu-button" @click="closeMenu()">
<div class="py-4 text-end font-semibold text-xs"> <RouterLink to="/manage_bids" class="redirect_button">
Gerenciar Ofertas Gerenciar Ofertas
</div> </RouterLink>
<hr />
</div> </div>
<div <div class="w-full flex justify-center">
class="menu-button px-4 py-1 rounded-md cursor-pointer" <hr class="w-4/5" />
@click="disconnectUser" </div>
> <div class="menu-button" @click="disconnectUser">
<div class="py-3 text-end font-semibold text-xs"> <RouterLink to="/" class="redirect_button">
Desconectar Desconectar
</div> </RouterLink>
</div> </div>
</div> </div>
</div> </div>
@ -173,7 +179,15 @@ header {
@apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 rounded; @apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 rounded;
} }
.menu-button:hover { .redirect_button {
background-color: #E5E7EB; @apply py-4 text-gray-900 font-semibold text-xs w-full;
}
.menu-button {
@apply flex text-center justify-center;
}
a:hover {
@apply bg-gray-200 rounded;
} }
</style> </style>