From a07591e698a49db7a3d9e3e98e59b1353f18f6b9 Mon Sep 17 00:00:00 2001 From: DwCay Date: Tue, 4 Oct 2022 11:13:33 +0300 Subject: [PATCH 1/2] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=BD=D0=B0=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D1=8C=20sid?= =?UTF-8?q?ebar=20=D0=B8=20=20=D0=BC=D0=B0=D1=80=D1=88=D1=80=D1=83=D1=82?= =?UTF-8?q?=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BF=D0=BE=20=D1=81?= =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B0=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 2 +- src/App.vue | 30 +++++++----- src/components/ButtonSidebarComponent.vue | 31 ++++++++++++ .../homePageComponents/SidebarComponent.vue | 48 +++++++++++++++++++ .../iconsComponents/CalendarIcon.vue | 5 ++ src/components/iconsComponents/HomeIcon.vue | 5 ++ .../iconsComponents/SettingsIcon.vue | 5 ++ src/components/iconsComponents/UserIcon.vue | 5 ++ .../iconsComponents/basicIcon/BasicIcon.vue | 47 ++++++++++++++++++ .../pages/calendarPages/CalendarPages.vue | 9 ++++ src/components/pages/homePages/HomePages.vue | 9 ++++ .../pages/settingsPages/SettingsPages.vue | 9 ++++ src/components/pages/userPages/UserPages.vue | 9 ++++ src/main.js | 3 +- src/router.js | 15 ++++++ 15 files changed, 219 insertions(+), 13 deletions(-) create mode 100644 src/components/ButtonSidebarComponent.vue create mode 100644 src/components/iconsComponents/CalendarIcon.vue create mode 100644 src/components/iconsComponents/HomeIcon.vue create mode 100644 src/components/iconsComponents/SettingsIcon.vue create mode 100644 src/components/iconsComponents/UserIcon.vue create mode 100644 src/components/iconsComponents/basicIcon/BasicIcon.vue create mode 100644 src/components/pages/calendarPages/CalendarPages.vue create mode 100644 src/components/pages/homePages/HomePages.vue create mode 100644 src/components/pages/settingsPages/SettingsPages.vue create mode 100644 src/components/pages/userPages/UserPages.vue create mode 100644 src/router.js 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 @@ 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 @@ + + + + + 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 @@ + + + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 } + ] +}) From 7a70f393ecf45448ff3d5df75ee58fb8a1fc5dd8 Mon Sep 17 00:00:00 2001 From: DwCay Date: Tue, 4 Oct 2022 12:18:43 +0300 Subject: [PATCH 2/2] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=20=D1=84=D0=BE=D0=BA=D1=83=D1=81=20=D0=BD=D0=B0=20=D0=B2?= =?UTF-8?q?=D1=8B=D0=B1=D1=80=D0=B0=D0=BD=D0=BD=D0=BE=D0=B9=20=D1=81=D1=82?= =?UTF-8?q?=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5=D0=B5=20=D0=B2=20sidebar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ButtonSidebarComponent.vue | 22 +++++++++++++++++-- .../homePageComponents/SidebarComponent.vue | 15 +++++-------- 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/src/components/ButtonSidebarComponent.vue b/src/components/ButtonSidebarComponent.vue index 71aadd2..c34c324 100644 --- a/src/components/ButtonSidebarComponent.vue +++ b/src/components/ButtonSidebarComponent.vue @@ -1,6 +1,6 @@ @@ -10,7 +10,16 @@ export default { name: "ButtonSidebar", components: {BasicIcon}, - props: ['path'] + props: { + path: String, + id: String, + changeStyle: Function + }, + data(){ + return { + selectedStyle: false + } + } } @@ -19,10 +28,19 @@ width: fit-content padding: 12px 16px 12px 12px cursor: pointer + background-color: rgb(65, 105, 225, 0) border-radius: 0 4px 4px 0 border-left-color: rgb(65, 105, 225, 0) border-left-width: 4px + border-right: none + border-top: none + border-bottom: none border-left-style: solid + .button-icon-item:focus + background-color: rgb(65, 105, 225, 0.3) + border-left-color: rgb(65, 105, 225, 1) + path + fill: #4169E1 .button-icon-item:hover background-color: rgb(65, 105, 225, 0.3) border-left-color: rgb(65, 105, 225, 1) diff --git a/src/components/homePageComponents/SidebarComponent.vue b/src/components/homePageComponents/SidebarComponent.vue index 8134732..e7ca147 100644 --- a/src/components/homePageComponents/SidebarComponent.vue +++ b/src/components/homePageComponents/SidebarComponent.vue @@ -1,14 +1,14 @@ @@ -22,11 +22,6 @@ export default { name: "SidebarComponent", components: {ButtonSidebarComponent, HomeIcon, CalendarIcon, UserIcon, SettingsIcon}, - data() { - return { - selectedPages: '', - } - } } @@ -36,7 +31,7 @@ flex-direction: column justify-content: space-between flex: auto - padding: 24px 0px 24px 0px + padding: 24px 0 24px 0 box-sizing: border-box max-width: 80px background-color: #F8F8FF