Toggle home page if user is not logged in to welcome page.

src/App.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import { useUserStore } from "@/stores/userStore";
+
 import Footer from "@/components/Footer.vue";
 import Sidebar from "@/components/Sidebar.vue";
 import TopBar from "@/components/TopBar.vue";
+
+const userStore = useUserStore();
 </script>
 
 <template>
   <div class="act-layout">
     <TopBar class="act-header"></TopBar>
-    <div class="act-sidebar">
+    <div class="act-sidebar" v-if="!userStore.isAnonymous">
       <Sidebar></Sidebar>
     </div>
     <div class="act-content">
@@ -24,19 +28,18 @@ import TopBar from "@/components/TopBar.vue";
 
 <style scoped lang="scss">
 $header-height: 60px !default;
-$footer-height: 90px !default;
-$footer-width: 100px !default;
+$sidebar-size: 90px !default;
 
 .act-layout {
   // To scroll only in the middle, see https://jsfiddle.net/VNVqs/
-  margin-bottom: $footer-height; // for scrolling
+  margin-bottom: $sidebar-size; // for scrolling
   margin-top: $header-height; // for scrolling
   .act-footer {
     display: none;
   }
   .act-sidebar {
     bottom: 0;
-    height: $footer-height;
+    height: $sidebar-size;
     left: 0;
     position: fixed;
     right: 0;
@@ -52,7 +55,7 @@ $footer-width: 100px !default;
   }
   @media (screen(sm)) {
     margin-bottom: 0;
-    margin-left: $footer-width;
+    margin-left: $sidebar-size;
     .act-footer {
       display: block
     }
@@ -60,10 +63,10 @@ $footer-width: 100px !default;
       left: 0;
       height: 100%;
       position: fixed;
-      width: $footer-width;
+      width: $sidebar-size;
     }
     .act-header {
-      left: $footer-width;
+      left: $sidebar-size;
     }
   }
 }

src/components/Navigation.vue

@@ -23,9 +23,9 @@
     </a>
     <RouterLink
       class="nav-item"
-      to="/about">
-      <i class="pi pi-info-circle nav-icon" />
-      <span>About</span>
+      to="/profile">
+      <i class="pi pi-user nav-icon" />
+      <span>Profile</span>
     </RouterLink>
   </nav>
 </template>

src/components/Sidebar.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import {ref} from "vue";
+import {useRouter} from "vue-router";
 
 import Avatar from 'primevue/avatar';
 import Menu from "primevue/menu";
@@ -10,15 +11,24 @@ import Navigation from "@/components/Navigation.vue";
 
 
 const userStore = useUserStore();
+const router = useRouter();
 
 const logout = () => {
   userStore.logout();
 };
+const profile = () => {
+  router.push({name: "profile"});
+};
 
 // Attach handlers.
 userActions.map((item) => {
-  if (item.cmd === 'logout') {
+  switch (item.cmd) {
+    case "logout":
       item.command = logout;
+      break;
+    case "profile":
+      item.command = profile;
+      break;
   }
 });
 const items = ref(userActions);

src/components/TopBar.vue

@@ -25,6 +25,9 @@ const toggle = (event) => {
 const logout = () => {
   userStore.logout();
 };
+const profile = () => {
+  router.push({name: "profile"});
+};
 
 
 const menu = ref();
@@ -40,8 +43,13 @@ const localActions = [{
 }];
 const allActions = [...userActions, ...localActions];
 allActions.map((item) => {
-  if (item.cmd === 'logout') {
+  switch (item.cmd) {
+    case "logout":
       item.command = logout;
+      break;
+    case "profile":
+      item.command = profile;
+      break;
   }
 });
 const items = ref(allActions);

src/router/index.ts

@@ -1,22 +1,18 @@
 import { createRouter, createWebHistory } from 'vue-router'
+
+import { useUserStore } from "@/stores/userStore";
 import AboutView from '../views/AboutView.vue'
 import HomeView from '../views/HomeView.vue'
 import LoginView from '../views/LoginView.vue'
 import ProfileView from '../views/ProfileView.vue'
 import StickerBuilderView from '../views/StickerBuilderView.vue'
 import StickerView from '../views/StickerView.vue'
+import WelcomeView from '../views/WelcomeView.vue'
+
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    {
-      component: ProfileView,
-      meta: {
-        title: '',
-      },
-      name: 'profile',
-      path: '/',
-    },
     {
       component: AboutView,
       meta: {
@@ -25,6 +21,22 @@ const router = createRouter({
       name: 'about',
       path: '/about',
     },
+    {
+      component: HomeView,
+      meta: {
+        title: 'Home',
+      },
+      name: 'home',
+      path: '/',
+    },
+    {
+      component: ProfileView,
+      meta: {
+        title: 'Profile',
+      },
+      name: 'profile',
+      path: '/profile',
+    },
     {
       component: StickerBuilderView,
       meta: {
@@ -49,7 +61,24 @@ const router = createRouter({
       name: 'login',
       path: '/login',
     },
+    {
+      component: WelcomeView,
+      meta: {
+        title: 'Welcome',
+      },
+      name: 'welcome',
+      path: '/welcome',
+    },
   ],
 })
 
+router.beforeEach((to, from) => {
+  const userStore= useUserStore();
+  if (userStore.isAnonymous && to.name == 'home') {
+    return {name: 'welcome'};
+  } else if (!userStore.isAnonymous && to.name == 'welcome') {
+    return {name: 'home'};
+  }
+});
+
 export default router

src/stores/userActionsStore.ts

@@ -1,6 +1,7 @@
 export const userActions = [{
-  icon: 'pi pi-inbox',
-  label: 'Inbox',
+  cmd: 'profile',
+  icon: 'pi pi-user',
+  label: 'Profile',
   needsAuth: true,
 }, {
   icon: 'pi pi-bell',

src/views/HomeView.vue

@@ -1,9 +1,26 @@
 <script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
+import Panel from 'primevue/panel';
 </script>
 
 <template>
-  <main>
-    <TheWelcome />
-  </main>
+  <h1>Activity</h1>
+  <Panel header="user1 contributed to project1">
+    item 1
+  </Panel>
+  <Panel header="user2 contributed to project2">
+    item 2
+  </Panel>
+  <Panel header="user3 contributed to project3">
+    item 3
+  </Panel>
+  <Panel header="user4 contributed to project4">
+    item 4
+  </Panel>
 </template>
+
+<style scoped>
+h1 {
+  font-size: 150%;
+  margin: 20px;
+}
+</style>

src/views/WelcomeView.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import TheWelcome from '../components/TheWelcome.vue'
+</script>
+
+<template>
+  <main>
+    <TheWelcome />
+  </main>
+</template>