Изменила архитектуру проекта

src/App.vue

@@ -7,15 +7,15 @@
 </template>
 
 <script>
-  import TheHeader from "@/components/theComponents/TheHeader";
+  import TheHeader from "@/components/TheHeader";
-  import TheSidebar from "@/components/theComponents/TheSidebar";
+  import TheSidebar from "@/components/TheSidebar";
   export default {
     name: 'App',
     components: {TheHeader, TheSidebar}
   }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
 #app
   height: 100%
   width: 100%

src/components/TheButtonSidebar.vue

@@ -20,7 +20,7 @@
   }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
   .button-icon-item
     width: fit-content
     padding: 12px 16px 12px 12px

src/components/TheHeader.vue

@@ -31,7 +31,7 @@
   }
 </script>
 
-<style lang='sass'>
+<style lang='sass' scoped>
   input
     padding: 0
 
@@ -119,7 +119,7 @@
     -moz-appearance: none
     -ms-appearance: none
     appearance: none
-    background: url(../../assets/icons/down-arrow-1.svg) no-repeat right top 4px
+    background: url(@/assets/icons/down-arrow-1.svg) no-repeat right top 4px
     overflow: hidden
     margin-right: 16px
     padding: 2px 20px 2px 30px

src/components/TheSidebar.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-  import TheButtonSidebar from "@/components/theComponents/TheButtonSidebar";
+  import TheButtonSidebar from "@/components/TheButtonSidebar";
 
   export default {
     name: "SidebarComponent",
@@ -21,7 +21,7 @@
   }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
   #person
     font-style: normal
   .sidebar-container

src/components/base/buttons/AddEventButton.vue

@@ -8,7 +8,7 @@
   }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
   .add-button-event
     outline: none
     border: none

src/components/base/buttons/ButtonPlus.vue

@@ -8,7 +8,7 @@
   }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
   .button-plus
     outline: none
     border: none

src/pages/calendar/TheCalendar.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script>
-  import FormAddEvent from "@/components/pages/calendarPages/FormAddEvent";
+  import FormAddEvent from './components/FormAddEvent.vue';
   export default {
-    name: "CalendarPages",
+    name: "TheCalendar",
     components: {FormAddEvent}
   }
 </script>

src/pages/calendar/components/FormAddEvent.vue

@@ -54,8 +54,8 @@
 </template>
 
 <script>
-import AddEventButton from "@/components/baseComponents/buttons/AddEventButton";
+import AddEventButton from "@/components/base/buttons/AddEventButton";
-import ButtonPlus from "@/components/baseComponents/buttons/ButtonPlus";
+import ButtonPlus from "@/components/base/buttons/ButtonPlus";
 export default {
   name: "FormChangeEvent",
   components: {AddEventButton, ButtonPlus},
@@ -118,7 +118,7 @@ export default {
 }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
   .event-form-change
     position: relative
     display: flex

src/pages/home/TheHome.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
-  div HomePages
+  div HomePage
 </template>
 
 <script>
   export default {
-    name: "HomePages"
+    name: "TheHome"
   }
 </script>

src/pages/settings/TheSettings.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
-  div SettingsPages
+  div SettingsPage
 </template>
 
 <script>
   export default {
-    name: "SettingsPages"
+    name: "TheSettings"
   }
 </script>

src/pages/user/TheUser.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
-  div UserPages
+  div UserPage
 </template>
 
 <script>
   export default {
-    name: "UserPages"
+    name: "TheUser"
   }
 </script>

src/router.js

@@ -1,15 +1,15 @@
 import {createRouter, createWebHashHistory} from "vue-router";
-import HomePages from "./components/pages/homePages/HomePages.vue";
+import TheHome from "@/pages/home/TheHome.vue";
-import CalendarPages from "./components/pages/calendarPages/CalendarPages.vue";
+import TheCalendar from "@/pages/calendar/TheCalendar";
-import UserPages from "./components/pages/userPages/UserPages.vue";
+import TheUser from "@/pages/user/TheUser";
-import SettingsPages from "./components/pages/settingsPages/SettingsPages.vue";
+import TheSettings from "@/pages/settings/TheSettings";
 
 export default createRouter({
   history: createWebHashHistory(),
   routes: [
-    { path: "/", component: HomePages },
+    { path: "/", component: TheHome },
-    { path: "/calendar", component: CalendarPages },
+    { path: "/calendar", component: TheCalendar },
-    { path: "/user", component: UserPages },
+    { path: "/user", component: TheUser },
-    { path: "/settings", component: SettingsPages }
+    { path: "/settings", component: TheSettings }
   ]
 })