Merge branch 'master' into add_sidebar

src/App.vue

@@ -1,14 +1,17 @@
 <template lang="pug">
-  div(class="pages-container")
+  div
-    sidebar-component
+    header-component
-    router-view
+    div(class="pages-container")
+      sidebar-component
+      router-view
 </template>
 
 <script>
+  import HeaderComponent from './components/homePageComponents/HeaderComponent.vue';
   import SidebarComponent from "./components/homePageComponents/SidebarComponent";
   export default {
     name: 'App',
-    components: {SidebarComponent}
+    components: {HeaderComponent, SidebarComponent}
   }
 </script>
 
@@ -18,13 +21,17 @@
   flex-direction: column
   row-gap: 8px
   height: 100%
+  width: 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
-  background-color: #E9E9F6
+  background-color: var(--bg-lavender-color)
 .pages-container
   display: flex
   flex: auto
+body
+  margin: 0
+  padding: 0
 </style>

src/assets/css/variables.css

@@ -0,0 +1,7 @@
+:root {
+	--bg-lavender-color: #D7D9FF;
+	--bg-white-color: #F8F8FF;
+	--font-dark-blue-color: #252850;
+	--font-black-color: #090A15;
+	--btn-blue-color: #4169E1;
+}

src/assets/icons/bell.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1213 20.1213L14.6517 20.6517L14.1213 20.1213ZM13.1481 20.7716L12.861 20.0787L13.1481 20.7716ZM10.8519 20.7716L10.5649 21.4645L10.8519 20.7716ZM9.87868 20.1213L9.34835 20.6517L9.87868 20.1213ZM9.22836 19.1481L8.53545 19.4351L9.22836 19.1481ZM9.75 17C9.75 16.5858 9.41421 16.25 9 16.25C8.58579 16.25 8.25 16.5858 8.25 17H9.75ZM15.75 17C15.75 16.5858 15.4142 16.25 15 16.25C14.5858 16.25 14.25 16.5858 14.25 17H15.75ZM20 17V17.75C20.2489 17.75 20.4815 17.6266 20.621 17.4205C20.7606 17.2144 20.7888 16.9525 20.6964 16.7215L20 17ZM4 17L3.32918 16.6646C3.21293 16.8971 3.22536 17.1732 3.36201 17.3943C3.49867 17.6154 3.74007 17.75 4 17.75V17ZM14.25 18C14.25 18.2955 14.1918 18.5881 14.0787 18.861L15.4645 19.4351C15.653 18.9801 15.75 18.4925 15.75 18H14.25ZM14.0787 18.861C13.9657 19.134 13.7999 19.3821 13.591 19.591L14.6517 20.6517C14.9999 20.3034 15.2761 19.89 15.4645 19.4351L14.0787 18.861ZM13.591 19.591C13.3821 19.7999 13.134 19.9657 12.861 20.0787L13.4351 21.4645C13.89 21.2761 14.3034 20.9999 14.6517 20.6517L13.591 19.591ZM12.861 20.0787C12.5881 20.1918 12.2955 20.25 12 20.25V21.75C12.4925 21.75 12.9801 21.653 13.4351 21.4645L12.861 20.0787ZM12 20.25C11.7045 20.25 11.4119 20.1918 11.139 20.0787L10.5649 21.4645C11.0199 21.653 11.5075 21.75 12 21.75V20.25ZM11.139 20.0787C10.866 19.9657 10.6179 19.7999 10.409 19.591L9.34835 20.6517C9.69657 20.9999 10.11 21.2761 10.5649 21.4645L11.139 20.0787ZM10.409 19.591C10.2001 19.3821 10.0343 19.134 9.92127 18.861L8.53545 19.4351C8.72391 19.89 9.00013 20.3034 9.34835 20.6517L10.409 19.591ZM9.92127 18.861C9.8082 18.5881 9.75 18.2955 9.75 18H8.25C8.25 18.4925 8.347 18.9801 8.53545 19.4351L9.92127 18.861ZM9.75 18V17H8.25V18H9.75ZM15.75 18V17H14.25V18H15.75ZM17.25 9C17.25 10.6222 17.7818 12.7163 18.2832 14.3456C18.5377 15.1729 18.792 15.9039 18.9827 16.4282C19.0781 16.6905 19.1577 16.9017 19.2138 17.0479C19.2419 17.121 19.264 17.1779 19.2793 17.2169C19.287 17.2364 19.2929 17.2515 19.297 17.2618C19.299 17.267 19.3006 17.271 19.3017 17.2738C19.3023 17.2752 19.3027 17.2763 19.3031 17.2771C19.3032 17.2775 19.3033 17.2778 19.3034 17.278C19.3035 17.2782 19.3035 17.2783 19.3036 17.2783C19.3036 17.2785 19.3036 17.2785 20 17C20.6964 16.7215 20.6964 16.7215 20.6964 16.7215C20.6964 16.7215 20.6964 16.7215 20.6964 16.7215C20.6964 16.7215 20.6963 16.7213 20.6962 16.7211C20.6961 16.7207 20.6958 16.72 20.6954 16.719C20.6946 16.7169 20.6933 16.7137 20.6915 16.7093C20.6881 16.7006 20.6828 16.6872 20.6758 16.6693C20.6618 16.6336 20.641 16.5802 20.6143 16.5107C20.561 16.3718 20.4844 16.1688 20.3923 15.9156C20.208 15.4086 19.9623 14.7021 19.7168 13.9044C19.2182 12.2837 18.75 10.3778 18.75 9H17.25ZM4 17C4.67082 17.3354 4.67089 17.3353 4.67097 17.3351C4.67101 17.335 4.6711 17.3348 4.67117 17.3347C4.67132 17.3344 4.6715 17.334 4.67171 17.3336C4.67213 17.3328 4.67267 17.3317 4.67333 17.3304C4.67464 17.3277 4.67643 17.3241 4.67868 17.3195C4.68318 17.3104 4.68952 17.2974 4.69758 17.2808C4.7137 17.2475 4.73669 17.1994 4.76558 17.1375C4.82333 17.0137 4.90473 16.8346 5.00186 16.6079C5.19596 16.155 5.45378 15.5104 5.71151 14.7372C6.22399 13.1997 6.75 11.1134 6.75 9H5.25C5.25 10.8866 4.77601 12.8003 4.28849 14.2628C4.04622 14.9896 3.80404 15.595 3.62314 16.0171C3.53277 16.2279 3.45792 16.3925 3.4063 16.5031C3.3805 16.5584 3.36052 16.6002 3.34734 16.6274C3.34075 16.6411 3.33586 16.651 3.33279 16.6573C3.33126 16.6604 3.33018 16.6626 3.32957 16.6638C3.32927 16.6644 3.32908 16.6648 3.32902 16.6649C3.32898 16.665 3.32898 16.665 3.32901 16.6649C3.32902 16.6649 3.32906 16.6648 3.32907 16.6648C3.32912 16.6647 3.32918 16.6646 4 17ZM20 16.25H4V17.75H20V16.25ZM12 2.25C8.31779 2.25 5.25 5.31778 5.25 9H6.75C6.75 6.14621 9.14621 3.75 12 3.75V2.25ZM18.75 9C18.75 5.31779 15.6822 2.25 12 2.25V3.75C14.8538 3.75 17.25 6.14621 17.25 9H18.75Z" fill="#252850"/>
+</svg>

