Skip to content

Commit 9da5a4d

Browse files
srcdevsrcdev
committed
SiteNavigation - Demo page updated to have heavy payload
1 parent 206a985 commit 9da5a4d

6 files changed

Lines changed: 254 additions & 8 deletions

File tree

‎app/layouts/site-navigation-demo.vue‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,4 +66,107 @@ const navItemData: NavItemData = {
6666
width: 100%;
6767
}
6868
}
69+
70+
/* Shared demo page styles */
71+
.snav-demo-page {
72+
h1, h2, h3 {
73+
margin-block-end: 1.6rem;
74+
}
75+
h2 {
76+
margin-block-start: 4rem;
77+
}
78+
> p {
79+
margin-block-end: 2.4rem;
80+
line-height: 1.6;
81+
}
82+
ul {
83+
padding-inline-start: 2rem;
84+
margin-block-end: 2.4rem;
85+
line-height: 2;
86+
}
87+
}
88+
89+
.snav-demo-hero {
90+
width: 100%;
91+
height: auto;
92+
aspect-ratio: 2 / 1;
93+
object-fit: cover;
94+
border-radius: 0.8rem;
95+
display: block;
96+
margin-block-end: 2.4rem;
97+
}
98+
99+
.snav-demo-grid {
100+
display: grid;
101+
grid-template-columns: repeat(3, 1fr);
102+
gap: 1.6rem;
103+
104+
&--wide {
105+
grid-template-columns: repeat(2, 1fr);
106+
}
107+
108+
@media (max-width: 600px) {
109+
grid-template-columns: repeat(2, 1fr);
110+
&--wide {
111+
grid-template-columns: 1fr;
112+
}
113+
}
114+
}
115+
116+
.snav-demo-img {
117+
width: 100%;
118+
height: auto;
119+
aspect-ratio: 3 / 2;
120+
object-fit: cover;
121+
border-radius: 0.4rem;
122+
display: block;
123+
}
124+
125+
.snav-demo-split {
126+
display: grid;
127+
grid-template-columns: 1fr 1fr;
128+
gap: 3.2rem;
129+
align-items: start;
130+
margin-block-end: 4rem;
131+
132+
&__text {
133+
h2, h3 { margin-block-start: 2.4rem; }
134+
p { line-height: 1.6; margin-block-end: 1.6rem; }
135+
}
136+
137+
&__img {
138+
width: 100%;
139+
height: auto;
140+
aspect-ratio: 3 / 4;
141+
object-fit: cover;
142+
border-radius: 0.4rem;
143+
display: block;
144+
}
145+
146+
@media (max-width: 650px) {
147+
grid-template-columns: 1fr;
148+
}
149+
}
150+
151+
.snav-demo-services {
152+
display: grid;
153+
grid-template-columns: repeat(3, 1fr);
154+
gap: 2.4rem;
155+
156+
@media (max-width: 650px) {
157+
grid-template-columns: 1fr;
158+
}
159+
}
160+
161+
.snav-demo-service-card {
162+
border-radius: 0.8rem;
163+
overflow: hidden;
164+
background: oklch(100% 0 0 / 5%);
165+
166+
&__body {
167+
padding: 1.6rem;
168+
h3 { margin-block-end: 0.8rem; }
169+
p { font-size: 1.4rem; line-height: 1.6; opacity: 0.8; }
170+
}
171+
}
69172
</style>

‎app/pages/ui/navigation/site-navigation/about.vue‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,32 @@
11
<template>
2-
<div>
2+
<div class="snav-demo-page">
33
<h1>About</h1>
4-
<p>This is the About page. The active indicator in the navigation above should be sitting under "About".</p>
4+
<p>This is the About page. The active indicator in the navigation above should be sitting under "About". Lots of images below to simulate a content-heavy page.</p>
5+
6+
<div class="snav-demo-split">
7+
<div class="snav-demo-split__text">
8+
<h2>Our Story</h2>
9+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
10+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
11+
<h2>Our Team</h2>
12+
<p>We are a team of dedicated professionals committed to delivering the best experience. Our combined expertise spans design, development, and user experience research.</p>
13+
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
14+
</div>
15+
<NuxtImg src="/images/rotating-carousel/image-1.webp" alt="About hero" width="600" height="800" loading="eager" class="snav-demo-split__img" />
16+
</div>
17+
18+
<h2>Gallery</h2>
19+
<div class="snav-demo-grid">
20+
<NuxtImg v-for="n in 9" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`About gallery ${n}`" width="600" height="400" loading="lazy" class="snav-demo-img" />
21+
</div>
22+
23+
<h2>Behind the scenes</h2>
24+
<div class="snav-demo-grid snav-demo-grid--wide">
25+
<NuxtImg src="/images/banners/banner-ginger.jpeg" alt="Behind the scenes 1" width="800" height="500" loading="lazy" class="snav-demo-img" />
26+
<NuxtImg src="/images/banners/banner-mid-brown.webp" alt="Behind the scenes 2" width="800" height="500" loading="lazy" class="snav-demo-img" />
27+
<NuxtImg src="/images/page/hero/hero-dark.jpg" alt="Behind the scenes 3" width="800" height="500" loading="lazy" class="snav-demo-img" />
28+
<NuxtImg src="/images/page/hero/hero-red.jpg" alt="Behind the scenes 4" width="800" height="500" loading="lazy" class="snav-demo-img" />
29+
</div>
530
</div>
631
</template>
732

