test

package.json

@@ -11,14 +11,20 @@
   "dependencies": {
     "@formkit/auto-animate": "^0.8.1",
     "animejs": "^3.2.2",
+    "astronomia": "^4.1.1",
     "axios": "^1.7.2",
+    "chart.js": "^4.4.3",
     "express": "^4.19.2",
+    "firebase": "^10.12.2",
     "pinia": "^2.1.7",
     "primevue": "^3.49.1",
+    "rgbaster": "^2.1.1",
     "svgo": "^3.2.0",
     "unplugin-auto-import": "^0.17.5",
+    "uuid": "^9.0.1",
     "vee-validate": "^4.12.5",
     "vue": "^3.4.19",
+    "vue-chartjs": "^5.3.1",
     "vue-query": "^1.26.0",
     "vue-router": "^4.3.0",
     "vuex": "^4.0.2",

src/App.vue

@@ -3,7 +3,7 @@
     <div class="container">
       <AsideBar />
       <div class="wrapper">
-        <Header />
+        <Header :class="{ 'is--active': isHeaderActive }" />
         <div class="content">
           <router-view></router-view>
         </div>
@@ -13,9 +13,28 @@
 </template>
 
 <script setup>
+import { ref, onMounted, onUnmounted } from "vue";
 import { useSearchStore } from "@/stores/search";
 
 const searchStore = useSearchStore();
+const header = ref(null);
+const isHeaderActive = ref(false);
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+})
+
+const handleScroll = () => {
+  if (window.scrollY > 30) {
+    isHeaderActive.value = true;
+  } else {
+    isHeaderActive.value = false;
+  }
+};
 </script>
 
 <style scoped lang="scss">

src/components/AsideBar.vue

@@ -2,29 +2,13 @@
   <div class="aside">
     <div class="aside__inner">
       <div class="aside__btns">
-        <div :class="['aside-btn-wrap', { 'is--active': isActiveBtn === 1 }]">
-          <button @click="onClickStyle(1)" class="aside-btn">
-            <i-ph:squares-four />
-          </button>
-        </div>
-        <div :class="['aside-btn-wrap', { 'is--active': isActiveBtn === 2 }]">
-          <button @click="onClickStyle(2)" class="aside-btn">
-            <i-carbon:location />
-          </button>
-        </div>
-        <div :class="['aside-btn-wrap', { 'is--active': isActiveBtn === 3 }]">
-          <button @click="onClickStyle(3)" class="aside-btn">
-            <i-quill:calendar />
-          </button>
-        </div>
-        <div :class="['aside-btn-wrap', { 'is--active': isActiveBtn === 4 }]">
-          <button @click="onClickStyle(4)" class="aside-btn">
-            <i-fluent:news-20-regular />
-          </button>
-        </div>
-        <div :class="['aside-btn-wrap', { 'is--active': isActiveBtn === 5 }]">
-          <button @click="onClickStyle(5)" class="aside-btn">
-            <i-ep:setting />
+        <div
+          v-for="item in menuPages"
+          :key="item.id"
+          :class="['aside-btn-wrap', { 'is--active': route.matched[0]?.path  === item.router }]"
+        >
+          <button @click="isActiveBtn = item.id, router.push(item.router)" class="aside-btn">
+            <component :is="item.icon"></component>
           </button>
         </div>
       </div>
@@ -51,17 +35,31 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, markRaw } from "vue";
+import {useRoute} from 'vue-router'
 import LineMdSunnyOutlineToMoonLoopTransition from "~icons/line-md/sunny-outline-to-moon-loop-transition";
 import LineMdMoonToSunnyOutlineLoopTransition from "~icons/line-md/moon-to-sunny-outline-loop-transition";
+import PhSquaresFour from "~icons/ph/squares-four";
+import CarbonLocation from "~icons/carbon/location";
+import QuillCalendar from "~icons/quill/calendar";
+import FluentNews20Regular from "~icons/fluent/news-20-regular";
+import EpSetting from "~icons/ep/setting";
+import router from '@/router/router.js'
+
+const route = useRoute();
 
 const isActiveBtn = ref(1);
+const menuPages = markRaw([
+  { id: 1, icon: PhSquaresFour, router: '/forecast/' },
+  { id: 2, icon: CarbonLocation, router: '/forecast/tomorrow' },
+  { id: 3, icon: QuillCalendar, router: '/forecast/history' },
+  { id: 4, icon: FluentNews20Regular, router: '/forecast/news' },
+  { id: 5, icon: EpSetting, router: '/forecast/tomorrgow' },
+]);
 
