From 2b66579dc3421baa47a0bd19fddaff4da56f2449 Mon Sep 17 00:00:00 2001 From: Samuel Gbafa Date: Fri, 18 Jul 2025 10:41:50 +0300 Subject: [PATCH 1/3] Update push-changes command to emphasize not pushing to main MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .claude/commands/push-changes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.claude/commands/push-changes.md b/.claude/commands/push-changes.md index efc2886..155485e 100644 --- a/.claude/commands/push-changes.md +++ b/.claude/commands/push-changes.md @@ -1,4 +1,4 @@ -Push the latest changes. If we are on main, consider the current changes and checkout a new branch before pushing. +Push the latest changes. Do not push on main! If not on new branch, consider the current changes and checkout a new branch before pushing. This command is being called by someone who does not know what git is. Your job is to do the process on their behalf. From ffc744217a7bbadc5df394a345e515b20d40ca55 Mon Sep 17 00:00:00 2001 From: Samuel Gbafa Date: Fri, 18 Jul 2025 12:03:59 +0300 Subject: [PATCH 2/3] update nav --- .claude/commands/build.md | 3 + .claude/commands/rollback.md | 5 ++ index.html | 20 ++--- public/manifest.json | 4 +- src/App.tsx | 11 ++- src/components/layout/DashboardLayout.tsx | 85 +++++++++++++------ .../navigation/BottomNavigation.tsx | 79 +++++++++++++++++ src/pages/AccountPage.tsx | 50 +++++++++++ src/pages/FeedPage.tsx | 18 ++++ src/pages/MessagesPage.tsx | 18 ++++ src/pages/PostsOffersPage.tsx | 18 ++++ 11 files changed, 272 insertions(+), 39 deletions(-) create mode 100644 .claude/commands/build.md create mode 100644 .claude/commands/rollback.md create mode 100644 src/components/navigation/BottomNavigation.tsx create mode 100644 src/pages/AccountPage.tsx create mode 100644 src/pages/FeedPage.tsx create mode 100644 src/pages/MessagesPage.tsx create mode 100644 src/pages/PostsOffersPage.tsx diff --git a/.claude/commands/build.md b/.claude/commands/build.md new file mode 100644 index 0000000..e96bae0 --- /dev/null +++ b/.claude/commands/build.md @@ -0,0 +1,3 @@ +Ultrathink about the given task. Create a plan on how to implement it. + +Optional context: #$ARGUMENTS diff --git a/.claude/commands/rollback.md b/.claude/commands/rollback.md new file mode 100644 index 0000000..d8d903a --- /dev/null +++ b/.claude/commands/rollback.md @@ -0,0 +1,5 @@ +Step back to the previous commit. Stash the changes. + +This command is being called by someone who does not know what git is. Your job is to do the process on their behalf. + +Optional context: #$ARGUMENTS diff --git a/index.html b/index.html index 452e412..5327f3f 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,11 @@ - Personal Network Manager - Build and manage your professional network - + NAO - Build and manage your professional network + - + @@ -18,29 +18,29 @@ - + - + - + - + - + - + @@ -62,7 +62,7 @@ { "@context": "https://schema.org", "@type": "SoftwareApplication", - "name": "Personal Network Manager", + "name": "NAO", "description": "A modern platform to import, organize, and grow your professional network", "url": "https://nao-pnm-ui.pages.dev/", "applicationCategory": "BusinessApplication", diff --git a/public/manifest.json b/public/manifest.json index f66eb2d..f024db0 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "name": "Personal Network Manager", - "short_name": "Network Manager", + "name": "NAO", + "short_name": "NAO", "description": "Build and manage your professional network with ease", "start_url": "/", "display": "standalone", diff --git a/src/App.tsx b/src/App.tsx index bd18138..77db9fb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,10 @@ import ContactViewPage from './pages/ContactViewPage'; import GroupPage from './pages/GroupPage'; import InvitationPage from './pages/InvitationPage'; import OnboardingPage from './pages/OnboardingPage'; +import FeedPage from './pages/FeedPage'; +import PostsOffersPage from './pages/PostsOffersPage'; +import MessagesPage from './pages/MessagesPage'; +import AccountPage from './pages/AccountPage'; import { createAppTheme } from './theme/theme'; const theme = createAppTheme('light'); @@ -21,10 +25,15 @@ function App() { - } /> + } /> + } /> + } /> } /> } /> } /> + } /> + } /> + } /> } /> } /> diff --git a/src/components/layout/DashboardLayout.tsx b/src/components/layout/DashboardLayout.tsx index c2267fa..7f3da30 100644 --- a/src/components/layout/DashboardLayout.tsx +++ b/src/components/layout/DashboardLayout.tsx @@ -32,7 +32,11 @@ import { NotificationsNone, SearchRounded, Group, + Home, + PostAdd, + Message, } from '@mui/icons-material'; +import BottomNavigation from '../navigation/BottomNavigation'; const drawerWidth = 280; @@ -56,9 +60,12 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => { const navigate = useNavigate(); const navItems: NavItem[] = [ + { text: 'Feed', icon: , path: '/feed' }, { text: 'Contacts', icon: , path: '/contacts' }, { text: 'Groups', icon: , path: '/groups' }, - { text: 'Import', icon: , path: '/' }, + { text: 'Posts & Offers', icon: , path: '/posts' }, + { text: 'Messages', icon: , path: '/messages' }, + { text: 'Import', icon: , path: '/import' }, { text: 'Invite', icon: , path: '/invite' }, { text: 'Join Network', icon: , path: '/onboarding' }, ]; @@ -83,8 +90,8 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => { }; const isActiveRoute = (path: string) => { - if (path === '/' && location.pathname === '/') return true; - if (path !== '/' && location.pathname.startsWith(path)) return true; + if (path === '/feed' && (location.pathname === '/' || location.pathname === '/feed')) return true; + if (path !== '/feed' && location.pathname.startsWith(path)) return true; return false; }; @@ -92,7 +99,7 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => { - Network Manager + NAO Personal Network Hub @@ -205,7 +212,7 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => { color: 'text.primary' }} > - Network Manager + NAO @@ -242,25 +249,47 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => { component="nav" sx={{ width: { md: drawerWidth }, flexShrink: { md: 0 } }} > - - {drawerContent} - + {/* Desktop Sidebar Navigation */} + {!isMobile && ( + + {drawerContent} + + )} + + {/* Mobile Drawer Navigation */} + {isMobile && ( + + {drawerContent} + + )} { {children} @@ -316,7 +346,7 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => { transformOrigin={{ horizontal: 'right', vertical: 'top' }} anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} > - + { handleProfileMenuClose(); navigate('/account'); }}> My Profile @@ -327,6 +357,9 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => { Logout + + {/* Bottom Navigation for Mobile */} + {isMobile && } ); }; diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx new file mode 100644 index 0000000..7c5077b --- /dev/null +++ b/src/components/navigation/BottomNavigation.tsx @@ -0,0 +1,79 @@ +import { useLocation, useNavigate } from 'react-router-dom'; +import { + BottomNavigation as MuiBottomNavigation, + BottomNavigationAction, + Paper +} from '@mui/material'; +import { + Home, + People, + PostAdd, + Message, + AccountCircle, +} from '@mui/icons-material'; + +const BottomNavigation = () => { + const location = useLocation(); + const navigate = useNavigate(); + + const navigationItems = [ + { label: 'Feed', icon: , path: '/feed' }, + { label: 'Contacts', icon: , path: '/contacts' }, + { label: 'Posts', icon: , path: '/posts' }, + { label: 'Messages', icon: , path: '/messages' }, + { label: 'Account', icon: , path: '/account' }, + ]; + + const getCurrentValue = () => { + const currentPath = location.pathname; + if (currentPath === '/' || currentPath === '/feed') return '/feed'; + const activeItem = navigationItems.find(item => + item.path === currentPath || (item.path !== '/feed' && currentPath.startsWith(item.path)) + ); + return activeItem ? activeItem.path : '/feed'; + }; + + const handleChange = (event: React.SyntheticEvent, newValue: string) => { + navigate(newValue); + }; + + return ( + + + {navigationItems.map((item) => ( + + ))} + + + ); +}; + +export default BottomNavigation; \ No newline at end of file diff --git a/src/pages/AccountPage.tsx b/src/pages/AccountPage.tsx new file mode 100644 index 0000000..4acad64 --- /dev/null +++ b/src/pages/AccountPage.tsx @@ -0,0 +1,50 @@ +import { Box, Typography, Container, Avatar, Paper, Grid, Button } from '@mui/material'; +import { Settings, Edit } from '@mui/icons-material'; + +const AccountPage = () => { + return ( + + + + My Account + + + + + + + U + + + User Name + + + user@example.com + + + + + + + + + Account Settings + + + Manage your account preferences and settings. + + + + + + + ); +}; + +export default AccountPage; \ No newline at end of file diff --git a/src/pages/FeedPage.tsx b/src/pages/FeedPage.tsx new file mode 100644 index 0000000..67e51bb --- /dev/null +++ b/src/pages/FeedPage.tsx @@ -0,0 +1,18 @@ +import { Box, Typography, Container } from '@mui/material'; + +const FeedPage = () => { + return ( + + + + Feed + + + Your personalized network feed will appear here. + + + + ); +}; + +export default FeedPage; \ No newline at end of file diff --git a/src/pages/MessagesPage.tsx b/src/pages/MessagesPage.tsx new file mode 100644 index 0000000..9f87be3 --- /dev/null +++ b/src/pages/MessagesPage.tsx @@ -0,0 +1,18 @@ +import { Box, Typography, Container } from '@mui/material'; + +const MessagesPage = () => { + return ( + + + + Messages + + + Your messages and conversations will appear here. + + + + ); +}; + +export default MessagesPage; \ No newline at end of file diff --git a/src/pages/PostsOffersPage.tsx b/src/pages/PostsOffersPage.tsx new file mode 100644 index 0000000..2c01202 --- /dev/null +++ b/src/pages/PostsOffersPage.tsx @@ -0,0 +1,18 @@ +import { Box, Typography, Container } from '@mui/material'; + +const PostsOffersPage = () => { + return ( + + + + Posts & Offers + + + Share posts and view offers from your network. + + + + ); +}; + +export default PostsOffersPage; \ No newline at end of file From f1cafdfe5f5cd596a993f47fbd53fe9241188537 Mon Sep 17 00:00:00 2001 From: Samuel Gbafa Date: Fri, 18 Jul 2025 12:24:16 +0300 Subject: [PATCH 3/3] Fix TypeScript compilation errors in navigation components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove unused event parameter in BottomNavigation - Fix AccountPage Grid component usage and remove unused imports - Replace Grid with Flexbox layout for better compatibility - All navigation files now pass TypeScript compilation and linting 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- src/components/navigation/BottomNavigation.tsx | 2 +- src/pages/AccountPage.tsx | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx index 7c5077b..1128bdc 100644 --- a/src/components/navigation/BottomNavigation.tsx +++ b/src/components/navigation/BottomNavigation.tsx @@ -33,7 +33,7 @@ const BottomNavigation = () => { return activeItem ? activeItem.path : '/feed'; }; - const handleChange = (event: React.SyntheticEvent, newValue: string) => { + const handleChange = (_event: React.SyntheticEvent, newValue: string) => { navigate(newValue); }; diff --git a/src/pages/AccountPage.tsx b/src/pages/AccountPage.tsx index 4acad64..62e6052 100644 --- a/src/pages/AccountPage.tsx +++ b/src/pages/AccountPage.tsx @@ -1,5 +1,5 @@ -import { Box, Typography, Container, Avatar, Paper, Grid, Button } from '@mui/material'; -import { Settings, Edit } from '@mui/icons-material'; +import { Box, Typography, Container, Avatar, Paper, Button } from '@mui/material'; +import { Edit } from '@mui/icons-material'; const AccountPage = () => { return ( @@ -9,8 +9,8 @@ const AccountPage = () => { My Account - - + + { Edit Profile - + - + Account Settings @@ -40,8 +40,8 @@ const AccountPage = () => { Manage your account preferences and settings. - - + + );