From de75d3c56f80ef3cb4561e517480344f3d3892c1 Mon Sep 17 00:00:00 2001
From: Aurora Lahtela <24460436+AuroraLS3@users.noreply.github.com>
Date: Sat, 18 May 2024 09:32:14 +0300
Subject: [PATCH] Fix className is undefined error for FontAwesome

---
 .../dashboard/src/components/navigation/Sidebar.jsx    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/Plan/react/dashboard/src/components/navigation/Sidebar.jsx b/Plan/react/dashboard/src/components/navigation/Sidebar.jsx
index f4adfa510..1a8539560 100644
--- a/Plan/react/dashboard/src/components/navigation/Sidebar.jsx
+++ b/Plan/react/dashboard/src/components/navigation/Sidebar.jsx
@@ -32,7 +32,7 @@ const InnerItem = ({href, icon, name, nameShort, color, external, collapseSideba
     if (external) {
         return (
             <a href={href} className="collapse-item nav-button">
-                <Fa icon={icon} className={color ? "col-" + color : undefined}/>
+                <Fa icon={icon} className={color ? "col-" + color : ""}/>
                 <span>{nameShort ? nameShort : name}</span>
             </a>
         )
@@ -41,7 +41,7 @@ const InnerItem = ({href, icon, name, nameShort, color, external, collapseSideba
     return <NavLink to={href} onClick={collapseSidebar} className={({isActive}) => {
         return isActive ? "collapse-item nav-button active" : "collapse-item nav-button"
     }}>
-        <Fa icon={icon} className={color ? "col-" + color : undefined}/> <span>{nameShort ? nameShort : name}</span>
+        <Fa icon={icon} className={color ? "col-" + color : ""}/> <span>{nameShort ? nameShort : name}</span>
     </NavLink>
 }
 
@@ -65,7 +65,7 @@ export const Item = ({item, inner, collapseSidebar}) => {
         return (
             <li className={"nav-item nav-button"}>
                 <a href={baseAddress + href} className="nav-link">
-                    <Fa icon={icon} className={color ? "col-" + color : undefined}/>
+                    <Fa icon={icon} className={color ? "col-" + color : ""}/>
                     <span>{t(nameShort ? nameShort : name)}</span>
                 </a>
             </li>
@@ -77,7 +77,7 @@ export const Item = ({item, inner, collapseSidebar}) => {
             <NavLink to={href} onClick={collapseSidebar} className={({isActive}) => {
                 return isActive ? "nav-link active" : "nav-link"
             }}>
-                <Fa icon={icon} className={color ? "col-" + color : undefined}/> <span>{t(name)}</span>
+                <Fa icon={icon} className={color ? "col-" + color : ""}/> <span>{t(name)}</span>
             </NavLink>
         </li>
     );
@@ -142,7 +142,7 @@ const SidebarCollapse = ({item, open, setOpen, collapseSidebar}) => {
                     aria-expanded={open}
                     data-bs-toggle="collapse"
             >
-                <Fa icon={item.icon} className={item?.color ? "col-" + item?.color : undefined}/>
+                <Fa icon={item.icon} className={item?.color ? "col-" + item?.color : ""}/>
                 <span>{t(item.name)}</span>
             </button>
             <Collapse in={open}>