maintenance: Clean up codebase and improve formatting

• Remove placeholder comments and unused code
• Standardize inline styles and formatting
• Update component structure and organization

src/components/PanelBar.jsx

@@ -1,3 +1,4 @@
+// PanelBar.jsx
 import React from 'react';
 import { PanelBar, PanelBarItem } from '@progress/kendo-react-layout';
 import { useNavigate } from 'react-router-dom';
@@ -9,10 +10,25 @@ import {
 } from '@progress/kendo-svg-icons';
 import { panelbarData } from '../data/panelbar-data';
 
+// Import custom icon images (PNG files)
+import GiteaIcon from '../assets/icons/Gitea_Logo.png';
+import NotionIcon from '../assets/icons/Notion-logo.png';
+import HashnodeIcon from '../assets/icons/Hashnode_icon.png';
+import DevIcon from '../assets/icons/DEV_Community_Badge.png';
+import VeniceIcon from '../assets/icons/venice_icon.png';
+import DlseitzIcon from '../assets/icons/dlseitz-icon.svg';
+
 const iconMap = {
     bookIcon, inboxIcon, trackChangesIcon, plusOutlineIcon,
     globeOutlineIcon, linkIcon, tellAFriendIcon,
-    facebookIcon, xLogoIcon, linkedinIcon, redditIcon
+    facebookIcon, xLogoIcon, linkedinIcon, redditIcon,
+    // Custom SVG icons
+    giteaIcon: GiteaIcon,
+    notionIcon: NotionIcon,
+    hashnodeIcon: HashnodeIcon,
+    devIcon: DevIcon,
+    veniceIcon: VeniceIcon,
+    dlseitzIcon: DlseitzIcon
 };
 
 const CampfirePanelBar = ({ isExpanded = true }) => {
@@ -38,11 +54,24 @@ const CampfirePanelBar = ({ isExpanded = true }) => {
                                 textDecoration: 'none'
                             }}
                         >
-                            <SvgIcon 
-                                icon={iconMap[item.icon]} 
-                                size="medium" 
-                                style={{ marginLeft: '30px' }}
-                            />
+                            {iconMap[item.icon] && typeof iconMap[item.icon] === 'string' ? (
+                                <img 
+                                    src={iconMap[item.icon]} 
+                                    alt={item.title}
+                                    style={{ 
+                                        width: '16px', 
+                                        height: '16px', 
+                                        marginLeft: '30px',
+                                        objectFit: 'contain'
+                                    }} 
+                                />
+                            ) : (
+                                <SvgIcon 
+                                    icon={iconMap[item.icon]} 
+                                    size="medium" 
+                                    style={{ marginLeft: '30px' }}
+                                />
+                            )}
                             <span style={{ marginLeft: '8px' }}>{item.title}</span>
                         </a>
                     }
@@ -77,7 +106,7 @@ const CampfirePanelBar = ({ isExpanded = true }) => {
             );
         }
 
-        // Parent items with children
+        // Headers with children
         return (
             <PanelBarItem
                 key={item.title}
@@ -102,7 +131,8 @@ const CampfirePanelBar = ({ isExpanded = true }) => {
         <div style={{ 
             width: isExpanded ? 300 : 200,
             minWidth: isExpanded ? 240 : 60,
-            transition: 'width 0.3s'
+            transition: 'width 0.3s',
+            marginTop: '-10px',
         }}>
             <PanelBar>
                 {panelbarData.map(renderItem)}