Merge pull request #1 from TinyCloudLabs/update-nav

Update Nav

.claude/commands/build.md

@@ -0,0 +1,3 @@
+Ultrathink about the given task. Create a plan on how to implement it.
+
+Optional context: #$ARGUMENTS

.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.
 

.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

index.html

@@ -6,11 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     
     <!-- Primary Meta Tags -->
-    <title>Personal Network Manager - Build and manage your professional network</title>
+    <title>NAO - Build and manage your professional network</title>
-    <meta name="title" content="Personal Network Manager - Build and manage your professional network" />
+    <meta name="title" content="NAO - Build and manage your professional network" />
     <meta name="description" content="A modern platform to import, organize, and grow your professional network. Connect with LinkedIn, manage contacts, and expand your reach with QR invitations." />
     <meta name="keywords" content="networking, professional network, contact management, LinkedIn integration, QR codes, social connections, career growth" />
-    <meta name="author" content="Personal Network Manager" />
+    <meta name="author" content="NAO" />
     <meta name="robots" content="index, follow" />
     <meta name="language" content="English" />
     
@@ -18,29 +18,29 @@
     <meta name="theme-color" content="#1976d2" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-    <meta name="apple-mobile-web-app-title" content="Network Manager" />
+    <meta name="apple-mobile-web-app-title" content="NAO" />
     
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://nao-pnm-ui.pages.dev/" />
-    <meta property="og:title" content="Personal Network Manager - Build and manage your professional network" />
+    <meta property="og:title" content="NAO - Build and manage your professional network" />
     <meta property="og:description" content="A modern platform to import, organize, and grow your professional network. Connect with LinkedIn, manage contacts, and expand your reach with QR invitations." />
     <meta property="og:image" content="https://nao-pnm-ui.pages.dev/og-image.svg" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
-    <meta property="og:site_name" content="Personal Network Manager" />
+    <meta property="og:site_name" content="NAO" />
     <meta property="og:locale" content="en_US" />
     
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:url" content="https://nao-pnm-ui.pages.dev/" />
-    <meta property="twitter:title" content="Personal Network Manager - Build and manage your professional network" />
+    <meta property="twitter:title" content="NAO - Build and manage your professional network" />
     <meta property="twitter:description" content="A modern platform to import, organize, and grow your professional network. Connect with LinkedIn, manage contacts, and expand your reach with QR invitations." />
     <meta property="twitter:image" content="https://nao-pnm-ui.pages.dev/og-image.svg" />
-    <meta property="twitter:image:alt" content="Personal Network Manager - Professional networking made simple" />
+    <meta property="twitter:image:alt" content="NAO - Professional networking made simple" />
     
     <!-- Additional Meta Tags -->
-    <meta name="application-name" content="Personal Network Manager" />
+    <meta name="application-name" content="NAO" />
     <meta name="category" content="social" />
     <meta name="coverage" content="worldwide" />
     <meta name="distribution" content="global" />
@@ -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",

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "name": "Personal Network Manager",
+  "name": "NAO",
-  "short_name": "Network Manager",
+  "short_name": "NAO",
   "description": "Build and manage your professional network with ease",
   "start_url": "/",
   "display": "standalone",

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() {
         <Router>
           <DashboardLayout>
             <Routes>
-              <Route path="/" element={<ImportPage />} />
+              <Route path="/" element={<FeedPage />} />
+              <Route path="/feed" element={<FeedPage />} />
+              <Route path="/import" element={<ImportPage />} />
               <Route path="/contacts" element={<ContactListPage />} />
               <Route path="/contacts/:id" element={<ContactViewPage />} />
               <Route path="/groups" element={<GroupPage />} />
+              <Route path="/posts" element={<PostsOffersPage />} />
+              <Route path="/messages" element={<MessagesPage />} />
+              <Route path="/account" element={<AccountPage />} />
               <Route path="/invite" element={<InvitationPage />} />
               <Route path="/onboarding" element={<OnboardingPage />} />
             </Routes>

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: <Home />, path: '/feed' },
     { text: 'Contacts', icon: <People />, path: '/contacts' },
     { text: 'Groups', icon: <Group />, path: '/groups' },
