aside animo

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

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.50008 9.83358C7.36378 9.83384 7.23169 9.78637 7.12675 9.69941L3.62675 6.78274C3.50762 6.68373 3.43271 6.54145 3.41848 6.3872C3.40426 6.23295 3.4519 6.07937 3.55091 5.96024C3.64993 5.84112 3.79221 5.7662 3.94646 5.75198C4.10071 5.73776 4.25429 5.78539 4.37341 5.88441L7.50008 8.49774L10.6267 5.97774C10.6864 5.92929 10.7551 5.8931 10.8288 5.87127C10.9025 5.84943 10.9798 5.84238 11.0562 5.85051C11.1326 5.85864 11.2067 5.8818 11.2741 5.91865C11.3416 5.9555 11.4011 6.00532 11.4492 6.06524C11.5027 6.12522 11.5431 6.19559 11.5681 6.27193C11.5931 6.34827 11.602 6.42895 11.5943 6.5089C11.5866 6.58886 11.5625 6.66636 11.5235 6.73657C11.4845 6.80678 11.4314 6.86817 11.3676 6.91691L7.86758 9.73441C7.75961 9.80763 7.63022 9.84254 7.50008 9.83358Z"/>
+</svg>

src/components/global/Aside.tsx

@@ -1,11 +1,15 @@
 // Modules
 import { v4 as uuidv4 } from 'uuid';
+import { motion } from 'framer-motion';
 
 // Components
 import SectionTitle from './SectionTitle';
 import AsideItem from '../aside/AsideItem';
 import Calendar from '../aside/Calendar';
 
+// Icons
+import { ReactComponent as ArrowDownBlue } from '../../assets/icons/arrow-down-blue.svg';
+
 interface AsideDataType {
   title: string;
   category: string;
@@ -42,6 +46,37 @@ const asideData: AsideDataType[] = [
     category: 'Политика',
   },
 ];
+
+const buttonMotion = {
+  rest: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    color: '#2368ad',
+    duration: 0.4,
+    type: 'tween',
+  },
+  hover: {
+    backgroundColor: '#2368ad',
+    color: '#ffffff',
+    duration: 0.4,
+    type: 'spring',
+  },
+};
+
+const arrowMotion = {
+  rest: {
+    fill: '#2368ad',
+    transform: 'rotateX(0%)',
+    duration: 0.4,
+    type: 'tween',
+  },
+  hover: {
+    fill: '#ffffff',
+    transform: 'rotateX(180%)',
+    duration: 0.4,
+    type: 'spring',
+  },
+};
+
 const Aside = () => {
   return (
     <aside className="aside">
@@ -57,6 +92,16 @@ const Aside = () => {
           );
         })}
       </div>
+      <motion.button
+        className="aside-btn"
+        type="button"
+        initial={buttonMotion.rest}
+        whileHover={buttonMotion.hover}>
+        <span>Открыть полностью</span>
+        <motion.div initial={'rest'} variants={arrowMotion}>
+          <ArrowDownBlue />
+        </motion.div>
+      </motion.button>
       <Calendar />
     </aside>
   );

src/styles/_aside.scss

@@ -39,3 +39,21 @@
   font-weight: bold;
   font-size: 1rem;
 }
+
+.aside-btn {
+  cursor: pointer;
+  color: $main;
+  border: 0.1rem $main solid;
+  border-radius: 0.5rem;
+  padding: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.8rem;
+  font-size: 1.4rem;
+
+  svg {
+    width: 1.4rem;
+    height: 1.4rem;
+  }
+}