feat: Setup layout

packages/frontend-main/src/App.vue

@@ -1,40 +1,6 @@
 <script setup lang="ts">
-import ToggleThemeButton from './components/ui/ToggleThemeButton.vue';
-
-import WalletConnect from '@/components/popups/WalletConnect.vue';
-
 </script>
 
 <template>
-  <div class="flex flex-col w-screen h-screen overflow-x-hidden overflow-y-auto items-center">
-    <div class="flex flex-row w-full h-full justify-center max-w-[1280px]">
-      <!-- TODO: Make left menu -->
-      <!-- This should probably stick -->
-      <div class="flex flex-col p-6 h-full w-[380px] gap-6">
-        <div class="text-2xl">Dither</div>
-        <nav class="flex flex-col">
-          <RouterLink to="/" activeClass="font-bold">Home</RouterLink>
-          <RouterLink to="/notifications" activeClass="font-bold">Notifications</RouterLink>
-          <!-- TODO: Use current user address -->
-          <RouterLink to="/profile/:address" activeClass="font-bold">My Profile</RouterLink>
-          <!-- TODO: Remove this after testing -->
-          <RouterLink to="/post?hash=9c0f718289998024ce7c83b24f350e3fc4fa0c3d5c421c5042422c8721eec3e0" activeClass="font-bold">Post #1</RouterLink>
-        </nav>
-        <WalletConnect />
-      </div>
-
-      <div class="flex flex-col border-x border-neutral-200 h-full grow min-w-[600px]">
-        <main>
-          <RouterView />
-        </main>
-      </div>
-
-      <!-- TODO: Make right menu -->
-      <!-- This should probably stick -->
-      <div class="flex flex-col w-[380px] p-6 h-full">
-        <ToggleThemeButton/>
-        <input placeholder="search" class="bg-neutral-200 p-2 w-full" />
-      </div>
-    </div>
-  </div>
+  <RouterView />
 </template>

packages/frontend-main/src/components/popups/WalletConnect.vue

@@ -3,6 +3,7 @@ import type { Ref } from 'vue';
 
 import { computed, ref } from 'vue';
 import { bech32 } from 'bech32';
+import { Wallet } from 'lucide-vue-next';
 
 import { getWalletHelp, useWallet, Wallets } from '@/composables/useWallet';
 