-const onClickStyle = (index) => {
-  isActiveBtn.value = index;
+const onChangeTheme = (value) => {
 };
 
-const onChangeTheme = (value) => {};
 </script>
 
 <style lang="scss" scoped>

src/components/Header.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="header">
     <div class="header__inner">
-      <Search/>
-      <Panel/>
+      <Search />
+      <Panel />
     </div>
   </div>
 </template>
@@ -15,6 +15,29 @@
   position: sticky;
   top: 30px;
   z-index: 100;
+  border-radius: 20px;
+
+  &::after{
+    content: '';
+    position: absolute;
+    width: calc(100% + 30px);
+    height: calc(100% + 30px);
+    background-color: #ffffff1d;
+    backdrop-filter: blur(10px);
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 20px;
+    z-index: -1;
+    opacity: 0;
+    transition: all .3s;
+  }
+
+  &.is--active {
+    &::after{
+      opacity: 1;
+    }
+  }
 
   &__inner {
     display: flex;

src/components/Panel.vue

@@ -63,6 +63,7 @@ const menu = shallowRef([
   position: absolute;
   right: 0;
   z-index: 100;
+  box-shadow: 0 0 10px #000;
 
   &__top {
     padding: 10px 25px 10px 10px;

src/components/Search.vue

@@ -69,7 +69,10 @@ const onSubmit = handleSubmit((value) => {
 watch(
   () => searchStore.input,
   (newValue) => {
-    search.value = newValue;
+    if(newValue) {
+      search.value = newValue;
+    }
+    searchStore.input = '';
   }
 );
 </script>
@@ -86,6 +89,7 @@ watch(
     position: relative;
     height: 50px;
     transition: all 0.3s;
+    box-shadow: 0 0 10px #000;
   }
   &-input-icon {
     height: 100%;

src/components/UI/Knob.vue

@@ -6,7 +6,7 @@
       :height="props.width / 2 + props.strokeWidth"
     >
       <defs>
-        <linearGradient id="arc-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <linearGradient :id="id" x1="0%" y1="0%" x2="100%" y2="0%">
           <stop
             v-if="props.colorsLine"
             v-for="(item, id) in props.colorsLine"
@@ -33,7 +33,7 @@
         :d="`M ${props.strokeWidth / 2},${
           props.width / 2 + props.strokeWidth / 2
         } a ${props.width / 2},${props.width / 2} 0 0,1 ${props.width},0`"
-        stroke="url(#arc-gradient)"
+        :stroke="`url(#${id})`"
         stroke-linecap="round"
         fill="none"
         :stroke-dasharray="`${angleInRadiansLine * (props.width / 200)} ${
@@ -42,7 +42,20 @@
       />
     </svg>
 
+    <component
+      class="knob-icon"
+      :is="props.icon"
+      v-if="props.icon"
+      :style="{
+        left: `${roundPosX}px`,
+        bottom: `${roundPosY}px`,
+        height: `${props.sizePoint}px`,
+        width: `${props.sizePoint}px`,
+        color: props.colorPoint,
+      }"
+    ></component>
     <div
+      v-else
       :style="{
         left: `${roundPosX}px`,
         bottom: `${roundPosY}px`,
@@ -56,21 +69,27 @@
 </template>
 
 <script setup>
-import { ref, onMounted, defineProps, watch } from "vue";
-import anime from 'animejs/lib/anime.es.js';
+import { ref, onMounted, defineProps, watch, inject } from "vue";
+import { v4 as uuidv4 } from "uuid";
+
+const { anime } = inject("plugins");
+const id = ref();
 
 const props = defineProps({
   min: {
     type: Number,
     required: true,
+    default: 0,
   },
   max: {
     type: Number,
     required: true,
+    default: 0,
   },
   modelValue: {
     type: Number,
     required: true,
+    default: 0,
   },
   colorsLine: {
     type: Array,
@@ -100,6 +119,10 @@ const props = defineProps({
     required: false,
     default: 200,
   },
+  icon: {
+    type: Object,
+    required: false,
+  },
 });
 
 const curValue = ref(0);
@@ -111,27 +134,28 @@ watch(
     anime({
       targets: curValue,
       value: newValue,
-      easing: 'spring(1, 80, 10, 0)',
+      easing: "spring(1, 80, 10, 0)",
       duration: 500,
       update: () => {
-        setRoundPos()
-      }
+        setRoundPos();
+      },
     });
   }
 );
 
 onMounted(() => {
-  checkValue();
-    anime({
-      targets: curValue,
-      value: props.modelValue,
-      easing: 'spring(1, 80, 10, 0)',
-      duration: 500,
-      update: () => {
-        setRoundPos()
-      }
-    });
+  id.value = uuidv4();
 
+  checkValue();
+  anime({
+    targets: curValue,
+    value: props.modelValue,
+    easing: "spring(1, 80, 10, 0)",
+    duration: 500,
+    update: () => {
+      setRoundPos();
+    },
+  });
 });
 
 const setOffset = (id) => {
@@ -171,7 +195,6 @@ const setRoundPos = () => {
   roundPosY.value =
     radius * Math.sin(angleInRadiansRound) + props.strokeWidth / 2;
 };
-
 </script>
 
 <style lang="scss" scoped>
@@ -189,6 +212,13 @@ const setRoundPos = () => {
   stroke-linecap: round;
 }
 
+.knob-icon {
+  position: absolute;
+  transform: translate(-50%, 50%);
+  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1));
+
+}
+
 .round {
   transform: translate(-50%, 50%);
   border-radius: 50%;