From ae08ba71456faaa93f31c685ae16ac2962716807 Mon Sep 17 00:00:00 2001
From: Fisico <fisico994@gmail.com>
Date: Fri, 8 Mar 2024 23:39:48 +0100
Subject: [PATCH] animate icon

---
 src/containers/MenuItem.js   |  5 ++++-
 src/containers/TheSidebar.js | 22 +++++++++++-----------
 src/scss/sidebar.scss        |  3 +++
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/containers/MenuItem.js b/src/containers/MenuItem.js
index 4aabe36..a362ac7 100644
--- a/src/containers/MenuItem.js
+++ b/src/containers/MenuItem.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { FaAngleDown, FaAngleUp } from "react-icons/fa";
+import { motion } from 'framer-motion';
 
 const MenuItem = ({ label, icon, onClick, isActive, children, link }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -24,7 +25,9 @@ const MenuItem = ({ label, icon, onClick, isActive, children, link }) => {
         <div className='menuEntry'>
           {icon}
           <p>{label}</p>
-          <div className='submenuIcon'>{children && (isOpen ? <FaAngleUp /> : <FaAngleDown />)} </div> 
+          <motion.div animate={{ rotate: isOpen ? 180 : 0 }} transition={{ duration: 0.3 }} className='submenuIcon'>{children && 
+              <FaAngleDown />
+          }</motion.div> 
         </div>
         <div className='submenu'>
           {isOpen && children}
diff --git a/src/containers/TheSidebar.js b/src/containers/TheSidebar.js
index 5c05281..9f639ae 100644
--- a/src/containers/TheSidebar.js
+++ b/src/containers/TheSidebar.js
@@ -35,12 +35,12 @@ const TheSidebar = ({ showSidebar, setShowSidebar, isMobile }) => {
   
   
   const menuItems = [
-    { label: 'Groups', icon: <FaUser style={{ color: "#D85BCD" }} />, link: '#' },
-    { label: 'Lights', icon: <FaLightbulb style={{ color: "#4DB8B4" }} />, link: '#lights' },
-    { label: 'Devices', icon: <MdSettingsRemote style={{ color: "#E0E043" }} />, link: '#devices' },
+    { label: 'Groups', icon: <FaHome style={{ color: "#5b4db7" }} />, link: '#' },
+    { label: 'Lights', icon: <FaLightbulb style={{ color: "#42adc7" }} />, link: '#lights' },
+    { label: 'Devices', icon: <MdSettingsRemote style={{ color: "#81d152" }} />, link: '#devices' },
     {
       label: 'DIYHue',
-      icon: <Diybridge style={{ color: "#D85BCD" }} />,
+      icon: <Diybridge style={{ color: "#f5f263" }} />,
       link: '#diyhue',
       subItems: [
         { label: 'Linkbutton', icon: <FaLink style={{ color: "#FCEE86" }} />, link: '#linkbutton' },
@@ -52,17 +52,17 @@ const TheSidebar = ({ showSidebar, setShowSidebar, isMobile }) => {
     },
     {
       label: 'Addons',
-      icon: <FaCog style={{ color: "#D85BCD" }} />,
+      icon: <FaCog style={{ color: "#ff9d4f" }} />,
       link: '#addons',
       subItems: [
-        { label: 'MQTT', icon: <Zigbee style={{ color: "#FCEE86" }} />, link: '#mqtt' },
-        { label: 'HA', icon: <SiHomeassistant style={{ color: "#FCEE86" }} />, link: '#ha' },
-        { label: 'Tradfri', icon: <Tradfri style={{ color: "#FCEE86" }} />, link: '#tradfri' },
-        { label: 'Deconz', icon: <Deconz style={{ color: "#FCEE86" }} />, link: '#deconz' },
-        { label: 'Phillips', icon: <Bridge style={{ color: "#FCEE86" }} />, link: '#hue' },
+        { label: 'MQTT', icon: <Zigbee style={{ color: "#ff9d4f" }} />, link: '#mqtt' },
+        { label: 'HA', icon: <SiHomeassistant style={{ color: "#ff9d4f" }} />, link: '#ha' },
+        { label: 'Tradfri', icon: <Tradfri style={{ color: "#ff9d4f" }} />, link: '#tradfri' },
+        { label: 'Deconz', icon: <Deconz style={{ color: "#ff9d4f" }} />, link: '#deconz' },
+        { label: 'Phillips', icon: <Bridge style={{ color: "#ff9d4f" }} />, link: '#hue' },
       ]
     },
-    { label: 'Logout', icon: <FaSignOutAlt style={{ color: "#E0E043" }} />, link: 'logout' },
+    { label: 'Logout', icon: <FaSignOutAlt style={{ color: "#ff5347" }} />, link: 'logout' },
   ];
   
   return (
diff --git a/src/scss/sidebar.scss b/src/scss/sidebar.scss
index 359dc95..dcaee10 100644
--- a/src/scss/sidebar.scss
+++ b/src/scss/sidebar.scss
@@ -22,6 +22,9 @@
 
         .submenuIcon{
           margin-left: auto;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
       }