Create Neat layout and Print view.

src/App.vue

@@ -1,78 +1,20 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue'
-import { RouterView } from 'vue-router'
+import { RouterView, useRoute } from 'vue-router'
 
-import Footer from "@/components/Footer.vue";
+import Default from '@/layouts/Default.vue'
-import Sidebar from "@/components/Sidebar.vue";
-import TopBar from "@/components/TopBar.vue";
-import { useSessionStore } from "@/stores/sessionStore";
 
-const sessionStore = useSessionStore();
+const route = useRoute();
 
-const sidebarSize = computed(() => {
+const layout = computed(() => {
-  return sessionStore.isAnonymous ? '0' : '90px';
+  const layoutComponent = route.meta.layout || Default;
+  return layoutComponent;
 });
+
 </script>
 
 <template>
-  <div class="act-layout">
+  <component :is="layout">
-    <TopBar class="act-header"></TopBar>
+    <router-view name="layout" />
-    <div class="act-sidebar" v-if="!sessionStore.isAnonymous">
+  </component>
-      <Sidebar></Sidebar>
-    </div>
-    <div class="act-content">
-      <main class="">
-        <RouterView />
-      </main>
-      <div class="act-footer">
-        <Footer></Footer>
-      </div>
-    </div>
-  </div>
 </template>
-
-<style scoped lang="scss">
-$header-height: 60px !default;
-$sidebar-size: 90px !default;
-
-.act-layout {
-  // To scroll only in the middle, see https://jsfiddle.net/VNVqs/
-  margin-bottom: v-bind(sidebarSize); // for scrolling
-  margin-top: $header-height; // for scrolling
-  .act-footer {
-    display: none;
-  }
-  .act-sidebar {
-    bottom: 0;
-    height: v-bind(sidebarSize);
-    left: 0;
-    position: fixed;
-    right: 0;
-    z-index: 20;
-  }
-  .act-header {
-    height: $header-height;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 20;
-  }
-  @media (screen(sm)) {
-    margin-bottom: 0;
-    margin-left: v-bind(sidebarSize);
-    .act-footer {
-      display: block
-    }
-    .act-sidebar {
-      left: 0;
-      height: 100%;
-      position: fixed;
-      width: v-bind(sidebarSize);
-    }
-    .act-header {
-      left: v-bind(sidebarSize);
-    }
-  }
-}
-</style>

src/layouts/Default.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { RouterView } from 'vue-router';
+
+import Footer from "@/components/Footer.vue";
+import Sidebar from "@/components/Sidebar.vue";
+import TopBar from "@/components/TopBar.vue";
+
+import { useSessionStore } from "@/stores/sessionStore";
+
+const sessionStore = useSessionStore();
+
+const sidebarSize = computed(() => {
+  return sessionStore.isAnonymous ? '0' : '90px';
+});
+</script>
+<template>
+  <div class="act-layout">
+    <TopBar class="act-header"></TopBar>
+    <div class="act-sidebar" v-if="!sessionStore.isAnonymous">
+      <Sidebar></Sidebar>
+    </div>
+    <div class="act-content">
+      <main class="">
+        <router-view />
+      </main>
+      <div class="act-footer">
+        <Footer></Footer>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+$header-height: 60px !default;
+$sidebar-size: 90px !default;
+
+.act-layout {
+  // To scroll only in the middle, see https://jsfiddle.net/VNVqs/
+  margin-bottom: v-bind(sidebarSize); // for scrolling
+  margin-top: $header-height; // for scrolling
+  .act-footer {
+    display: none;
+  }
+  .act-sidebar {
+    bottom: 0;
+    height: v-bind(sidebarSize);
+    left: 0;
+    position: fixed;
+    right: 0;
+    z-index: 20;
+  }
+  .act-header {
+    height: $header-height;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 20;
+  }
+  @media (screen(sm)) {
+    margin-bottom: 0;
+    margin-left: v-bind(sidebarSize);
+    .act-footer {
+      display: block
+    }
+    .act-sidebar {
+      left: 0;
+      height: 100%;
+      position: fixed;
+      width: v-bind(sidebarSize);
+    }
+    .act-header {
+      left: v-bind(sidebarSize);
+    }
+  }
+}
+</style>

src/layouts/Neat.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <main class="">
+    <router-view />
+  </main>
+</template>

src/router/index.ts

@@ -1,9 +1,12 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
 import { useSessionStore } from "@/stores/sessionStore";
+import Neat from '../layouts/Neat.vue'
+
 import AboutView from '../views/AboutView.vue'
 import HomeView from '../views/HomeView.vue'
 import LoginView from '../views/LoginView.vue'
+import PrintView from '../views/PrintView.vue'
 import ProfileView from '../views/ProfileView.vue'
 import StickerBuilderView from '../views/StickerBuilderView.vue'
 import StickerView from '../views/StickerView.vue'
@@ -31,6 +34,15 @@ const router = createRouter({
       name: 'home',
       path: '/',
     },
+    {
+      component: PrintView,
+      meta: {
+        layout: Neat,
+        title: 'Print',
+      },
+      name: 'print',
+      path: '/print/:username',
+    },
     {
       component: ProfileView,
       meta: {

src/views/ProfileView.vue

@@ -88,6 +88,11 @@ const events = [{
         v-if="myPage">
         New sticker
       </Button>
+      <Button
+          as="router-link"
+          :to="{ name: 'print', params: { username: user?.username }}">
+        Print
+      </Button>
       <div class="stickers">
         <div v-for="sticker in stickersStore.getStickersCreatedBy(user?.username)">
           <div class="stickerWrapper">