Add header

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));

src/components/AppHeader.vue

-<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

src/components/sidebar/AppHeader.vue

+<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

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>

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>

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)"

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>

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>

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>

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>

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>

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>