-    { text: 'Import', icon: <CloudDownload />, path: '/' },
+    { text: 'Posts & Offers', icon: <PostAdd />, path: '/posts' },
+    { text: 'Messages', icon: <Message />, path: '/messages' },
+    { text: 'Import', icon: <CloudDownload />, path: '/import' },
     { text: 'Invite', icon: <QrCode />, path: '/invite' },
     { text: 'Join Network', icon: <PersonAdd />, path: '/onboarding' },
   ];
@@ -83,8 +90,8 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
   };
 
   const isActiveRoute = (path: string) => {
-    if (path === '/' && location.pathname === '/') return true;
+    if (path === '/feed' && (location.pathname === '/' || location.pathname === '/feed')) return true;
-    if (path !== '/' && location.pathname.startsWith(path)) return true;
+    if (path !== '/feed' && location.pathname.startsWith(path)) return true;
     return false;
   };
 
@@ -92,7 +99,7 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
     <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
       <Box sx={{ p: 3, borderBottom: 1, borderColor: 'divider' }}>
         <Typography variant="h6" sx={{ fontWeight: 700, color: 'primary.main' }}>
-          Network Manager
+          NAO
         </Typography>
         <Typography variant="body2" color="text.secondary">
           Personal Network Hub
@@ -205,7 +212,7 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
                 color: 'text.primary'
               }}
             >
-              Network Manager
+              NAO
             </Typography>
           </Box>
 
@@ -242,25 +249,47 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
         component="nav"
         sx={{ width: { md: drawerWidth }, flexShrink: { md: 0 } }}
       >
-        <Drawer
+        {/* Desktop Sidebar Navigation */}
-          variant={isMobile ? 'temporary' : 'permanent'}
+        {!isMobile && (
-          open={isMobile ? mobileOpen : true}
+          <Drawer
-          onClose={handleDrawerToggle}
+            variant="permanent"
-          ModalProps={{
+            open={true}
-            keepMounted: true,
+            sx={{
-          }}
+              '& .MuiDrawer-paper': {
-          sx={{
+                boxSizing: 'border-box',
-            '& .MuiDrawer-paper': {
+                width: drawerWidth,
-              boxSizing: 'border-box',
+                borderRight: 1,
-              width: drawerWidth,
+                borderColor: 'divider',
-              borderRight: 1,
+                zIndex: theme.zIndex.drawer - 1,
-              borderColor: 'divider',
+              },
-              zIndex: isMobile ? theme.zIndex.drawer : theme.zIndex.drawer - 1,
+            }}
-            },
+          >
-          }}
+            {drawerContent}
-        >
+          </Drawer>
-          {drawerContent}
+        )}
-        </Drawer>
+        
+        {/* Mobile Drawer Navigation */}
+        {isMobile && (
+          <Drawer
+            variant="temporary"
+            open={mobileOpen}
+            onClose={handleDrawerToggle}
+            ModalProps={{
+              keepMounted: true,
+            }}
+            sx={{
+              '& .MuiDrawer-paper': {
+                boxSizing: 'border-box',
+                width: drawerWidth,
+                borderRight: 1,
+                borderColor: 'divider',
+                zIndex: theme.zIndex.drawer,
+              },
+            }}
+          >
+            {drawerContent}
+          </Drawer>
+        )}
       </Box>
 
       <Box
@@ -276,7 +305,8 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
         <Box sx={{ 
           p: { xs: 2, md: 3 }, 
           height: 'calc(100vh - 64px)', 
-          overflow: 'auto' 
+          overflow: 'auto',
+          pb: { xs: 10, md: 3 }
         }}>
           {children}
         </Box>
@@ -316,7 +346,7 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
         transformOrigin={{ horizontal: 'right', vertical: 'top' }}
         anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
       >
-        <MenuItem onClick={handleProfileMenuClose}>
+        <MenuItem onClick={() => { handleProfileMenuClose(); navigate('/account'); }}>
           <Avatar /> My Profile
         </MenuItem>
         <MenuItem onClick={handleProfileMenuClose}>
@@ -327,6 +357,9 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
           <Logout sx={{ mr: 1 }} /> Logout
         </MenuItem>
       </Menu>