‎app/pages/ui/navigation/site-navigation/contact.vue‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,35 @@
11
<template>
2-
<div>
2+
<div class="snav-demo-page">
33
<h1>Contact</h1>
44
<p>This is the Contact page. The active indicator in the navigation above should be sitting under "Contact".</p>
5+
6+
<div class="snav-demo-split">
7+
<div class="snav-demo-split__text">
8+
<h2>Get in Touch</h2>
9+
<p>We'd love to hear from you. Whether you have a question about our services, want to book an appointment, or just want to say hello — our door is always open.</p>
10+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
11+
<h3>Opening Hours</h3>
12+
<ul>
13+
<li>Monday – Friday: 9am – 7pm</li>
14+
<li>Saturday: 9am – 5pm</li>
15+
<li>Sunday: Closed</li>
16+
</ul>
17+
<h3>Address</h3>
18+
<p>123 Example Street<br />London, UK<br />EC1A 1BB</p>
19+
</div>
20+
<NuxtImg src="/images/rotating-carousel/55-woman-garden-backdrop.webp" alt="Contact hero" width="600" height="800" loading="eager" class="snav-demo-split__img" />
21+
</div>
22+
23+
<h2>Find Us</h2>
24+
<div class="snav-demo-grid snav-demo-grid--wide">
25+
<NuxtImg src="/images/rotating-carousel/image-5.webp" alt="Location 1" width="800" height="500" loading="lazy" class="snav-demo-img" />
26+
<NuxtImg src="/images/rotating-carousel/image-6.webp" alt="Location 2" width="800" height="500" loading="lazy" class="snav-demo-img" />
27+
</div>
28+
29+
<h2>Instagram</h2>
30+
<div class="snav-demo-grid">
31+
<NuxtImg v-for="n in [1, 2, 3, 7, 8, 9]" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`Instagram post ${n}`" width="600" height="600" loading="lazy" class="snav-demo-img snav-demo-img--square" />
32+
</div>
533
</div>
634
</template>
735

‎app/pages/ui/navigation/site-navigation/index.vue‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,34 @@
11
<template>
2-
<div>
2+
<div class="snav-demo-page">
33
<h1>Home</h1>
4-
<p>Welcome to the SiteNavigation component demo. Resize the window to see the burger menu collapse, and navigate between pages to see the active indicator update.</p>
4+
<p>Welcome to the SiteNavigation component demo. Resize the window to see the burger menu collapse, and navigate between pages to see the active indicator update. This page is intentionally heavy with images to stress-test nav behaviour during loading.</p>
5+
6+
<NuxtImg
7+
src="/images/banners/banner-ginger.jpeg"
8+
alt="Hero banner"
9+
width="1200"
10+
height="600"
11+
loading="eager"
12+
class="snav-demo-hero"
13+
/>
14+
15+
<h2>Featured Gallery</h2>
16+
<div class="snav-demo-grid">
17+
<NuxtImg v-for="n in 9" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`Gallery image ${n}`" width="600" height="400" loading="lazy" class="snav-demo-img" />
18+
</div>
19+
20+
<h2>More Images</h2>
21+
<div class="snav-demo-grid snav-demo-grid--wide">
22+
<NuxtImg src="/images/banners/banner-light-brunette.webp" alt="Banner light brunette" width="800" height="500" loading="lazy" class="snav-demo-img" />
23+
<NuxtImg src="/images/banners/banner-mid-brown.webp" alt="Banner mid brown" width="800" height="500" loading="lazy" class="snav-demo-img" />
24+
<NuxtImg src="/images/rotating-carousel/35-light-brown-highlights.webp" alt="Light brown highlights" width="800" height="500" loading="lazy" class="snav-demo-img" />
25+
<NuxtImg src="/images/rotating-carousel/55-woman-garden-backdrop.webp" alt="Woman garden backdrop" width="800" height="500" loading="lazy" class="snav-demo-img" />
26+
</div>
27+
28+
<h2>Hero Images</h2>
29+
<div class="snav-demo-grid">
30+
<NuxtImg v-for="hero in ['hero-blonde', 'hero-dark', 'hero-hair', 'hero-red']" :key="hero" :src="`/images/page/hero/${hero}.jpg`" :alt="hero" width="600" height="400" loading="lazy" class="snav-demo-img" />
31+
</div>
532
</div>
633
</template>
734

