Feat: Migrate 'SidePanel' ES6 FC to ES5 FC and Add size attr to icons

- Migrate to ES5 function for better debugging with React Devtools.
- Add size attr to icons to fix mobile bug, where icons are tiny.

src/components/SidePanel.jsx

@@ -8,12 +8,13 @@ import {
   FaXmark,
   FaYoutube,
 } from 'react-icons/fa6';
+
 import NavigationLinks from './NavigationLinks';
 import getRandomId from '../helpers/getRandomId';
 import Logo from '../app/assets/images/tesla-red-word-logo.png';
 import '../styles/components/SidePanel.scss';
 
-const SidePanel = () => {
+function SidePanel() {
   const panel = useRef(null);
   const location = useLocation();
   const socials = [
@@ -22,6 +23,8 @@ const SidePanel = () => {
     { id: getRandomId(), icon: <FaYoutube /> },
     { id: getRandomId(), icon: <FaXTwitter /> },
   ];
+  const iconSize = 22;
+
   const toggleMenu = (opened) => {
     if (opened) {
       panel.current.classList.add('panel_visible');
@@ -31,11 +34,13 @@ const SidePanel = () => {
       setTimeout(() => panel.current.classList.remove('panel_visible'), 500);
     }
   };
+
   useEffect(() => {
     if (panel.current.classList.contains('panel_visible')) {
       toggleMenu(false);
     }
   }, [location]);
+
   return (
     <menu>
       <button
@@ -44,7 +49,7 @@ const SidePanel = () => {
         className="panel_button"
         onClick={() => toggleMenu(true)}
       >
-        <FaBars className="bars_icon_svg" />
+        <FaBars className="bars_icon_svg" size={iconSize}/>
       </button>
       <div className="panel_menu" ref={panel}>
         <div>
@@ -56,7 +61,7 @@ const SidePanel = () => {
               className="mobile_close_button"
               onClick={() => toggleMenu(false)}
             >
-              <FaXmark className="x_icon_svg" />
+              <FaXmark className="x_icon_svg" size={iconSize} />
             </button>
           </span>
           <NavigationLinks />
@@ -71,6 +76,6 @@ const SidePanel = () => {
       </div>
     </menu>
   );
-};
+}
 
 export default SidePanel;