@@ -134,9 +135,12 @@ const isValidAddress = computed(() => {
       <Dialog>
         <!-- Normal signed out button -->
         <DialogTrigger>
-          <ButtonCustom class="w-[207px]">
+          <ButtonCustom class="w-[207px] xl:inline hidden">
             {{ $t('components.WalletConnect.button') }}
           </ButtonCustom>
+          <div class="flex items-center justify-center flex-row xl:hidden h-[52px]">
+            <Wallet class="size-7"/>
+          </div>
         </DialogTrigger>
         <DialogContent>
           <template v-if="selectState">

packages/frontend-main/src/components/ui/Feed.vue

@@ -6,10 +6,10 @@ const { data } = useFeed();
 
 </script>
 
-<template>
-  <div class="flex flex-col gap-4">
+<template >
+  <div class="flex flex-col w-full gap-4 border-x border-x-neutral-200 ">
 
-    <div v-for="(post, index) in data" :key="index" class="flex flex-col border-b py-4">
+    <div v-for="(post, index) in data" :key="index" class="flex flex-col border-b py-4 px-4">
       <span>
         {{ post.message }}
       </span>

packages/frontend-main/src/components/ui/button/button-custom/index.ts

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 export { default as ButtonCustom } from './ButtonCustom.vue';
 
 export const buttonVariants = cva(
-    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xs text-base leading-[normal] font-semibold transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xs text-base font-semibold transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
     {
         variants: {
             variant: {

packages/frontend-main/src/layouts/MainLayout.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core';
+
+import LeftPanel from './panels/LeftPanel.vue';
+import RightPanel from './panels/RightPanel.vue';
+import MainLayoutMobile from './MainLayoutMobile.vue';
+
+import { breakpoints } from '@/lib/breakpoints';
+const isMobile = useMediaQuery(`(max-width: ${breakpoints.md - 1}px)`);
+
+</script>
+
+<template>
+  <MainLayoutMobile v-if="isMobile">
+    <slot />
+  </MainLayoutMobile>
+
+  <div v-else class="flex flex-row justify-between">
+    <div class="w-full h-[100vh] flex-1 xl:flex-auto overflow-y-auto sticky top-0">
+      <div class="w-full max-w-[280px] h-full py-6 pl-6 pr-4 ml-auto">
+        <LeftPanel />
+      </div>
+    </div>
+
+    <main class="flex flex-row min-w-[var(--main-min-width-desktop)]">
+      <slot />
+    </main>
+
+    <div class="w-full h-[100vh] flex-1 lg:flex-4 xl:flex-auto overflow-y-auto sticky top-0">
+      <div class="w-full max-w-[358px] h-full p-6 hidden lg:block">
+        <RightPanel  />
+      </div>
+    </div>
+
+  </div>
+</template>

packages/frontend-main/src/layouts/MainLayoutMobile.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import BottomPanel from './panels/BottomPanel.vue';
+import TopPanel from './panels/TopPanel.vue';
+
+</script>
+
+<template>
+  <!-- TODO: TOPPANEL -->
+  <TopPanel />
+
+  <main>
+    <slot />
+  </main>
+
+  <!-- TODO: BOTTOMPANEL -->
+  <BottomPanel />
+</template>

packages/frontend-main/src/layouts/panels/BottomPanel.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div/>
+</template>

packages/frontend-main/src/layouts/panels/LeftPanel.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+
+import { Bell, FlaskConical, House, User } from 'lucide-vue-next';
+
+import WalletConnect from '@/components/popups/WalletConnect.vue';
+
+</script>
+
+<template>
+  <!-- TODO: Adjust style, buttons, etc -->
+  <header class="flex flex-col justify-between h-full w-full">
+    <div class="flex flex-col justify-between gap-22 w-full xl:items-start items-end">
+      <nav class="flex flex-col gap-20">
+        <RouterLink to="/" class="h-[52px]">
+          <span class="hidden xl:inline  text-2xl font-semibold">Dither</span>
+        </RouterLink>
+
+        <div class="flex flex-col gap-3">
+          <RouterLink to="/" class="flex flex-row items-center gap-3">
+            <div class="flex items-center justify-center h-[52px]">
+              <House class="size-7" />
+            </div>
+            <span class="hidden xl:inline text-lg font-medium">Home</span>
+          </RouterLink>
+
+          <RouterLink to="/notifications" class="flex flex-row items-center gap-3">
+            <div class="flex items-center justify-center h-[52px]">
+              <Bell class="size-7" />
+            </div>
+            <span class="hidden xl:inline text-lg font-medium">Notifications</span>
+          </RouterLink>
+
+          <RouterLink to="/profile/:address" class="flex flex-row items-center gap-3">
+            <div class="flex items-center justify-center h-[52px]">
+              <User class="size-7" />
+            </div>
+            <span class="hidden xl:inline text-lg font-medium">My Profile</span>
+          </RouterLink>
+
+          <RouterLink to="/post?hash=9c0f718289998024ce7c83b24f350e3fc4fa0c3d5c421c5042422c8721eec3e0"
+                      class="flex flex-row items-center gap-3">
+            <div class="flex items-center justify-center h-[52px]">
+              <FlaskConical class="size-7" />
+            </div>
+            <span class="hidden xl:inline text-lg font-medium">Post #1</span>
+          </RouterLink>
+        </div>
+      </nav>
+
+      <WalletConnect />
+    </div>
+
+    <div>Stuff here?</div>
+  </header>
+</template>

packages/frontend-main/src/layouts/panels/RightPanel.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+import ToggleThemeButton from '@/components/ui/ToggleThemeButton.vue';
+
+</script>
+
+<template>
+  <!-- TODO -->
+  <aside
+    class="flex flex-col h-full w-full gap-4">
+    <ToggleThemeButton/>
+    <input placeholder="search" class="bg-neutral-200 p-2 h-[44px]" />
+  </aside>
+</template>

packages/frontend-main/src/layouts/panels/TopPanel.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div/>
+</template>

packages/frontend-main/src/lib/breakpoints.ts

@@ -0,0 +1,7 @@
+export const breakpoints = {
+    'sm': 640,
+    'md': 768,
+    'lg': 1024,
+    'xl': 1280,
+    '2xl': 1536,
+};

packages/frontend-main/src/style.css

@@ -41,12 +41,6 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-  --text-2xl: 2rem;
-  --text-xl: 1.6875rem;
-  --text-lg: 1.5rem;
-  --text-base: 1.0625rem;
-  --text-sm: 0.9375rem;
-  --text-xs: 0.8125rem;
 }
 
 :root {
@@ -83,6 +77,7 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  --main-min-width-desktop: 640px;
 }
 
 .dark {
@@ -124,9 +119,13 @@
   * {
     @apply border-border outline-ring/50;
   }
+  html {
+    overflow-y: scroll;
+  }
   body {
     @apply bg-background text-foreground;
     font-family: 'Inter', sans-serif;
+    line-height: normal;
   }
   button:not([disabled]),
   [role="button"]:not([disabled]) {

packages/frontend-main/src/views/HomeView.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import Feed from '@/components/ui/Feed.vue';
+import MainLayout from '@/layouts/MainLayout.vue';
 
 </script>
 
 <template>
-  <div class="sticky min-w-[600px] min-h-full top-0">
+  <MainLayout>
     <Feed />
-  </div>
+  </MainLayout>
 </template>

packages/frontend-main/src/views/NotificationsView.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
+import MainLayout from '@/layouts/MainLayout.vue';
+
 </script>
 
 <template>
-  <div>
+  <MainLayout>
+    <div>
     <!-- TODO -->
-  </div>
+    </div>
+  </MainLayout>
 </template>

packages/frontend-main/src/views/PostView.vue

@@ -4,6 +4,8 @@ import { useRoute } from 'vue-router';
 
 import { useFetchPost } from '@/composables/useFetchPost';
 
+import MainLayout from '@/layouts/MainLayout.vue';
+
 const route = useRoute();
 const loading = ref(false);
 
@@ -31,14 +33,17 @@ watch(
 </script>
 
 <template>
-  <div class="post">
-    <div v-if="loading" class="loading">Loading...</div>
+  <MainLayout>
+
+    <div class="post">
+      <div v-if="loading" class="loading">Loading...</div>
 
-    <div v-if="error" class="error">{{ error }}</div>
+      <div v-if="error" class="error">{{ error }}</div>
 
-    <div v-if="post" class="content">
-      <span>{{ post.message }}</span>
+      <div v-if="post" class="content">
+        <span>{{ post.message }}</span>
       <!-- <p>{{ post.body }}</p> -->
+      </div>
     </div>
-  </div>
+  </MainLayout>
 </template>

packages/frontend-main/src/views/ProfileView.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import MainLayout from '@/layouts/MainLayout.vue';
+
 </script>
 
 <template>
+  <MainLayout>
 
-  <div>
+    <div>
     <!-- TODO -->
-  </div>
-
+    </div>
+  </MainLayout>
 </template>

packages/frontend-main/tailwind.config.ts

@@ -0,0 +1,24 @@
+import type { Config } from 'tailwindcss';
+
+import { breakpoints } from './src/lib/breakpoints';
+
+export default {
+    darkMode: 'class',
+    content: [
+        './index.html',
+        './src/**/*.{vue,js,ts,jsx,tsx}',
+    ],
+    theme: {
+        extend: {
+            fontSize: {
+                'xs': '0.8125rem',
+                'sm': '0.9375rem',
+                'base': '1.0625rem',
+                'lg': '1.5rem',
+                'xl': '1.6875rem',
+                '2xl': '2rem',
+            },
+        },
+        screens: breakpoints,
+    },
+} satisfies Config;