+      
+      {/* Bottom Navigation for Mobile */}
+      {isMobile && <BottomNavigation />}
     </Box>
   );
 };

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: <Home />, path: '/feed' },
+    { label: 'Contacts', icon: <People />, path: '/contacts' },
+    { label: 'Posts', icon: <PostAdd />, path: '/posts' },
+    { label: 'Messages', icon: <Message />, path: '/messages' },
+    { label: 'Account', icon: <AccountCircle />, 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 (
+    <Paper 
+      sx={{ 
+        position: 'fixed', 
+        bottom: 0, 
+        left: 0, 
+        right: 0, 
+        zIndex: 1000,
+        borderTop: 1,
+        borderColor: 'divider',
+      }} 
+      elevation={3}
+    >
+      <MuiBottomNavigation
+        value={getCurrentValue()}
+        onChange={handleChange}
+        showLabels
+        sx={{
+          '& .MuiBottomNavigationAction-root': {
+            color: 'text.secondary',
+            '&.Mui-selected': {
+              color: 'primary.main',
+            },
+          },
+        }}
+      >
+        {navigationItems.map((item) => (
+          <BottomNavigationAction
+            key={item.path}
+            label={item.label}
+            value={item.path}
+            icon={item.icon}
+          />
+        ))}
+      </MuiBottomNavigation>
+    </Paper>
+  );
+};
+
+export default BottomNavigation;

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 (
+    <Container maxWidth="lg">
+      <Box sx={{ py: 4 }}>
+        <Typography variant="h4" sx={{ mb: 3, fontWeight: 600 }}>
+          My Account
+        </Typography>
+        
+        <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 3 }}>
+          <Box sx={{ flex: { xs: 1, md: '0 0 33%' } }}>
+            <Paper sx={{ p: 3, textAlign: 'center' }}>
+              <Avatar
+                sx={{ width: 120, height: 120, mx: 'auto', mb: 2 }}
+                alt="Profile"
+                src="/static/images/avatar/2.jpg"
+              >
+                U
+              </Avatar>
+              <Typography variant="h6" sx={{ mb: 1 }}>
+                User Name
+              </Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                user@example.com
+              </Typography>
+              <Button variant="outlined" startIcon={<Edit />}>
+                Edit Profile
+              </Button>
+            </Paper>
+          </Box>
+          
+          <Box sx={{ flex: 1 }}>
+            <Paper sx={{ p: 3 }}>
+              <Typography variant="h6" sx={{ mb: 2 }}>
+                Account Settings
+              </Typography>
+              <Typography variant="body1" color="text.secondary">
+                Manage your account preferences and settings.
+              </Typography>
+            </Paper>
+          </Box>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default AccountPage;

src/pages/FeedPage.tsx

@@ -0,0 +1,18 @@
+import { Box, Typography, Container } from '@mui/material';
+
+const FeedPage = () => {
+  return (
+    <Container maxWidth="lg">
+      <Box sx={{ py: 4 }}>
+        <Typography variant="h4" sx={{ mb: 3, fontWeight: 600 }}>
+          Feed
+        </Typography>
+        <Typography variant="body1" color="text.secondary">
+          Your personalized network feed will appear here.
+        </Typography>
+      </Box>
+    </Container>
+  );
+};
+
+export default FeedPage;

src/pages/MessagesPage.tsx

@@ -0,0 +1,18 @@
+import { Box, Typography, Container } from '@mui/material';
+
+const MessagesPage = () => {
+  return (
+    <Container maxWidth="lg">
+      <Box sx={{ py: 4 }}>
+        <Typography variant="h4" sx={{ mb: 3, fontWeight: 600 }}>
+          Messages
+        </Typography>
+        <Typography variant="body1" color="text.secondary">
+          Your messages and conversations will appear here.
+        </Typography>
+      </Box>
+    </Container>
+  );
+};
+
+export default MessagesPage;

src/pages/PostsOffersPage.tsx

@@ -0,0 +1,18 @@
+import { Box, Typography, Container } from '@mui/material';
+
+const PostsOffersPage = () => {
+  return (
+    <Container maxWidth="lg">
+      <Box sx={{ py: 4 }}>
+        <Typography variant="h4" sx={{ mb: 3, fontWeight: 600 }}>
+          Posts & Offers
+        </Typography>
+        <Typography variant="body1" color="text.secondary">
+          Share posts and view offers from your network.
+        </Typography>
+      </Box>
+    </Container>
+  );
+};
+
+export default PostsOffersPage;