src/assets/icons/down-arrow-1.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.19702 6.63636C4.90412 6.34346 4.42925 6.34346 4.13636 6.63636C3.84346 6.92925 3.84346 7.40412 4.13636 7.69702L5.19702 6.63636ZM8.00002 10.5L7.46969 11.0304C7.61034 11.171 7.80111 11.25 8.00002 11.25C8.19893 11.25 8.3897 11.171 8.53035 11.0304L8.00002 10.5ZM11.8637 7.69702C12.1566 7.40412 12.1566 6.92925 11.8637 6.63636C11.5708 6.34346 11.0959 6.34346 10.803 6.63636L11.8637 7.69702ZM4.13636 7.69702L7.46969 11.0304L8.53035 9.96969L5.19702 6.63636L4.13636 7.69702ZM8.53035 11.0304L11.8637 7.69702L10.803 6.63636L7.46969 9.96969L8.53035 11.0304Z" fill="#4169E1"/>
+</svg>

src/assets/icons/down-arrow-2.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.53033 9.46967C7.23744 9.17678 6.76256 9.17678 6.46967 9.46967C6.17678 9.76256 6.17678 10.2374 6.46967 10.5303L7.53033 9.46967ZM12 15L11.4697 15.5303C11.7626 15.8232 12.2374 15.8232 12.5303 15.5303L12 15ZM17.5303 10.5303C17.8232 10.2374 17.8232 9.76256 17.5303 9.46967C17.2374 9.17678 16.7626 9.17678 16.4697 9.46967L17.5303 10.5303ZM6.46967 10.5303L11.4697 15.5303L12.5303 14.4697L7.53033 9.46967L6.46967 10.5303ZM12.5303 15.5303L17.5303 10.5303L16.4697 9.46967L11.4697 14.4697L12.5303 15.5303Z" fill="#252850"/>
+</svg>

