sonderau/leagues-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add footer navigation support in SideBar and update PageWrapper with user and character state

Browse Source
This commit is contained in:
Sonderau
2026-01-23 01:50:27 +00:00
parent 29456a07bc
commit de14c646fa
2 changed files with 72 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
os-league-tools-master/src/components/PageWrapper.js
View File

@@ -7,9 +7,9 @@ import FeedbackModal from './FeedbackModal';
import ManageDataModal from './ManageDataModal';
import images from '../assets/images';
import useQueryString from '../hooks/useQueryString';
import ManageData from './nav/ManageData';
// import ManageData from './nav/ManageData';
import Feedback from './nav/Feedback';
import Character from './nav/Character';
// import Character from './nav/Character';
import ManageCharactersModal from './ManageCharactersModal';
export default function PageWrapper({ children }) {
@@ -18,6 +18,9 @@ export default function PageWrapper({ children }) {
const [isFeedbackModalOpen, setFeedbackModalOpen] = useState(false);
const [isCharacterModalOpen, setCharacterModalOpen] = useState(false);
const [manageDataModalType, setManageDataModalType] = useQueryString('open');
const user = useSelector(state => state.auth?.user); // adjust to your store
const selectedCharacter = useSelector(state => state.character?.selected); // adjust
const navItems = [
new NavItem('Stats', 'primary', 0, 0).withRouterLink('/stats').withIconFont('query_stats'),
@@ -25,33 +28,13 @@ export default function PageWrapper({ children }) {
new NavItem('Calculators', 'primary', 0, 2).withRouterLink('/calculators').withIconFont('calculate'),
new NavItem('Groups', 'primary', 0, 3).withRouterLink('/groups').withIconFont('groups'),
new NavItem('Planner', 'primary', 0, 4).withRouterLink('/planner').withIconFont('event_note'),
new NavItem('Character', 'secondary', 1, 0).withCustomRenderFn(
(isCollapsed, onNavigate) => (
<Character.SideBarItem
key='character'
setCharacterModalOpen={setCharacterModalOpen}
isCollapsed={isCollapsed}
onNavigate={onNavigate}
/>
)
),
new NavItem('Data', 'secondary', 2, 0).withCustomRenderFn(
(isCollapsed, onNavigate) => (
<ManageData.SideBarItem
key='manage'
setManageDataModalType={setManageDataModalType}
isCollapsed={isCollapsed}
onNavigate={onNavigate}
/>
)
),
new NavItem('Settings', 'overflow', 3, 1).withRouterLink('/settings').withIconFont('settings'),
new NavItem('FAQ', 'overflow', 3, 2).withRouterLink('/faq').withIconFont('help_outline'),
new NavItem('About', 'overflow', 3, 3).withRouterLink('/about').withIconFont('info'),
new NavItem('Discord', 'overflow', 4, 0).withHref('https://discord.gg/GQ5kVyU', '_blank').withIconFont('discord'),
new NavItem('Github', 'overflow', 4, 1)
.withHref('https://github.com/osrs-reldo/os-league-tools', '_blank')
.withIconFont('code'),
new NavItem('WIP-FAQ', 'overflow', 3, 2).withRouterLink('/faq').withIconFont('help_outline'),
new NavItem('WIP-About', 'overflow', 3, 3).withRouterLink('/about').withIconFont('info'),
new NavItem('WIP-Discord', 'overflow', 4, 0).withHref('https://discord.gg/GQ5kVyU', '_blank').withIconFont('discord'),
// new NavItem('Github', 'overflow', 4, 1)
// .withHref('https://github.com/osrs-reldo/os-league-tools', '_blank')
// .withIconFont('code'),
new NavItem('Feedback', 'overflow', 4, 2).withCustomRenderFn(
(isCollapsed, onNavigate) => (
<Feedback.SideBarItem
@@ -62,9 +45,52 @@ export default function PageWrapper({ children }) {
/>
)
),
new NavItem('Tip Jar', 'overflow', 4, 3)
.withHref('https://ko-fi.com/osleaguetools', '_blank')
.withIconFont('savings'),
new NavItem('Profile', 'footer', 10, 0).withRouterLink('/profile').withIconFont('account_circle'),
new NavItem('User', 'footer', 10, 1).withCustomRenderFn(
(isCollapsed, onNavigate) => (
<div
key='footer-user'
className='sidebar-nav-link'
onClick={() => {
// optional: if you want clicking the row to go to profile
// navigate('/profile') or use a NavLink style row
onNavigate?.();
}}
title={isCollapsed ? (user?.name ?? user?.email ?? 'Profile') : undefined}
>
<span className='sidebar-nav-link-icon icon-base'>person</span>
{!isCollapsed && (
<span className='sidebar-nav-link-label'>
{user?.name ?? user?.email ?? 'Unknown user'}
</span>
)}
</div>
)
),
new NavItem('Selected Character', 'footer', 10, 2).withCustomRenderFn(
(isCollapsed, onNavigate) => (
<button
key='footer-selected-character'
type='button'
className='sidebar-nav-link w-full text-left'
onClick={() => {
setCharacterModalOpen(true);
onNavigate?.();
}}
title={isCollapsed ? (selectedCharacter?.name ?? 'Select character') : undefined}
>
<span className='sidebar-nav-link-icon icon-base'>badge</span>
{!isCollapsed && (
<span className='sidebar-nav-link-label'>
{selectedCharacter?.name ?? 'Select character'}
</span>
)}
</button>
)
),
// new NavItem('Tip Jar', 'overflow', 4, 3)
// .withHref('https://ko-fi.com/osleaguetools', '_blank')
// .withIconFont('savings'),
];
return (

17
os-league-tools-master/src/components/common/SideBar.js
View File

@@ -33,6 +33,7 @@ export default function SideBar({ navItems, brandName, brandLogo }) {
primary: primaryNavItems,
secondary: secondaryNavItems,
overflow: overflowNavItems,
footer: footerNavItems,
} = groupNavItemsByVariant(navItems);
// Group overflow items by collapseGroup for organization
@@ -55,7 +56,6 @@ export default function SideBar({ navItems, brandName, brandLogo }) {
))}
</SideBarSection>
<SideBarDivider />
{/* Secondary navigation (Character, Manage Data) */}
<SideBarSection>
@@ -78,7 +78,20 @@ export default function SideBar({ navItems, brandName, brandLogo }) {
{i < overflowGroups.length - 1 && <SideBarDivider />}
</React.Fragment>
))}
</div>
{/* footer pinned to bottom */}
{footerNavItems?.length ? (
<div className='sidebar-nav-content-footer'>
<SideBarDivider />
<SideBarSection>
{footerNavItems.map(navItem => (
<SideBarLink key={navItem.id} item={navItem} isCollapsed={isCollapsed} />
))}
</SideBarSection>
</div>
) : null}
</div>
{/* Toggle button */}
<button