diff --git a/public/index.html b/public/index.html
index 3e5a139..ec81306 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
<%= htmlWebpackPlugin.options.title %>
-
+
diff --git a/src/App.vue b/src/App.vue
index 75e1f82..db54902 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,30 @@
- div(class='text') HelloWorld
+ div(class="pages-container")
+ sidebar-component
+ router-view
diff --git a/src/components/ButtonSidebarComponent.vue b/src/components/ButtonSidebarComponent.vue
new file mode 100644
index 0000000..71aadd2
--- /dev/null
+++ b/src/components/ButtonSidebarComponent.vue
@@ -0,0 +1,31 @@
+
+ a(:href="path")
+ div(class='button-icon-item')
+ basic-icon(icon-color="#252850" width="40" height="40" )
+ slot
+
+
+
+
+
diff --git a/src/components/homePageComponents/SidebarComponent.vue b/src/components/homePageComponents/SidebarComponent.vue
index e69de29..8134732 100644
--- a/src/components/homePageComponents/SidebarComponent.vue
+++ b/src/components/homePageComponents/SidebarComponent.vue
@@ -0,0 +1,48 @@
+
+ div(class='sidebar-container')
+ div(class='top-button-container')
+ button-sidebar-component(path="#/")
+ home-icon
+ button-sidebar-component(path="#/calendar")
+ calendar-icon
+ button-sidebar-component(path="#/user")
+ user-icon
+ div(class="bottom-button-container")
+ button-sidebar-component(path="#/settings")
+ settings-icon
+
+
+
+
+
diff --git a/src/components/iconsComponents/CalendarIcon.vue b/src/components/iconsComponents/CalendarIcon.vue
new file mode 100644
index 0000000..204604a
--- /dev/null
+++ b/src/components/iconsComponents/CalendarIcon.vue
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/src/components/iconsComponents/HomeIcon.vue b/src/components/iconsComponents/HomeIcon.vue
new file mode 100644
index 0000000..ceef05e
--- /dev/null
+++ b/src/components/iconsComponents/HomeIcon.vue
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/src/components/iconsComponents/SettingsIcon.vue b/src/components/iconsComponents/SettingsIcon.vue
new file mode 100644
index 0000000..87cdb1d
--- /dev/null
+++ b/src/components/iconsComponents/SettingsIcon.vue
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/src/components/iconsComponents/UserIcon.vue b/src/components/iconsComponents/UserIcon.vue
new file mode 100644
index 0000000..ef86b7f
--- /dev/null
+++ b/src/components/iconsComponents/UserIcon.vue
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/src/components/iconsComponents/basicIcon/BasicIcon.vue b/src/components/iconsComponents/basicIcon/BasicIcon.vue
new file mode 100644
index 0000000..450f97c
--- /dev/null
+++ b/src/components/iconsComponents/basicIcon/BasicIcon.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
diff --git a/src/components/pages/calendarPages/CalendarPages.vue b/src/components/pages/calendarPages/CalendarPages.vue
new file mode 100644
index 0000000..2cf614d
--- /dev/null
+++ b/src/components/pages/calendarPages/CalendarPages.vue
@@ -0,0 +1,9 @@
+
+ div CalendarPages
+
+
+
diff --git a/src/components/pages/homePages/HomePages.vue b/src/components/pages/homePages/HomePages.vue
new file mode 100644
index 0000000..03a79c6
--- /dev/null
+++ b/src/components/pages/homePages/HomePages.vue
@@ -0,0 +1,9 @@
+
+ div HomePages
+
+
+
diff --git a/src/components/pages/settingsPages/SettingsPages.vue b/src/components/pages/settingsPages/SettingsPages.vue
new file mode 100644
index 0000000..4b9ec0d
--- /dev/null
+++ b/src/components/pages/settingsPages/SettingsPages.vue
@@ -0,0 +1,9 @@
+
+ div SettingsPages
+
+
+
diff --git a/src/components/pages/userPages/UserPages.vue b/src/components/pages/userPages/UserPages.vue
new file mode 100644
index 0000000..2f70aa7
--- /dev/null
+++ b/src/components/pages/userPages/UserPages.vue
@@ -0,0 +1,9 @@
+
+ div UserPages
+
+
+
diff --git a/src/main.js b/src/main.js
index 2594705..9faa34f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
import { createApp } from 'vue'
import App from './App.vue'
+import router from "./router";
import './assets/sass/styles.sass'
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..aadc027
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,15 @@
+import {createRouter, createWebHashHistory} from "vue-router";
+import HomePages from "./components/pages/homePages/HomePages.vue";
+import CalendarPages from "./components/pages/calendarPages/CalendarPages.vue";
+import UserPages from "./components/pages/userPages/UserPages.vue";
+import SettingsPages from "./components/pages/settingsPages/SettingsPages.vue";
+
+export default createRouter({
+ history: createWebHashHistory(),
+ routes: [
+ { path: "/", component: HomePages },
+ { path: "/calendar", component: CalendarPages },
+ { path: "/user", component: UserPages },
+ { path: "/settings", component: SettingsPages }
+ ]
+})