src/assets/icons/search.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path d="M19.4697 20.5303C19.7626 20.8232 20.2374 20.8232 20.5303 20.5303C20.8232 20.2374 20.8232 19.7626 20.5303 19.4697L19.4697 20.5303ZM16.3336 15.273C16.0407 14.9801 15.5659 14.9801 15.273 15.273C14.9801 15.5659 14.9801 16.0408 15.273 16.3336L16.3336 15.273ZM10.5 17.25C6.77208 17.25 3.75 14.2279 3.75 10.5H2.25C2.25 15.0563 5.94365 18.75 10.5 18.75V17.25ZM3.75 10.5C3.75 6.77208 6.77208 3.75 10.5 3.75V2.25C5.94365 2.25 2.25 5.94365 2.25 10.5H3.75ZM10.5 3.75C14.2279 3.75 17.25 6.77208 17.25 10.5H18.75C18.75 5.94365 15.0563 2.25 10.5 2.25V3.75ZM17.25 10.5C17.25 14.2279 14.2279 17.25 10.5 17.25V18.75C15.0563 18.75 18.75 15.0563 18.75 10.5H17.25ZM20.5303 19.4697L16.3336 15.273L15.273 16.3336L19.4697 20.5303L20.5303 19.4697Z" fill="#4169E1"/>
+</g>
+</svg>

src/assets/images/logo.svg

