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/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.
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' }}
>
-
);
};
diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx
new file mode 100644
index 0000000..1128bdc
--- /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..62e6052
--- /dev/null
+++ b/src/pages/AccountPage.tsx
@@ -0,0 +1,50 @@
+import { Box, Typography, Container, Avatar, Paper, Button } from '@mui/material';
+import { Edit } from '@mui/icons-material';
+
+const AccountPage = () => {
+ return (
+
+
+
+ My Account
+
+
+
+
+
+
+ U
+
+
+ User Name
+
+
+ user@example.com
+
+ }>
+ Edit Profile
+
+
+
+
+
+
+
+ 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