Add menu

78a9fffa · Mateusz Tyszczak · 7ea48447 · 78a9fffa · 78a9fffa · 78a9fffa
Unverified Commit 78a9fffa authored 2 weeks ago by Mateusz Tyszczak
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hive Bridge</title>
  </head>
-  <body>
+  <body class="dark">
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>

--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,9 @@
 import { ref, onMounted, defineAsyncComponent } from 'vue';
 import { useSettingsStore, UsedWallet } from '@/stores/settings.store';
 import { useWalletStore } from '@/stores/wallet.store';
-import AppHeader from '@/components/AppHeader.vue';
+import AppSidebar from '@/components/sidebar';
+import { SidebarProvider } from '@/components/ui/sidebar';
+import ToggleSidebar from './components/sidebar/ToggleSidebar.vue';
 const WalletOnboarding = defineAsyncComponent(() => import('@/components/onboarding/index'));
@@ -27,15 +29,19 @@ const complete = (data: { account: string; wallet: UsedWallet }) => {
 </script>
 <template>
-  <div id="shadcn-root" class="dark">
+  <div id="shadcn-root">
    <div id="app-main">
-      <AppHeader/>
+      <SidebarProvider>
-      <main class="mt-[65px]">
+        <AppSidebar/>
-        <RouterView />
+        <!-- <AppHeader/> -->
-      </main>
+        <main class="w-full">
-      <aside v-if="settingsStore.isLoaded && !hasUser" class="fixed inset-0 flex items-center justify-center z-20">
+          <ToggleSidebar class="m-3" />
-        <WalletOnboarding @complete="complete" />
+          <RouterView />
-      </aside>
+        </main>
+        <aside v-if="settingsStore.isLoaded && !hasUser" class="fixed inset-0 flex items-center justify-center z-20">
+          <WalletOnboarding @complete="complete" />
+        </aside>
+      </SidebarProvider>
    </div>
  </div>
 </template>
@@ -43,8 +49,6 @@ const complete = (data: { account: string; wallet: UsedWallet }) => {
 <style scoped>
 #app-main {
  overflow-y: auto;
-  height: 100%;
-  width: 100%;
  background: url('/bg.svg') no-repeat center center fixed;
  background-size: cover;
 }
@@ -52,8 +56,6 @@ const complete = (data: { account: string; wallet: UsedWallet }) => {
 #shadcn-root {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
-  height: 100vh;
-  width: 100%;
  overflow: hidden;
  font-family: Verdana, sans-serif;
 }

--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -17,9 +17,6 @@ const logout = () => {
  <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">
-        <Button variant="outline" class="cursor-default" v-if="settingsStore.isLoaded && hasUser">
-          <span class="font-bold">@{{ settingsStore.settings.account }}</span>
-        </Button>
      </div>
      <div class="flex items-center space-x-4">
        <img src="/icon.svg" class="h-8 w-8" />

--- a/src/components/sidebar/AppSidebar.vue
+++ b/src/components/sidebar/AppSidebar.vue
+<script setup lang="ts">
+import { mdiHomeOutline, mdiMessageLockOutline, mdiFileSign, mdiAccountPlusOutline } 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';
+const settingsStore = useSettingsStore();
+const hasUser = computed(() => settingsStore.settings.account !== undefined);
+const logout = () => {
+  settingsStore.resetSettings();
+  window.location.reload();
+};
+const { toggleSidebar, isMobile } = useSidebar();
+const items = [
+  {
+    title: "Home",
+    url: "/",
+    icon: mdiHomeOutline,
+  },
+  {
+    title: "Memo encryption",
+    url: "/sign/message",
+    icon: mdiMessageLockOutline,
+  },
+  {
+    title: "Transaction signing",
+    url: "/sign/transaction",
+    icon: mdiFileSign,
+  },
+  {
+    title: "Process Account Creation",
+    url: "/account/create",
+    icon: mdiAccountPlusOutline,
+  }
+];
+</script>
+<template>
+  <Sidebar>
+    <SidebarHeader class="pb-0">
+      <div class="flex items-center rounded-lg p-2 mt-1 mx-1 bg-black/40 border" v-if="settingsStore.isLoaded && hasUser">
+        <Avatar class="w-8 h-8 mr-2">
+          <AvatarImage src="https://github.com/unovue.png" alt="@unovue" />
+          <AvatarFallback>{{ settingsStore.settings.account?.slice(0, 2) }}</AvatarFallback>
+        </Avatar>
+        <span class="font-bold">@{{ settingsStore.settings.account }}</span>
+      </div>
+    </SidebarHeader>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Hive Bridge</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="item in items" :key="item.title">
+              <SidebarMenuButton asChild>
+                <RouterLink @click="isMobile && toggleSidebar()" :to="item.url">
+                  <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill: hsl(var(--foreground))" :d="item.icon"/></svg>
+                  <span>{{item.title}}</span>
+                </RouterLink>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarFooter>
+      <Button class="bg-black/40" 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="font-bold">Disconnect</span>
+      </Button>
+    </SidebarFooter>
+  </Sidebar>
+</template>
+<style>
+[data-sidebar="sidebar"] {
+  backdrop-filter: blur(20px);
+  background-color: rgba(0, 0, 0, 0.4);
+}
+</style>
--- a/src/components/sidebar/ToggleSidebar.vue
+++ b/src/components/sidebar/ToggleSidebar.vue
+<script setup lang="ts">
+import { useSidebar } from "@/components/ui/sidebar";
+import { Button } from "@/components/ui/button";
+import { mdiMenuClose, mdiMenuOpen } from "@mdi/js";
+const { toggleSidebar, open, isMobile } = useSidebar();
+</script>
+<template>
+  <Button variant="ghost" size="xs" @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>
+  </Button>
+</template>
--- a/src/components/sidebar/index.ts
+++ b/src/components/sidebar/index.ts
+export { default } from './AppSidebar.vue';
--- a/src/components/ui/avatar/Avatar.vue
+++ b/src/components/ui/avatar/Avatar.vue
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { AvatarRoot } from 'reka-ui'
+import { avatarVariant, type AvatarVariants } from '.'
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+}>(), {
+  size: 'sm',
+  shape: 'circle',
+})
+</script>
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
+</template>
--- a/src/components/ui/avatar/AvatarFallback.vue
+++ b/src/components/ui/avatar/AvatarFallback.vue
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
+const props = defineProps<AvatarFallbackProps>()
+</script>
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>
--- a/src/components/ui/avatar/AvatarImage.vue
+++ b/src/components/ui/avatar/AvatarImage.vue
+<script setup lang="ts">
+import type { AvatarImageProps } from 'reka-ui'
+import { AvatarImage } from 'reka-ui'
+const props = defineProps<AvatarImageProps>()
+</script>
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full object-cover">
+    <slot />
+  </AvatarImage>
+</template>
--- a/src/components/ui/avatar/index.ts
+++ b/src/components/ui/avatar/index.ts
+import { cva, type VariantProps } from 'class-variance-authority'
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+export const avatarVariant = cva(
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  {
+    variants: {
+      size: {
+        sm: 'h-10 w-10 text-xs',
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+    },
+  },
+)
+export type AvatarVariants = VariantProps<typeof avatarVariant>
--- a/src/components/utilcards/AuthorityCard.vue
+++ b/src/components/utilcards/AuthorityCard.vue
@@ -40,13 +40,13 @@ onMounted(() => {
 </script>
 <template>
-  <Card class="bg-black/40 backdrop-blur-sm">
+  <Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm">
    <CardHeader>
      <CardTitle class="inline-flex items-center justify-between">
        <span>Authority info</span>
        <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill: hsla(var(--foreground) / 80%)" :d="mdiAccountKeyOutline"/></svg>
      </CardTitle>
-      <CardDescription class="mr-4">Use this module to gather information about your Hive on-chain authorities</CardDescription>
+      <CardDescription class="mr-8">Use this module to gather information about your Hive on-chain authorities</CardDescription>
    </CardHeader>
    <CardContent>
      <div class="space-y-4" v-if="hasUser">

--- a/src/components/utilcards/ConfirmCreateAccountCard.vue
+++ b/src/components/utilcards/ConfirmCreateAccountCard.vue
@@ -7,13 +7,13 @@ import { Input } from '@/components/ui/input';
 </script>
 <template>
-  <Card class="bg-black/40 backdrop-blur-sm">
+  <Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm">
    <CardHeader>
      <CardTitle class="inline-flex items-center justify-between">
        <span>Process Account Creation</span>
        <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill: hsla(var(--foreground) / 80%)" :d="mdiAccountPlusOutline"/></svg>
      </CardTitle>
-      <CardDescription class="mr-4">Use this module to process account creation request sent by other users</CardDescription>
+      <CardDescription class="mr-8">Use this module to process account creation request sent by other users</CardDescription>
    </CardHeader>
    <CardContent>
      <div class="my-4">

--- a/src/components/utilcards/MemoEncryptCard.vue
+++ b/src/components/utilcards/MemoEncryptCard.vue
@@ -51,13 +51,13 @@ const encryptOrDecrypt = async () => {
 </script>
 <template>
-  <Card class="bg-black/40 backdrop-blur-sm">
+  <Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm">
    <CardHeader>
      <CardTitle class="inline-flex items-center justify-between">
        <span>Memo encryption</span>
        <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill: hsla(var(--foreground) / 80%)" :d="mdiMessageLockOutline"/></svg>
      </CardTitle>
-      <CardDescription class="mr-4">Use this module to encrypt / decrypt given message using your memo key for any purpose</CardDescription>
+      <CardDescription class="mr-8">Use this module to encrypt / decrypt given message using your memo key for any purpose</CardDescription>
    </CardHeader>
    <CardContent>
      <div class="my-4 space-x-4 flex">

--- a/src/components/utilcards/SignTransactionCard.vue
+++ b/src/components/utilcards/SignTransactionCard.vue
@@ -35,13 +35,13 @@ const sign = async () => {
 </script>
 <template>
-  <Card class="bg-black/40 backdrop-blur-sm">
+  <Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm">
    <CardHeader>
      <CardTitle class="inline-flex items-center justify-between">
        <span>Transaction signing</span>
        <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill: hsla(var(--foreground) / 80%)" :d="mdiFileSign"/></svg>
      </CardTitle>
-      <CardDescription class="mr-4">Use this module to sign the provided transaction</CardDescription>
+      <CardDescription class="mr-8">Use this module to sign the provided transaction</CardDescription>
    </CardHeader>
    <CardContent>
      <Textarea v-model="inputData" placeholder="Transaction in API JSON form" class="my-4"/>

--- a/src/main.ts
+++ b/src/main.ts
 import { createApp } from 'vue'
 import './style.css'
 import { createPinia } from 'pinia'
-import { createMemoryHistory, createRouter } from 'vue-router'
+import { createWebHistory, createRouter } from 'vue-router'
 import App from './App.vue'
 import { routes } from './utils/router'
 const pinia = createPinia()
 const router = createRouter({
  routes: routes,
-  history: createMemoryHistory(),
+  history: createWebHistory(),
 })
 createApp(App).use(pinia).use(router).mount('#app')
--- a/src/pages/account/create.vue
+++ b/src/pages/account/create.vue
+<script setup lang="ts">
+import ConfirmCreateAccountCard from '@/components/utilcards/ConfirmCreateAccountCard.vue';
+</script>
+<template>
+  <div class="flex py-4 px-8">
+    <ConfirmCreateAccountCard />
+  </div>
+</template>
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
 <script setup lang="ts">
 import AuthorityCard from '@/components/utilcards/AuthorityCard.vue';
-import ConfirmCreateAccountCard from '@/components/utilcards/ConfirmCreateAccountCard.vue';
-import MemoEncryptCard from '@/components/utilcards/MemoEncryptCard.vue';
-import SignTransactionCard from '@/components/utilcards/SignTransactionCard.vue';
 </script>
 <template>
-  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-8">
+  <div class="flex py-4 px-8">
    <AuthorityCard />
-    <MemoEncryptCard />
-    <SignTransactionCard />
-    <ConfirmCreateAccountCard />
  </div>
 </template>
--- a/src/pages/sign/message.vue
+++ b/src/pages/sign/message.vue
+<script setup lang="ts">
+import MemoEncryptCard from '@/components/utilcards/MemoEncryptCard.vue';
+</script>
+<template>
+  <div class="flex py-4 px-8">
+    <MemoEncryptCard />
+  </div>
+</template>
--- a/src/pages/sign/transaction.vue
+++ b/src/pages/sign/transaction.vue
+<script setup lang="ts">
+import SignTransactionCard from '@/components/utilcards/SignTransactionCard.vue';
+</script>
+<template>
+  <div class="flex py-4 px-8">
+    <SignTransactionCard />
+  </div>
+</template>
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
 import Index from "@/pages/index.vue";
+import SignTransaction from "@/pages/sign/transaction.vue";
+import SignMessage from "@/pages/sign/message.vue";
+import AccountCreate from "@/pages/account/create.vue";
 export const routes = [
-  { path: '/', component: Index }
+  { path: '/', component: Index },
+  { path: '/sign/transaction', component: SignTransaction },
+  { path: '/sign/message', component: SignMessage },
+  { path: '/account/create', component: AccountCreate }
 ];