@@ -0,0 +1,3 @@
+<svg width="68" height="21" viewBox="0 0 68 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4072 16.4404V20H3.7041V16.4404H13.4072ZM5.35205 0.804688V20H0.724609V0.804688H5.35205ZM30.7568 10.02V10.7979C30.7568 12.2656 30.5503 13.584 30.1372 14.7529C29.7329 15.9131 29.1572 16.9062 28.4102 17.7324C27.6631 18.5498 26.7798 19.1782 25.7603 19.6177C24.7407 20.0483 23.6157 20.2637 22.3853 20.2637C21.146 20.2637 20.0122 20.0483 18.9839 19.6177C17.9644 19.1782 17.0767 18.5498 16.3208 17.7324C15.5737 16.9062 14.9937 15.9131 14.5806 14.7529C14.1763 13.584 13.9741 12.2656 13.9741 10.7979V10.02C13.9741 8.55225 14.1763 7.23389 14.5806 6.06494C14.9937 4.896 15.5693 3.90283 16.3076 3.08545C17.0547 2.25928 17.938 1.63086 18.9575 1.2002C19.9858 0.760742 21.1196 0.541016 22.3589 0.541016C23.5894 0.541016 24.7144 0.760742 25.7339 1.2002C26.7622 1.63086 27.6499 2.25928 28.397 3.08545C29.144 3.90283 29.7241 4.896 30.1372 6.06494C30.5503 7.23389 30.7568 8.55225 30.7568 10.02ZM26.0635 10.7979V9.99365C26.0635 9.04443 25.98 8.20947 25.813 7.48877C25.6548 6.75928 25.4175 6.14844 25.1011 5.65625C24.7847 5.16406 24.3936 4.79492 23.9277 4.54883C23.4707 4.29395 22.9478 4.1665 22.3589 4.1665C21.7437 4.1665 21.2075 4.29395 20.7505 4.54883C20.2935 4.79492 19.9111 5.16406 19.6035 5.65625C19.2959 6.14844 19.063 6.75928 18.9048 7.48877C18.7554 8.20947 18.6807 9.04443 18.6807 9.99365V10.7979C18.6807 11.7383 18.7554 12.5732 18.9048 13.3027C19.063 14.0234 19.2959 14.6343 19.6035 15.1353C19.9199 15.6362 20.3066 16.0142 20.7637 16.269C21.2295 16.5239 21.77 16.6514 22.3853 16.6514C22.9741 16.6514 23.4971 16.5239 23.9541 16.269C24.4111 16.0142 24.7935 15.6362 25.1011 15.1353C25.4175 14.6343 25.6548 14.0234 25.813 13.3027C25.98 12.5732 26.0635 11.7383 26.0635 10.7979ZM48.8579 9.74316V17.627C48.5327 17.9873 48.0317 18.374 47.355 18.7871C46.687 19.1914 45.8433 19.5386 44.8237 19.8286C43.8042 20.1187 42.6045 20.2637 41.2246 20.2637C39.9502 20.2637 38.7944 20.0615 37.7573 19.6572C36.7202 19.2441 35.8281 18.6421 35.0811 17.8511C34.3428 17.0513 33.7715 16.0757 33.3672 14.9243C32.9717 13.7642 32.7739 12.437 32.7739 10.9429V9.875C32.7739 8.38086 32.9761 7.05371 33.3804 5.89355C33.7847 4.7334 34.3516 3.75781 35.0811 2.9668C35.8193 2.16699 36.6851 1.56055 37.6782 1.14746C38.6802 0.734375 39.7788 0.527832 40.9741 0.527832C42.7407 0.527832 44.1777 0.809082 45.2852 1.37158C46.3926 1.92529 47.2319 2.69434 47.8032 3.67871C48.3745 4.6543 48.7217 5.78369 48.8447 7.06689H44.4019C44.314 6.43408 44.147 5.89795 43.9009 5.4585C43.6636 5.01025 43.3208 4.67187 42.8726 4.44336C42.4243 4.20605 41.8442 4.0874 41.1323 4.0874C40.5786 4.0874 40.0732 4.20605 39.6162 4.44336C39.168 4.68066 38.7856 5.04102 38.4692 5.52441C38.1528 5.99902 37.9067 6.59668 37.731 7.31738C37.564 8.03809 37.4805 8.88184 37.4805 9.84863V10.9429C37.4805 11.9009 37.5596 12.7402 37.7178 13.4609C37.8848 14.1816 38.1309 14.7837 38.4561 15.2671C38.79 15.7417 39.2119 16.1021 39.7217 16.3481C40.2402 16.5854 40.8511 16.7041 41.5542 16.7041C42.0464 16.7041 42.4683 16.6646 42.8198 16.5854C43.1714 16.4976 43.4614 16.3921 43.6899 16.269C43.9272 16.1372 44.1074 16.0142 44.2305 15.8999V12.9204H41.0137V9.74316H48.8579ZM67.8027 10.02V10.7979C67.8027 12.2656 67.5962 13.584 67.1831 14.7529C66.7788 15.9131 66.2031 16.9062 65.4561 17.7324C64.709 18.5498 63.8257 19.1782 62.8062 19.6177C61.7866 20.0483 60.6616 20.2637 59.4312 20.2637C58.1919 20.2637 57.0581 20.0483 56.0298 19.6177C55.0103 19.1782 54.1226 18.5498 53.3667 17.7324C52.6196 16.9062 52.0396 15.9131 51.6265 14.7529C51.2222 13.584 51.02 12.2656 51.02 10.7979V10.02C51.02 8.55225 51.2222 7.23389 51.6265 6.06494C52.0396 4.896 52.6152 3.90283 53.3535 3.08545C54.1006 2.25928 54.9839 1.63086 56.0034 1.2002C57.0317 0.760742 58.1655 0.541016 59.4048 0.541016C60.6353 0.541016 61.7603 0.760742 62.7798 1.2002C63.8081 1.63086 64.6958 2.25928 65.4429 3.08545C66.1899 3.90283 66.77 4.896 67.1831 6.06494C67.5962 7.23389 67.8027 8.55225 67.8027 10.02ZM63.1094 10.7979V9.99365C63.1094 9.04443 63.0259 8.20947 62.8589 7.48877C62.7007 6.75928 62.4634 6.14844 62.147 5.65625C61.8306 5.16406 61.4395 4.79492 60.9736 4.54883C60.5166 4.29395 59.9937 4.1665 59.4048 4.1665C58.7896 4.1665 58.2534 4.29395 57.7964 4.54883C57.3394 4.79492 56.957 5.16406 56.6494 5.65625C56.3418 6.14844 56.1089 6.75928 55.9507 7.48877C55.8013 8.20947 55.7266 9.04443 55.7266 9.99365V10.7979C55.7266 11.7383 55.8013 12.5732 55.9507 13.3027C56.1089 14.0234 56.3418 14.6343 56.6494 15.1353C56.9658 15.6362 57.3525 16.0142 57.8096 16.269C58.2754 16.5239 58.8159 16.6514 59.4312 16.6514C60.02 16.6514 60.543 16.5239 61 16.269C61.457 16.0142 61.8394 15.6362 62.147 15.1353C62.4634 14.6343 62.7007 14.0234 62.8589 13.3027C63.0259 12.5732 63.1094 11.7383 63.1094 10.7979Z" fill="#4169E1"/>
+</svg>

