Skip to content

[Issue #3] Header & Navigation Update #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nichanunpong merged 2 commits into from
Mar 29, 2026
+112 −39
Merged

[Issue #3] Header & Navigation Update #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
29468d2
Refactor navigation and hero to use dynamic city-based CTAs (Issue #3)
ahmad1368 Mar 25, 2026
0b02dd9
Merge branch 'staging' into feature/issue-3-header-navigation
nichanunpong Mar 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 22 additions & 3 deletions src/components/Hero.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ interface Props {
}

const { content, splineUrl = '' } = Astro.props;


---

<section class="hero">
Expand All @@ -27,15 +29,18 @@ const { content, splineUrl = '' } = Astro.props;
<p class="hero-time">{content.time}</p>
</div>
<div class="hero-actions">
<a href={content.primaryCta.href} class="btn btn-primary">{content.primaryCta.text}</a>
<a href={content.secondaryCta.href} class="btn btn-secondary">{content.secondaryCta.text}</a>
<a href={content.primaryCta.href} class="btn btn-primary" data-hero-primary-Cta>{content.primaryCta.text}</a>
<!-- <a href={content.secondaryCta.href} class="btn btn-secondary">{content.secondaryCta.text}</a> -->


</div>
</div>
</section>

<script is:inline type="module" src="https://unpkg.com/@splinetool/viewer@1.9.48/build/spline-viewer.js"></script>

<script>

import { getCityStore } from '../lib/cityStore';
import { heroContent } from '../lib/content';

Expand All @@ -47,10 +52,13 @@ const { content, splineUrl = '' } = Astro.props;
const subtitleEl = document.querySelector('[data-city-subtitle]');
const descriptionEl = document.querySelector('[data-city-description]');
const metaEl = document.querySelector('[data-city-meta]');
const ctaButton = document.querySelector('[data-hero-primary-Cta]');


function updateContent(city: 'vancouver' | 'toronto') {
const content = heroContent[city];



if (titleEl) titleEl.textContent = content.title;
if (cityNameEl) cityNameEl.textContent = content.cityName;
if (subtitleEl) subtitleEl.textContent = content.subtitle;
Expand All @@ -68,6 +76,16 @@ const { content, splineUrl = '' } = Astro.props;
if (timeEl) timeEl.textContent = content.time;
}



if (ctaButton) {
ctaButton.href = content.primaryCta.href;
ctaButton.textContent = content.primaryCta.text;
}

// Update page title
document.title = `${content.title} - ${content.cityName}`;

}

// Initial update
Expand Down Expand Up @@ -95,6 +113,7 @@ const { content, splineUrl = '' } = Astro.props;
});
}
*/

</script>

<style>
Expand Down
74 changes: 51 additions & 23 deletions src/components/Navigation.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
import CitySelector from './CitySelector.astro';
import type { NavigationContent } from '../lib/content';
import CitySelector from "./CitySelector.astro";
import type { NavigationContent } from "../lib/content";

