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