campfire-dashboard/src/components/PanelBar.jsx

// PanelBar.jsx
import React from 'react';
import { PanelBar, PanelBarItem } from '@progress/kendo-react-layout';
import { useNavigate } from 'react-router-dom';
import { SvgIcon } from '@progress/kendo-react-common';
import { 
    bookIcon, inboxIcon, trackChangesIcon, plusOutlineIcon,
    globeOutlineIcon, linkIcon, tellAFriendIcon,
    facebookIcon, xLogoIcon, linkedinIcon, redditIcon
} 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,
    // Custom SVG icons
    giteaIcon: GiteaIcon,
    notionIcon: NotionIcon,
    hashnodeIcon: HashnodeIcon,
    devIcon: DevIcon,
    veniceIcon: VeniceIcon,
    dlseitzIcon: DlseitzIcon
};

const CampfirePanelBar = ({ isExpanded = true }) => {
    const navigate = useNavigate();

    const renderItem = (item) => {
        // External links
        if (item.url) {
            return (
                <PanelBarItem
                    key={item.title}
                    title={
                        <a
                            href={item.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                width: '100%',
                                height: '100%',
                                color: 'inherit',
                                textDecoration: 'none'
                            }}
                        >
                            {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>
                    }
                />
            );
        }

        // Internal routes
        if (item.route) {
            return (
                <PanelBarItem
                    key={item.title}
                    title={
                        <div
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                width: '100%',
                                height: '100%'
                            }}
                            onClick={() => navigate(item.route)}
                        >
                            <SvgIcon 
                                icon={iconMap[item.icon]} 
                                size="medium" 
                                style={{ marginLeft: '30px' }}
                            />
                            <span style={{ marginLeft: '8px' }}>{item.title}</span>
                        </div>
                    }
                />
            );
        }

        // Headers with children
        return (
            <PanelBarItem
                key={item.title}
                title={
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <SvgIcon 
                            icon={iconMap[item.icon]} 
                            size="medium" 
                            style={{ marginLeft: '8px' }}
                        />
                        <span style={{ marginLeft: '8px' }}>{item.title}</span>
                    </div>
                }
                expanded={true}
            >
                {item.items.map(renderItem)}
            </PanelBarItem>
        );
    };

    return (
        <div style={{ 
            width: isExpanded ? 300 : 200,
            minWidth: isExpanded ? 240 : 60,
            transition: 'width 0.3s',
            marginTop: '-10px',
        }}>
            <PanelBar>
                {panelbarData.map(renderItem)}
            </PanelBar>
        </div>
    );
};

export default CampfirePanelBar;