Добавленна панель sidebar и маршрутизация по страницам

2022-10-04 11:13:33 +03:00
parent 099227fb59
commit a07591e698
15 changed files with 219 additions and 13 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
-  <body>
+  <body style="margin: 0; height: 100vh;">
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,30 @@
 <template lang="pug">
-  div(class='text') HelloWorld
+  div(class="pages-container")
+    sidebar-component
+    router-view
 </template>

 <script>
-
+  import SidebarComponent from "./components/homePageComponents/SidebarComponent";
  export default {
    name: 'App',
+    components: {SidebarComponent}
  }
 </script>

 <style lang="sass">
-.text
-  color: #42b983
 #app
-  font-family: Avenir, Helvetica, Arial, sans-serif
+  display: flex
+  flex-direction: column
+  row-gap: 8px
+  height: 100%
+  font-family: Raleway, sans-serif
+  font-style: normal
+  font-feature-settings: 'pnum' on, 'lnum' on
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
-  text-align: center
-  color: #2c3e50
-  margin-top: 60px
+  background-color: #E9E9F6
+.pages-container
+  display: flex
+  flex: auto
 </style>
--- a/src/components/ButtonSidebarComponent.vue
+++ b/src/components/ButtonSidebarComponent.vue
@@ -0,0 +1,31 @@
+<template lang="pug">
+  a(:href="path")
+    div(class='button-icon-item')
+      basic-icon(icon-color="#252850" width="40" height="40" )
+        slot
+</template>
+
+<script>
+  import BasicIcon from "@/components/iconsComponents/basicIcon/BasicIcon";
+  export default {
+    name: "ButtonSidebar",
+    components: {BasicIcon},
+    props: ['path']
+  }
+</script>
+
+<style lang="sass">
+  .button-icon-item
+    width: fit-content
+    padding: 12px 16px 12px 12px
+    cursor: pointer
+    border-radius: 0 4px 4px 0
+    border-left-color: rgb(65, 105, 225, 0)
+    border-left-width: 4px
+    border-left-style: solid
+  .button-icon-item:hover
+    background-color: rgb(65, 105, 225, 0.3)
+    border-left-color: rgb(65, 105, 225, 1)
+    path
+      fill: #4169E1
+</style>
--- a/src/components/homePageComponents/SidebarComponent.vue
+++ b/src/components/homePageComponents/SidebarComponent.vue
@@ -0,0 +1,48 @@
+<template lang="pug">
+  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
+</template>
+
+<script>
+  import HomeIcon from '../iconsComponents/HomeIcon';
+  import CalendarIcon from '../iconsComponents/CalendarIcon';
+  import UserIcon from '../iconsComponents/UserIcon';
+  import SettingsIcon from '../iconsComponents/SettingsIcon';
+  import ButtonSidebarComponent from "../ButtonSidebarComponent";
+
+  export default {
+    name: "SidebarComponent",
+    components: {ButtonSidebarComponent, HomeIcon, CalendarIcon, UserIcon, SettingsIcon},
+    data() {
+      return {
+        selectedPages: '',
+      }
+    }
+  }
+</script>
+
+<style lang="sass">
+  .sidebar-container
+    display: flex
+    flex-direction: column
+    justify-content: space-between
+    flex: auto
+    padding: 24px 0px 24px 0px
+    box-sizing: border-box
+    max-width: 80px
+    background-color: #F8F8FF
+
+  .top-button-container
+    display: flex
+    flex-direction: column
+    row-gap: 24px
+</style>
--- a/src/components/iconsComponents/CalendarIcon.vue
+++ b/src/components/iconsComponents/CalendarIcon.vue
@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M6.66675 17.5833C6.25253 17.5833 5.91675 17.9191 5.91675 18.3333C5.91675 18.7475 6.25253 19.0833 6.66675 19.0833V17.5833ZM25.7501 5C25.7501 4.58579 25.4143 4.25 25.0001 4.25C24.5859 4.25 24.2501 4.58579 24.2501 5H25.7501ZM24.2501 11.6667C24.2501 12.0809 24.5859 12.4167 25.0001 12.4167C25.4143 12.4167 25.7501 12.0809 25.7501 11.6667H24.2501ZM15.7501 5C15.7501 4.58579 15.4143 4.25 15.0001 4.25C14.5859 4.25 14.2501 4.58579 14.2501 5H15.7501ZM14.2501 11.6667C14.2501 12.0809 14.5859 12.4167 15.0001 12.4167C15.4143 12.4167 15.7501 12.0809 15.7501 11.6667H14.2501ZM33.3334 17.5833H6.66675V19.0833H33.3334V17.5833ZM7.41675 31.6667V11.6667H5.91675V31.6667H7.41675ZM10.0001 34.25C8.57335 34.25 7.41675 33.0934 7.41675 31.6667H5.91675C5.91675 33.9218 7.74492 35.75 10.0001 35.75V34.25ZM10.0001 7.58333C7.74492 7.58333 5.91675 9.4115 5.91675 11.6667H7.41675C7.41675 10.2399 8.57335 9.08333 10.0001 9.08333V7.58333ZM34.0834 31.6667V18.3333H32.5834V31.6667H34.0834ZM34.0834 18.3333V11.6667H32.5834V18.3333H34.0834ZM30.0001 35.75C32.2552 35.75 34.0834 33.9218 34.0834 31.6667H32.5834C32.5834 33.0934 31.4268 34.25 30.0001 34.25V35.75ZM30.0001 9.08333C31.4268 9.08333 32.5834 10.2399 32.5834 11.6667H34.0834C34.0834 9.4115 32.2552 7.58333 30.0001 7.58333V9.08333ZM30.0001 7.58333H10.0001V9.08333H30.0001V7.58333ZM30.0001 34.25H10.0001V35.75H30.0001V34.25ZM24.2501 5V11.6667H25.7501V5H24.2501ZM14.2501 5V11.6667H15.7501V5H14.2501Z"/>
+  </g>
+</template>
--- a/src/components/iconsComponents/HomeIcon.vue
+++ b/src/components/iconsComponents/HomeIcon.vue
@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M20 5L20.5303 4.46967C20.3897 4.32902 20.1989 4.25 20 4.25C19.8011 4.25 19.6103 4.32902 19.4697 4.46967L20 5ZM8.33331 16.6667L7.80298 16.1363C7.66233 16.277 7.58331 16.4678 7.58331 16.6667L8.33331 16.6667ZM31.6666 16.6667H32.4166C32.4166 16.4678 32.3376 16.277 32.197 16.1363L31.6666 16.6667ZM31.6667 33.3333V34.0833C31.8656 34.0833 32.0563 34.0043 32.197 33.8637C32.3376 33.723 32.4167 33.5322 32.4167 33.3333H31.6667ZM8.33332 33.3333H7.58332C7.58332 33.7475 7.91911 34.0833 8.33332 34.0833V33.3333ZM19.4697 4.46967L7.80298 16.1363L8.86364 17.197L20.5303 5.53033L19.4697 4.46967ZM32.197 16.1363L20.5303 4.46967L19.4697 5.53033L31.1363 17.197L32.197 16.1363ZM30.9166 16.6667L30.9167 33.3333H32.4167L32.4166 16.6667L30.9166 16.6667ZM31.6667 32.5833H8.33332V34.0833H31.6667V32.5833ZM9.08332 33.3333L9.08331 16.6667L7.58331 16.6667L7.58332 33.3333H9.08332Z"/>
+  </g>
+</template>
--- a/src/components/iconsComponents/SettingsIcon.vue
+++ b/src/components/iconsComponents/SettingsIcon.vue
--- a/src/components/iconsComponents/UserIcon.vue
+++ b/src/components/iconsComponents/UserIcon.vue
@@ -0,0 +1,5 @@
+<template>
+  <g>
+    <path d="M33.3334 35V35.75C33.7476 35.75 34.0834 35.4142 34.0834 35H33.3334ZM6.66675 35H5.91675C5.91675 35.4142 6.25253 35.75 6.66675 35.75V35ZM13.3334 25.75H26.6667V24.25H13.3334V25.75ZM32.5834 31.6667V35H34.0834V31.6667H32.5834ZM7.41675 35V31.6667H5.91675V35H7.41675ZM26.6667 25.75C29.9344 25.75 32.5834 28.399 32.5834 31.6667H34.0834C34.0834 27.5706 30.7629 24.25 26.6667 24.25V25.75ZM13.3334 24.25C9.2373 24.25 5.91675 27.5706 5.91675 31.6667H7.41675C7.41675 28.399 10.0657 25.75 13.3334 25.75V24.25ZM25.9167 11.6667C25.9167 14.9344 23.2678 17.5833 20.0001 17.5833V19.0833C24.0962 19.0833 27.4167 15.7628 27.4167 11.6667H25.9167ZM20.0001 17.5833C16.7324 17.5833 14.0834 14.9344 14.0834 11.6667H12.5834C12.5834 15.7628 15.904 19.0833 20.0001 19.0833V17.5833ZM14.0834 11.6667C14.0834 8.39898 16.7324 5.75 20.0001 5.75V4.25C15.904 4.25 12.5834 7.57055 12.5834 11.6667H14.0834ZM20.0001 5.75C23.2678 5.75 25.9167 8.39898 25.9167 11.6667H27.4167C27.4167 7.57055 24.0962 4.25 20.0001 4.25V5.75ZM6.66675 35.75H33.3334V34.25H6.66675V35.75Z"/>
+  </g>
+</template>
--- a/src/components/iconsComponents/basicIcon/BasicIcon.vue
+++ b/src/components/iconsComponents/basicIcon/BasicIcon.vue
@@ -0,0 +1,47 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg"
+       :width="width"
+       :height="height"
+       viewBox="0 0 40 40"
+       :aria-labelledby="iconName"
+       role="presentation"
+  >
+    <title
+        :id="iconName"
+        lang="en"
+    >{{iconName}} icon</title>
+    <g :fill="iconColor">
+      <slot />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    iconName: {
+      type: String,
+      default: 'box'
+    },
+    width: {
+      type: [Number, String],
+      default: 40
+    },
+    height: {
+      type: [Number, String],
+      default: 40
+    },
+    iconColor: {
+      type: String,
+      default: 'currentColor'
+    }
+  }
+}
+</script>
+
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
--- a/src/components/pages/calendarPages/CalendarPages.vue
+++ b/src/components/pages/calendarPages/CalendarPages.vue
@@ -0,0 +1,9 @@
+<template lang="pug">
+  div CalendarPages
+</template>
+
+<script>
+  export default {
+    name: "CalendarPages"
+  }
+</script>
--- a/src/components/pages/homePages/HomePages.vue
+++ b/src/components/pages/homePages/HomePages.vue
@@ -0,0 +1,9 @@
+<template lang="pug">
+  div HomePages
+</template>
+
+<script>
+  export default {
+    name: "HomePages"
+  }
+</script>
--- a/src/components/pages/settingsPages/SettingsPages.vue
+++ b/src/components/pages/settingsPages/SettingsPages.vue
@@ -0,0 +1,9 @@
+<template lang="pug">
+  div SettingsPages
+</template>
+
+<script>
+  export default {
+    name: "SettingsPages"
+  }
+</script>
--- a/src/components/pages/userPages/UserPages.vue
+++ b/src/components/pages/userPages/UserPages.vue
@@ -0,0 +1,9 @@
+<template lang="pug">
+  div UserPages
+</template>
+
+<script>
+  export default {
+    name: "UserPages"
+  }
+</script>
--- 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')
--- a/src/router.js
+++ 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 }
+  ]
+})