src/components/homePageComponents/HeaderComponent.vue

@@ -0,0 +1,149 @@
+<template lang="pug">
+  div.header-wrapper.flex.flex-row.center.space-between
+    div.logo-wrapper
+      img.logo-img(src="../../assets/images/logo.svg" alt="Logo")
+    div.flex.flex-row
+      div.inputs-wrapper
+        img.search-icon(src="../../assets/icons/search.svg" alt="Search")
+        select.inputs.select(v-model="selectedFilter")
+          option(v-for="filter in filters" :key="filter" :value="filter") {{ filter }}
+        span.separator  
+        input.inputs.search-input(placeholder="Искать ...")
+      button.flex.center.btn-notification
+        img.bell-icon(src="../../assets/icons/bell.svg" alt="Notifications")
+      div.flex.flex-row.center
+        img.avatar-img(:src="avatarSrc")
+        button.flex.flex-center
+          img.arrow-icon(src="../../assets/icons/down-arrow-2.svg" alt="Down Arrow")
+</template>
+
+<script>
+import img from '../../assets/images/avatar.svg'
+export default {
+  name: 'HeaderComponent',
+  data() {
+    return {
+      selectedFilter: 'Календарь',
+      filters: ['Календарь', 'Вариант 2', 'Вариант 3'],
+      avatarSrc: img
+    }
+  }
+}
+</script>
+
+<style lang='sass'>
+
+input
+  padding: 0 
+
+button
+  outline: none
+  border: none
+  background-color: transparent
+  cursor: pointer
+  padding: 0
+  color: var(--font-dark-blue-color)
+
+.header-wrapper
+  width: 100%
+  padding: 8px 24px
+  background-color: var(--bg-white-color)
+  box-sizing: border-box
+
+.flex
+  display: flex
+
+.flex-row    
+  flex-direction: row
+
+.center
+  justify-content: center
+  align-items: center  
+
+.space-between    
+  justify-content: space-between
+
+.logo-wrapper
+  box-sizing: border-box
+  margin: 4px 0
+  height: 32px 
+  cursor: pointer
+
+.logo-img
+  height: 32px
+  width: 70px 
+
+.inputs-wrapper
+  display: inline-block
+  background-color: rgba(65, 105, 225, 0.1)
+  padding: 8px 18px 8px 16px
+  border-radius: 4px
+  margin-right: 46px
+
+.search-icon
+  position: absolute
+  height: 24px
+  width: 24px
+  color: var(--btn-blue-color)
+  opacity: 0.7 
+
+.btn-notification
+  margin-right: 32px
+
+.arrow-icon
+  width: 24px
+  height: 24px
+
+.bell-icon
+  width: 24px
+  height: 24px
+
+.inputs
+  cursor: pointer
+  border: none
+  outline: none
+  background-color: transparent
+  color: var(--btn-blue-color)
+  height: 100%
+  box-sizing: border-box
+  font-family: Raleway
+  font-style: normal
+  font-weight: 500
+  font-size: 16px
+  line-height: 19px
+  font-feature-settings: 'pnum' on, 'lnum' on
+  display: inline-block
+  vertical-align: middle
+  &::placeholder
+    color: var(--btn-blue-color)
+    opacity: 0.5
+
+.select
+  -webkit-appearance: none
+  -moz-appearance: none
+  -ms-appearance: none
+  appearance: none
+  background: url(../../assets/icons/down-arrow-1.svg) no-repeat right top 4px
+  overflow: hidden
+  margin-right: 16px
+  padding: 2px 20px 2px 30px
+
+.search-input
+  margin-left: 14px
+  padding: 2px
+
+.separator
+  display: inline-block
+  vertical-align: middle
+  height: 254px
+  border-left: 1px solid var(--btn-blue-color)
+  opacity: 0.5
+  border-radius: 4px
+  height: 100%
+
+.avatar-img
+  width: 32px
+  height: 32px
+  margin-right: 8px
+
+</style>

src/main.js

@@ -2,5 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from "./router";
 import './assets/sass/styles.sass'
+import './assets/css/variables.css'
 
 createApp(App).use(router).mount('#app')