dereklseitz/campfire-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Update Sidebar and Dashboard page

Browse Source 
- Remove SidebarDrawer
    - Add CampfirePanelBar
    - Fix navigation links
    - Add blog files
    - Add aggregator file
    - Update Dashboard.jsx to display blog post links
    - Add Copyright info
This commit is contained in:
Derek L. Seitz
2025-09-21 22:43:55 -05:00
parent 9f09f78288
commit 8226a57aac
20 changed files with 1060 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/components/PanelBar.jsx Normal file
View File

@@ -0,0 +1,113 @@
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';
const iconMap = {
bookIcon, inboxIcon, trackChangesIcon, plusOutlineIcon,
globeOutlineIcon, linkIcon, tellAFriendIcon,
facebookIcon, xLogoIcon, linkedinIcon, redditIcon
};
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'
}}
>
<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>
}
/>
);
}
// Parent items 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>
}
>
{item.items.map(renderItem)}
</PanelBarItem>
);
};
return (
<div style={{
width: isExpanded ? 300 : 200,
minWidth: isExpanded ? 240 : 60,
transition: 'width 0.3s'
}}>
<PanelBar>
{panelbarData.map(renderItem)}
</PanelBar>
</div>
);
};
export default CampfirePanelBar;