diff --git a/src/App.vue b/src/App.vue
index 31d2b941a3509fe0e4f4fdf19007bf63f3403c57..33fdde9c50ae4d1dfef18c014018dba458edd684 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,11 +4,10 @@ import { useSettingsStore, UsedWallet } from '@/stores/settings.store';
import { useWalletStore } from '@/stores/wallet.store';
import AppSidebar from '@/components/sidebar';
import { SidebarProvider } from '@/components/ui/sidebar';
-import ToggleSidebar from './components/sidebar/ToggleSidebar.vue';
import { Toaster } from 'vue-sonner';
import { useUserStore } from '@/stores/user.store';
import { getWax } from '@/stores/wax.store';
-import AppHeader from '@/components/AppHeader.vue';
+import AppHeader from '@/components/sidebar/AppHeader.vue';
const WalletOnboarding = defineAsyncComponent(() => import('@/components/onboarding/index'));
@@ -45,11 +44,12 @@ const complete = async(data: { account: string; wallet: UsedWallet }) => {
<div id="app-main">
<SidebarProvider>
<AppSidebar/>
- <!-- <AppHeader/> -->
- <main class="w-full bg-background">
- <ToggleSidebar class="m-3" />
- <RouterView />
- </main>
+ <div class="w-full">
+ <AppHeader/>
+ <main class="w-full h-[calc(100%-60px)] bg-background">
+ <RouterView />
+ </main>
+ </div>
<aside v-if="walletStore.isWalletSelectModalOpen" class="fixed inset-0 flex items-center justify-center z-20">
<WalletOnboarding @close="walletStore.closeWalletSelectModal()" @complete="complete" />
</aside>
@@ -60,12 +60,6 @@ const complete = async(data: { account: string; wallet: UsedWallet }) => {
</template>
<style scoped>
-#app-main {
- overflow-y: auto;
- background: url('/bg.svg') no-repeat center center fixed;
- background-size: cover;
-}
-
#shadcn-root {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
deleted file mode 100644
index 8e48a9bd56e2ef11088a094747303730ea253285..0000000000000000000000000000000000000000
--- a/src/components/AppHeader.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { useSettingsStore, getWalletIcon } from '@/stores/settings.store';
-import { mdiLogoutVariant } from '@mdi/js';
-import { computed } from 'vue';
-import { Button } from '@/components/ui/button';
-
-const settingsStore = useSettingsStore();
-const hasUser = computed(() => settingsStore.settings.account !== undefined);
-
-const logout = () => {
- settingsStore.resetSettings();
- window.location.reload();
-};
-</script>
-
-<template>
- <header class="fixed top-0 left-0 z-10 bg-black/60 backdrop-blur-sm w-full">
- <nav class="flex items-center relative sm:justify-center p-4 w-full h-[65px] border-b-[1px] border-white/25">
- <div class="hidden sm:inline absolute top-[14px] left-[30px]" v-if="hasUser">
- </div>
- <div class="flex items-center space-x-4">
- <img src="/icon.svg" class="h-8 w-8" />
- <h1 class="hidden sm:inline text-2xl font-bold tracking-widest">Hive Bridge</h1>
- <Button variant="outline" class="absolute top-[14px] left-[45px] inline-flex sm:hidden" v-if="settingsStore.isLoaded && hasUser">
- <h1 v-if="hasUser" class="inline sm:hidden text-lg sm:text-xl font-bold">@{{ settingsStore.settings.account }}</h1>
- </Button>
- </div>
- <div class="absolute top-[14px] right-[30px]">
- <Button variant="outline" v-if="settingsStore.isLoaded && hasUser" @click="logout">
- <img v-if="hasUser" :src="getWalletIcon(settingsStore.settings.wallet!)" class="h-6 w-6" />
- <span class="hidden sm:inline font-bold">Disconnect</span>
- <svg class="inline sm:hidden" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill: hsl(var(--foreground))" :d="mdiLogoutVariant"/></svg>
- </Button>
- </div>
- </nav>
- </header>
-</template>
\ No newline at end of file
diff --git a/src/components/sidebar/AppHeader.vue b/src/components/sidebar/AppHeader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4ce0d88839bc54e0ab57ab65b6de55ad6f2dae3c
--- /dev/null
+++ b/src/components/sidebar/AppHeader.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import ToggleSidebar from '@/components/sidebar/ToggleSidebar.vue';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button';
+import { useWalletStore } from "@/stores/wallet.store";
+import { useSettingsStore, getWalletIcon } from '@/stores/settings.store';
+import ThemeSwitch from "@/components/ui/theme-switch";
+import { computed } from 'vue';
+import { useUserStore } from '@/stores/user.store';
+import { mdiLogout } from '@mdi/js';
+
+const settingsStore = useSettingsStore();
+const hasUser = computed(() => settingsStore.settings.account !== undefined);
+
+const logout = () => {
+ settingsStore.resetSettings();
+ window.location.reload();
+};
+
+const walletStore = useWalletStore();
+
+const userStore = useUserStore();
+</script>
+
+<template>
+ <header class="w-full h-[60px] bg-background">
+ <div class="fixed top-0 z-10 bg-background/60 backdrop-blur-sm px-4 h-[60px] border-b w-full md:w-[calc(100%-var(--sidebar-width))] flex items-center justify-between">
+ <ToggleSidebar />
+ <div v-if="settingsStore.isLoaded" class="ml-2 inline-flex items-center">
+ <Avatar class="w-8 h-8 mr-2">
+ <AvatarImage v-if="userStore.profileImage" :src="userStore.profileImage" />
+ <AvatarFallback v-if="settingsStore.isLoaded && hasUser">{{ settingsStore.settings.account?.slice(0, 2) }}</AvatarFallback>
+ </Avatar>
+ <span class="font-bold max-w-[150px] md:max-w-full truncate" v-if="settingsStore.isLoaded && hasUser">@{{ settingsStore.settings.account }}</span>
+ </div>
+ <div class="ml-auto inline-flex items-center space-x-4 md:space-x-6">
+ <ThemeSwitch class="w-6 h-6" />
+ <Button variant="outline" class="[&_svg]:size-6" @click="settingsStore.isLoaded && hasUser ? logout() : walletStore.openWalletSelectModal()">
+ <img v-if="hasUser" :src="getWalletIcon(settingsStore.settings.wallet!)" class="h-6 w-6" />
+ <span v-if="settingsStore.isLoaded && hasUser">
+ <span class="font-bold hidden md:inline">Disconnect</span>
+ <svg class="inline md:hidden" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <path style="fill: hsl(var(--foreground))" :d="mdiLogout"></path>
+ </svg>
+ </span>
+ <span v-else>Connect</span>
+ </Button>
+ </div>
+ </div>
+ </header>
+</template>
\ No newline at end of file
diff --git a/src/components/sidebar/AppSidebar.vue b/src/components/sidebar/AppSidebar.vue
index 896dad44e6ae80ead362b60582eca08f17ce1678..d879c593133f24021156ee7f68f27375340d0d9a 100644
--- a/src/components/sidebar/AppSidebar.vue
+++ b/src/components/sidebar/AppSidebar.vue
@@ -2,31 +2,12 @@
import { mdiHomeOutline, mdiMessageLockOutline, mdiFileSign, mdiAccountPlusOutline, mdiAccountArrowUpOutline } from "@mdi/js"
import { Sidebar, SidebarContent, SidebarHeader, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"
import { useSidebar } from "@/components/ui/sidebar";
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { useSettingsStore, getWalletIcon } from '@/stores/settings.store';
-import { computed } from 'vue';
-import { Button } from '@/components/ui/button';
-import { useUserStore } from "@/stores/user.store";
-import ThemeSwitch from "../ui/theme-switch";
-import { useWalletStore } from "@/stores/wallet.store";
import { useRouter } from "vue-router";
-const settingsStore = useSettingsStore();
-const hasUser = computed(() => settingsStore.settings.account !== undefined);
-
-const logout = () => {
- settingsStore.resetSettings();
- window.location.reload();
-};
-
const router = useRouter();
-const walletStore = useWalletStore();
-
const { toggleSidebar, isMobile } = useSidebar();
-const userStore = useUserStore();
-
const groups = [{
title: "Account management",
items: [
@@ -65,23 +46,11 @@ const groups = [{
<template>
<Sidebar>
- <SidebarHeader class="pb-0">
- <div class="flex items-center p-2">
- <img src="/icon.svg" class="h-8 w-8" />
+ <SidebarHeader class="p-0">
+ <div class="flex items-center px-4 h-[60px] border-b">
+ <img src="/icon.svg" class="h-[32px] w-[32px]" />
<span class="text-foreground/80 font-bold text-xl ml-2">Hive Bridge</span>
</div>
- <div class="flex items-center rounded-lg p-2 mt-1 mx-1 bg-background/40 border">
- <Avatar class="w-8 h-8 mr-2">
- <AvatarImage :src="userStore.profileImage ? userStore.profileImage : '/icon.svg'" />
- <AvatarFallback v-if="settingsStore.isLoaded && hasUser">{{ settingsStore.settings.account?.slice(0, 2) }}</AvatarFallback>
- </Avatar>
- <span class="font-bold max-w-[140px] truncate" v-if="settingsStore.isLoaded && hasUser">@{{ settingsStore.settings.account }}</span>
- <ThemeSwitch class="ml-auto w-5 h-5 mr-1" />
- </div>
- <Button class="bg-background/40" variant="outline" @click="settingsStore.isLoaded && hasUser ? logout : walletStore.openWalletSelectModal()">
- <img v-if="hasUser" :src="getWalletIcon(settingsStore.settings.wallet!)" class="h-6 w-6" />
- <span class="font-bold">{{ settingsStore.isLoaded && hasUser ? 'Disconnect' : 'Connect' }}</span>
- </Button>
</SidebarHeader>
<SidebarContent>
<SidebarGroup class="pb-0" v-for="group in groups" :key="group.title">
@@ -110,4 +79,8 @@ const groups = [{
backdrop-filter: blur(20px);
background-color: hsla(var(--background) / 70%);
}
+[data-sidebar="sidebar"][data-mobile="true"] {
+ backdrop-filter: none;
+ background-color: hsl(var(--background));
+}
</style>
diff --git a/src/components/sidebar/ToggleSidebar.vue b/src/components/sidebar/ToggleSidebar.vue
index 43810742fe70a74a73d5e4a78554a7d9347a859a..149b573849d37ff3e514c953a59ff27d029d8daa 100644
--- a/src/components/sidebar/ToggleSidebar.vue
+++ b/src/components/sidebar/ToggleSidebar.vue
@@ -7,10 +7,10 @@ const { toggleSidebar, open, isMobile } = useSidebar();
</script>
<template>
- <Button v-if="isMobile" variant="ghost" size="xs" @click="toggleSidebar">
+ <Button v-if="isMobile" variant="ghost" size="xs" class="[&_svg]:size-6" @click="toggleSidebar">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path style="fill: hsl(var(--foreground))" :d="open && !isMobile ? mdiMenuOpen : mdiMenuClose"></path>
</svg>
- <span>{{ open && !isMobile ? 'Close sidebar' : 'Open sidebar' }}</span>
+ <span v-if="!isMobile">{{ open && !isMobile ? 'Close sidebar' : 'Open sidebar' }}</span>
</Button>
</template>
diff --git a/src/components/ui/sheet/SheetContent.vue b/src/components/ui/sheet/SheetContent.vue
index 3d85d2831819b7a3cb58f55f8d3a12b72e863add..69c3e89974ef51684162d6f46f2d3670527c6434 100644
--- a/src/components/ui/sheet/SheetContent.vue
+++ b/src/components/ui/sheet/SheetContent.vue
@@ -38,7 +38,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<template>
<DialogPortal>
<DialogOverlay
- class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+ class="fixed inset-0 z-40 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
/>
<DialogContent
:class="cn(sheetVariants({ side }), props.class)"
diff --git a/src/components/utilcards/AuthorityCard.vue b/src/components/utilcards/AuthorityCard.vue
index d387af110004fc971a9d66151fa45dc2dfaf5d64..857953eeb60fb66f8295cfdbed4ec847c8c73de3 100644
--- a/src/components/utilcards/AuthorityCard.vue
+++ b/src/components/utilcards/AuthorityCard.vue
@@ -41,7 +41,7 @@ onMounted(() => {
</script>
<template>
- <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
+ <Card class="w-full max-w-[600px] bg-accent/10 backdrop-blur-sm">
<CardHeader>
<CardTitle class="inline-flex items-center justify-between">
<span>Authority info</span>
diff --git a/src/pages/account/create.vue b/src/pages/account/create.vue
index df00753970632e3321611017c6e1ea4941378652..a9b1808040b1ad966104e833d0ef1e2b063c1ec1 100644
--- a/src/pages/account/create.vue
+++ b/src/pages/account/create.vue
@@ -3,7 +3,7 @@ import ConfirmCreateAccountCard from '@/components/utilcards/ConfirmCreateAccoun
</script>
<template>
- <div class="flex py-4 px-8">
+ <div class="flex p-8">
<ConfirmCreateAccountCard />
</div>
</template>
diff --git a/src/pages/account/update.vue b/src/pages/account/update.vue
index d59a7cf28adf2694fa370f71d54f9488acf99b01..463e3bb1d2666090a667e90d7c8f40ef1484b57f 100644
--- a/src/pages/account/update.vue
+++ b/src/pages/account/update.vue
@@ -3,7 +3,7 @@ import ConfirmAccountUpdateCard from '@/components/utilcards/ConfirmAccountUpdat
</script>
<template>
- <div class="flex py-4 px-8">
+ <div class="flex p-8">
<ConfirmAccountUpdateCard />
</div>
</template>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 9e58655da714164fbee7bdb22424f13951a93512..452df94e34125edbf45bdb41440ee6b506a42b38 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -3,7 +3,7 @@ import AuthorityCard from '@/components/utilcards/AuthorityCard.vue';
</script>
<template>
- <div class="flex py-4 px-8">
+ <div class="flex p-8">
<AuthorityCard />
</div>
</template>
diff --git a/src/pages/sign/message.vue b/src/pages/sign/message.vue
index f5c5e2c9b320df6b6fb6476f063352066497e773..21e699d7e4b51a46c0ed65f7febd85ee86bf06c0 100644
--- a/src/pages/sign/message.vue
+++ b/src/pages/sign/message.vue
@@ -3,7 +3,7 @@ import MemoEncryptCard from '@/components/utilcards/MemoEncryptCard.vue';
</script>
<template>
- <div class="flex py-4 px-8">
+ <div class="flex p-8">
<MemoEncryptCard />
</div>
</template>
diff --git a/src/pages/sign/transaction.vue b/src/pages/sign/transaction.vue
index d8dea384c349d664cb4d7dc6b3b1744f2686885b..75c6f642fcd0f052ee8a53804a0df0d6f66e5c79 100644
--- a/src/pages/sign/transaction.vue
+++ b/src/pages/sign/transaction.vue
@@ -3,7 +3,7 @@ import SignTransactionCard from '@/components/utilcards/SignTransactionCard.vue'
</script>
<template>
- <div class="flex py-4 px-8">
+ <div class="flex p-8">
<SignTransactionCard />
</div>
</template>