save the selected city to localstorage

src/components/CitySelectionDialog.tsx

@@ -20,6 +20,9 @@ interface CitySelectionDialogProps {
   onCitySelect?: (cityId: string) => void; // ✅ Updated to pass cityId
 }
 
+export const slugify = (name: string | null) =>
+  name?.toLowerCase().replace(/\s+/g, '-');
+
 export function CitySelectionDialog({
   isOpen,
   onClose,
@@ -41,13 +44,17 @@ export function CitySelectionDialog({
     );
   }
 
-
   const handleCityClick = (city: City) => {
     console.log('Selected city:', city.cityName);
 
     // ✅ Call the onCitySelect callback if provided (passing cityId)
     if (onCitySelect) {
-      onCitySelect(String(city.cityName));
+      // onCitySelect(String(city.cityName));
+      // navigate(`/${city.cityName}/${city.id}`)
+
+      navigate(`/${slugify(city.cityName)}/${city.id}`);
+      localStorage.setItem("cityId", String(city.id))
+      localStorage.setItem("cityName", String(city.cityName))
     } else {
       // ✅ Default behavior: navigate to passes page
       navigate(`/passes?city=${encodeURIComponent(city.cityName)}`);

src/components/Navbar.tsx

@@ -8,7 +8,7 @@ import { ImageWithFallback } from './figma/ImageWithFallback';
 import { CTAButton } from './CTAButton';
 import logoImage from '../assets/cit-logo.png';
 import melbourneLogo from '../assets/melbourne-logo.png';
-import { CitySelectionDialog } from './CitySelectionDialog';
+import { CitySelectionDialog, slugify } from './CitySelectionDialog';
 import { useAuth } from '../context/AuthContext';
 import { LoginModal } from './LoginModal';
 
@@ -104,6 +104,8 @@ export default function Navbar({
     }
   };
 
+  const cityId = localStorage.getItem("cityId")
+  const cityName = localStorage.getItem("cityName")
 
   // More flexible navigation configuration
   const navigationConfig = {
@@ -129,20 +131,20 @@ export default function Navbar({
         isShared: false
       },
       // Position 4 - Shared item
-      {
-        label: 'Your Card',
-        path: '/passes',
-        isShared: true,
-        landingLabel: 'Your Card',
-        melbourneLabel: 'Your Card'
-      },
+      // {
+      //   label: 'Your Card',
+      //   path: '/passes',
+      //   isShared: true,
+      //   landingLabel: 'Your Card',
+      //   melbourneLabel: 'Your Card'
+      // },
       // Position 5
       {
         label: 'FAQ',
         path: '/faq',
         isShared: false
       },
-       {
+      {
         label: 'Your Postcard',
         path: '/postcards',
         isShared: true,
@@ -154,7 +156,7 @@ export default function Navbar({
       // Position 1
       {
         label: 'Attractions',
-        path: '/attractions',
+        path: `/${slugify(cityName)}/${cityId}/attractions`,
         isShared: false
       },
       // Position 2
@@ -185,7 +187,7 @@ export default function Navbar({
         landingLabel: 'Your Card',
         melbourneLabel: 'Your Card'
       },
-        {
+      {
         label: 'Your Postcard',
         path: '/postcards',
         isShared: true,
@@ -559,7 +561,7 @@ export default function Navbar({
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
               >
-                <Link to={currentSource === 'melbourne' ? '/melbourne' : '/'}>
+                <Link to={currentSource === 'melbourne' ? '/' : '/'}>
                   <ImageWithFallback
                     src={currentSource === 'melbourne' ? melbourneLogo : logoImage}
                     alt={