‎app/pages/ui/navigation/site-navigation/portfolio.vue‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,43 @@
11
<template>
2-
<div>
2+
<div class="snav-demo-page">
33
<h1>Portfolio</h1>
4-
<p>This is the Portfolio page. The active indicator in the navigation above should be sitting under "Portfolio".</p>
4+
<p>This is the Portfolio page. The active indicator in the navigation above should be sitting under "Portfolio". Maximum image load to stress-test navigation behaviour.</p>
5+
6+
<h2>Spotlight Work</h2>
7+
<div class="snav-demo-grid snav-demo-grid--dense">
8+
<NuxtImg v-for="n in 9" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`Portfolio piece ${n}`" width="600" height="600" loading="lazy" class="snav-demo-img snav-demo-img--square" />
9+
</div>
10+
11+
<h2>Featured Looks</h2>
12+
<div class="snav-demo-grid snav-demo-grid--wide">
13+
<NuxtImg src="/images/banners/banner-ginger.jpeg" alt="Ginger look" width="800" height="500" loading="lazy" class="snav-demo-img" />
14+
<NuxtImg src="/images/banners/banner-light-brunette.webp" alt="Light brunette look" width="800" height="500" loading="lazy" class="snav-demo-img" />
15+
<NuxtImg src="/images/banners/banner-mid-brown.webp" alt="Mid brown look" width="800" height="500" loading="lazy" class="snav-demo-img" />
16+
<NuxtImg src="/images/rotating-carousel/35-light-brown-highlights.webp" alt="Light brown highlights" width="800" height="500" loading="lazy" class="snav-demo-img" />
17+
<NuxtImg src="/images/rotating-carousel/55-woman-garden-backdrop.webp" alt="Garden backdrop" width="800" height="500" loading="lazy" class="snav-demo-img" />
18+
<NuxtImg src="/images/rotating-carousel/indian-pink-stripe.webp" alt="Pink stripe" width="800" height="500" loading="lazy" class="snav-demo-img" />
19+
<NuxtImg src="/images/rotating-carousel/spanish-green-stripe.webp" alt="Green stripe" width="800" height="500" loading="lazy" class="snav-demo-img" />
20+
</div>
21+
22+
<h2>Hero Series</h2>
23+
<div class="snav-demo-grid">
24+
<NuxtImg v-for="hero in ['hero-blonde', 'hero-dark', 'hero-hair', 'hero-red']" :key="hero" :src="`/images/page/hero/${hero}.jpg`" :alt="hero" width="600" height="400" loading="lazy" class="snav-demo-img" />
25+
</div>
526
</div>
627
</template>
728

829
<script setup lang="ts">
930
definePageMeta({ layout: "site-navigation-demo" });
1031
useHead({ title: "SiteNavigation Demo — Portfolio" });
1132
</script>
33+
34+
<style lang="css">
35+
.snav-demo-img--square {
36+
aspect-ratio: 1 / 1;
37+
}
38+
39+
.snav-demo-grid--dense {
40+
grid-template-columns: repeat(3, 1fr);
41+
gap: 0.8rem;
42+
}
43+
</style>

‎app/pages/ui/navigation/site-navigation/services.vue‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,42 @@
11
<template>
2-
<div>
2+
<div class="snav-demo-page">
33
<h1>Services</h1>
44
<p>This is the Services page. The active indicator in the navigation above should be sitting under "Services".</p>
5+
6+
<NuxtImg
7+
src="/images/banners/banner-light-brunette.webp"
8+
alt="Services banner"
9+
width="1200"
10+
height="500"
11+
loading="eager"
12+
class="snav-demo-hero"
13+
/>
14+
15+
<h2>What We Offer</h2>
16+
<div class="snav-demo-services">
17+
<div v-for="(service, i) in services" :key="i" class="snav-demo-service-card">
18+
<NuxtImg :src="service.img" :alt="service.title" width="600" height="400" loading="lazy" class="snav-demo-img" />
19+
<div class="snav-demo-service-card__body">
20+
<h3>{{ service.title }}</h3>
21+
<p>{{ service.description }}</p>
22+
</div>
23+
</div>
24+
</div>
25+
26+
<h2>Our Work</h2>
27+
<div class="snav-demo-grid">
28+
<NuxtImg v-for="n in [4, 5, 6, 7, 8, 9]" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`Work sample ${n}`" width="600" height="400" loading="lazy" class="snav-demo-img" />
29+
</div>
530
</div>
631
</template>
732

833
<script setup lang="ts">
934
definePageMeta({ layout: "site-navigation-demo" });
1035
useHead({ title: "SiteNavigation Demo — Services" });
36+
37+
const services = [
38+
{ title: "Colour", img: "/images/rotating-carousel/image-1.webp", description: "From subtle highlights to bold transformations. Our colour specialists use only the finest products for vibrant, lasting results." },
39+
{ title: "Cut & Style", img: "/images/rotating-carousel/image-2.webp", description: "Precision cuts tailored to your face shape and lifestyle. Walk out feeling confident every single time." },
40+
{ title: "Treatment", img: "/images/rotating-carousel/image-3.webp", description: "Restore shine and health with our premium treatment range. Ideal for damaged, dry, or colour-treated hair." },
41+
];
1142
</script>

0 commit comments

Comments
 (0)