diff --git a/src/App.vue b/src/App.vue
index 3845b36..960f099 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
+import { computed } from "vue";
 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";
+import { useUserStore } from "@/stores/userStore";
 
 const userStore = useUserStore();
+
+const sidebarSize = computed(() => {
+  return userStore.isAnonymous ? '0' : '90px';
+});
 </script>
 
 <template>
@@ -32,14 +37,14 @@ $sidebar-size: 90px !default;
 
 .act-layout {
   // To scroll only in the middle, see https://jsfiddle.net/VNVqs/
-  margin-bottom: $sidebar-size; // for scrolling
+  margin-bottom: v-bind(sidebarSize); // for scrolling
   margin-top: $header-height; // for scrolling
   .act-footer {
     display: none;
   }
   .act-sidebar {
     bottom: 0;
-    height: $sidebar-size;
+    height: v-bind(sidebarSize);
     left: 0;
     position: fixed;
     right: 0;
@@ -55,7 +60,7 @@ $sidebar-size: 90px !default;
   }
   @media (screen(sm)) {
     margin-bottom: 0;
-    margin-left: $sidebar-size;
+    margin-left: v-bind(sidebarSize);
     .act-footer {
       display: block
     }
@@ -63,10 +68,10 @@ $sidebar-size: 90px !default;
       left: 0;
       height: 100%;
       position: fixed;
-      width: $sidebar-size;
+      width: v-bind(sidebarSize);
     }
     .act-header {
-      left: $sidebar-size;
+      left: v-bind(sidebarSize);
     }
   }
 }