Widgets work

frontend/app/components/viewer/TopBar.vue

@@ -2,8 +2,9 @@
 import TopSearchBar from './topbar/TopSearchBar.vue';
 import { useCampaignService } from '~/services/Campaign';
 import { CreateWindow } from '~/services/Windows';
+import { SetShowContent } from '~/services/Content';
 
-const { Campaign } = useCampaignService();
+const { Campaign, SetCampaign } = useCampaignService();
 
 const campaignName = computed(() => {
     return Campaign.value?.name ?? 'Campaign';
@@ -17,6 +18,12 @@ function openCreateNoteWindow() {
     CreateWindow('create_note');
 }
 
+function exitToMainMenu() {
+    SetCampaign(null);
+    SetShowContent(false);
+    CreateWindow('main_menu');
+}
+
 </script>
 
 <template>
@@ -31,6 +38,10 @@ function openCreateNoteWindow() {
             <TopSearchBar></TopSearchBar>
         </div>
         <div class="right">
+            <button class="top-bar-button sound-click" type="button" @click="exitToMainMenu">
+                <img class="top-bar-button-icon" src="/icons/iconoir/regular/nav-arrow-left.svg" alt="" aria-hidden="true">
+                <span>Main Menu</span>
+            </button>
             <button class="note-button sound-click" type="button" @click="openCreateNoteWindow" :disabled="!Campaign">
                 <img class="note-button-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
                 <span>New Note</span>
@@ -50,11 +61,11 @@ function openCreateNoteWindow() {
 }
 
 .logo {
-    height: 36px;
-    width: 36px;
+    height: 32px;
+    width: 32px;
     position: absolute;
     top: 0px;
-    left: 8px;
+    left: 6px;
 }
 
 .left, .right {
@@ -65,6 +76,7 @@ function openCreateNoteWindow() {
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    gap: 8px;
     padding-right: 10px;
 }
 
@@ -75,6 +87,7 @@ function openCreateNoteWindow() {
     font-weight: bold;
 }
 
+.top-bar-button,
 .note-button {
     height: 30px;
     padding: 0 12px;
@@ -92,6 +105,7 @@ function openCreateNoteWindow() {
     cursor: not-allowed;
 }
 
+.top-bar-button-icon,
 .note-button-icon {
     width: 16px;
     height: 16px;