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

os-league-tools-master/src/components/PageWrapper.js

@@ -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('WIP-FAQ', 'overflow', 3, 2).withRouterLink('/faq').withIconFont('help_outline'),
-    new NavItem('About', 'overflow', 3, 3).withRouterLink('/about').withIconFont('info'),
+    new NavItem('WIP-About', 'overflow', 3, 3).withRouterLink('/about').withIconFont('info'),
-    new NavItem('Discord', 'overflow', 4, 0).withHref('https://discord.gg/GQ5kVyU', '_blank').withIconFont('discord'),
+    new NavItem('WIP-Discord', 'overflow', 4, 0).withHref('https://discord.gg/GQ5kVyU', '_blank').withIconFont('discord'),
-    new NavItem('Github', 'overflow', 4, 1)
+    // new NavItem('Github', 'overflow', 4, 1)
-      .withHref('https://github.com/osrs-reldo/os-league-tools', '_blank')
+    //   .withHref('https://github.com/osrs-reldo/os-league-tools', '_blank')
-      .withIconFont('code'),
+    //   .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)
+    new NavItem('Profile', 'footer', 10, 0).withRouterLink('/profile').withIconFont('account_circle'),
-      .withHref('https://ko-fi.com/osleaguetools', '_blank')
+    new NavItem('User', 'footer', 10, 1).withCustomRenderFn(
-      .withIconFont('savings'),
+  (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 (

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

@@ -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>
           ))}
+
+
+          {/* 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