style: correct few code styles

src/client/theme-default/Layout.vue

@@ -7,7 +7,11 @@
     <aside :class="{ open }">
       <SideBar/>
     </aside>
-    <div class="sidebar-mask" :class="{ 'sidebar-open': open }" @click="toggleSidebar(false)" />
+    <div
+      class="sidebar-mask"
+      :class="{ 'sidebar-open': open }"
+      @click="toggleSidebar(false)"
+    />
     <main>
       <Page />
     </main>
@@ -17,7 +21,6 @@
 
 <script>
 import { ref } from 'vue'
-
 import NavBar from './components/NavBar.vue'
 import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
 import SideBar from './components/SideBar.vue'
@@ -30,15 +33,15 @@ export default {
     SideBar,
     Page
   },
+
   setup() {
-    let open = ref(false)
+    const open = ref(false)
+
     const toggleSidebar = (to) => {
       open.value = typeof to === 'boolean' ? to : !open.value
     }
-    return {
+
-      open,
+    return { open, toggleSidebar }
-      toggleSidebar,
-    }
   }
 }
 </script>

src/client/theme-default/components/ToggleSideBarButton.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script>
-
 export default {
   emits: ['toggle']
 }

src/client/theme-default/styles/layout.css

@@ -49,11 +49,13 @@ aside {
   z-index: 3;
   overflow-y: auto;
 }
+
 @media screen and (max-width: 719px) {
   aside {
     transition: transform .2s ease;
     transform: translateX(-100%);
   }
+
   aside.open {
     transform: translateX(0);
   }
@@ -66,6 +68,7 @@ aside {
   height: 100vh;
   display: none;
 }
+
 .sidebar-mask.sidebar-open{
   display: block;
 }
@@ -74,6 +77,7 @@ main {
   margin-top: var(--header-height);
   margin-left: var(--sidebar-width);
 }
+
 @media screen and (max-width: 719px) {
   main {
     margin-left: 0;