interface Props {
content: NavigationContent;
Expand All @@ -12,7 +12,11 @@ const { content } = Astro.props;
<nav class="nav">
<div class="nav-container">
<a href="/" class="nav-logo">
<img src="/images/Cloud-summit-logo.svg" alt="Cloud Summit 2026" class="nav-logo-img" />
<img
src="/images/Cloud-summit-logo.svg"
alt="Cloud Summit 2026"
class="nav-logo-img"
/>
</a>
<button class="hamburger" aria-label="Toggle menu">
<span></span>
Expand All @@ -21,43 +25,67 @@ const { content } = Astro.props;
</button>
<div class="nav-right">
<ul class="nav-links">
{content.links.map(link => (
<li><a href={link.href} target={link.href.startsWith('http') ? '_blank' : undefined} rel={link.href.startsWith('http') ? 'noopener noreferrer' : undefined}>{link.text}</a></li>
))}
{
content.links.map((link) => (
<li>
<a
href={link.href}
target={
link.href.startsWith("http")
? "_blank"
: undefined
}
rel={
link.href.startsWith("http")
? "noopener noreferrer"
: undefined
}
>
{link.text}
</a>
</li>
))
}
</ul>
<CitySelector />
<a href={content.ctaHref} class="nav-cta">{content.ctaText}</a>
<!-- Disabled as part of Issue #3 (Header & Navigation update)
Reason: Old CTA removed according to new design requirements -->
<!-- <a href={content.ctaHref} class="nav-cta">{content.ctaText}</a> -->

<!-- <a href={content.ctaHref} class="nav-cta">{content.ctaText}</a> -->
</div>
</div>
</nav>

<script>
import { getCityStore } from '../lib/cityStore';
import { citySpecificContent } from '../lib/content';
import type { City } from '../lib/content';
import { getCityStore } from "../lib/cityStore";
import { citySpecificContent } from "../lib/content";
import type { City } from "../lib/content";

const hamburger = document.querySelector('.hamburger');
const navRight = document.querySelector('.nav-right');
const hamburger = document.querySelector(".hamburger");
const navRight = document.querySelector(".nav-right");

hamburger?.addEventListener('click', () => {
hamburger.classList.toggle('active');
navRight?.classList.toggle('active');
hamburger?.addEventListener("click", () => {
hamburger.classList.toggle("active");
navRight?.classList.toggle("active");
});

// Close menu when clicking on a link
const navLinks = document.querySelectorAll('.nav-links a, .nav-cta');
navLinks.forEach(link => {
link.addEventListener('click', () => {
hamburger?.classList.remove('active');
navRight?.classList.remove('active');
const navLinks = document.querySelectorAll(".nav-links a, .nav-cta");
navLinks.forEach((link) => {
link.addEventListener("click", () => {
hamburger?.classList.remove("active");
navRight?.classList.remove("active");
});
});

// Update ticket URL when city changes
function updateTicketUrl() {
const cityStore = getCityStore();
const currentCity = cityStore.getCity();
const ticketLink = document.querySelector('.nav-links a[href*="luma.com"]') as HTMLAnchorElement;
const ticketLink = document.querySelector(
'.nav-links a[href*="luma.com"]',
) as HTMLAnchorElement;

if (ticketLink) {
ticketLink.href = citySpecificContent[currentCity].ticketUrl;
Expand All @@ -79,8 +107,8 @@ const { content } = Astro.props;
}

// Run when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initCityAwareNav);
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initCityAwareNav);
} else {
initCityAwareNav();
}
Expand Down
52 changes: 39 additions & 13 deletions src/lib/content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ export interface NavLink {

export interface NavigationContent {
links: NavLink[];
ctaText: string;
ctaHref: string;
// ctaText: string; Disabled as part of Issue #3 (Header & Navigation update)
// ctaHref: string; Disabled as part of Issue #3 (Header & Navigation update)
}

export type City = 'vancouver' | 'toronto';
Expand Down Expand Up @@ -88,30 +88,56 @@ export function getHeroContent(city: City): HeroContent {
return {
...sharedHeroContent,
...citySpecificContent[city],
// Added as part of Issue #3 (Header & Navigation)
primaryCta: {
text: 'Get Your Ticket',
href: citySpecificContent[city].ticketUrl,
},
secondaryCta: {
text: '',
href: '',
},
};
}


// For backwards compatibility
export const heroContent: Record<City, HeroContent> = {
vancouver: getHeroContent('vancouver'),
toronto: getHeroContent('toronto'),
};

// Disabled as part of Issue #3 (Header & Navigation update)
// Reason: This button is removed according to new design requirements
// // Helper function to get navigation content with city-specific ticket URL
// export function getNavigationContent(city: City): NavigationContent {
// return {
// links: [
// { text: 'About Cloud Summit', href: '/about-cloud-summit' },
// // { text: 'Our Event Team', href: '/our-team' },
// { text: 'Call for Speakers', href: '/our-speakers' },
// { text: 'Sponsorship Info', href: '/our-sponsors' },
// {
// text: 'Get Earlybird Tickets',
// href: citySpecificContent[city].ticketUrl,
// },
// ],
// ctaText: 'Become a Sponsor',
// ctaHref: 'https://tally.so/r/wLqXvO',
// };

// }

// Added as part of Issue #3 (Header & Navigation)
// Reason: Replace old CTAs with new "Get Your Ticket" button
// Link is dynamic based on selected city
// Helper function to get navigation content with city-specific ticket URL
export function getNavigationContent(city: City): NavigationContent {
return {
links: [
{ text: 'About Cloud Summit', href: '/about-cloud-summit' },
// { text: 'Our Event Team', href: '/our-team' },
{ text: 'Call for Speakers', href: '/our-speakers' },
{ text: 'Sponsorship Info', href: '/our-sponsors' },
{
text: 'Get Earlybird Tickets',
href: citySpecificContent[city].ticketUrl,
},
],
ctaText: 'Become a Sponsor',
ctaHref: 'https://tally.so/r/wLqXvO',
{ text: 'Get Tickets', href: citySpecificContent[city].ticketUrl },
{ text: 'Apply to Volunteer', href: sharedHeroContent.primaryCta.href },
]
};
}

Expand Down