animate icon

diyhue · Mar 8, 2024 · ae08ba7 · ae08ba7
1 parent b891c17
commit ae08ba7
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git 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
@@ -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
@@ -22,6 +22,9 @@
 
         .submenuIcon{
           margin-left: auto;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
       }