feat: improved look of header when viewing a page with no tabs

AmadeusITGroup · Jan 22, 2024 · 7886804 · 7886804
1 parent 422cff6
commit 7886804
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 22 deletions.
diff --git a/demo/src/lib/layout/Header.svelte b/demo/src/lib/layout/Header.svelte
@@ -12,24 +12,26 @@
 	<title>{getTitle(title, $selectedFramework$)}</title>
 </svelte:head>
 
-<header class="bg-light pt-4 pb-5 px-4 px-lg-5 d-flex mb-4 align-items-center title">
-	<div class="row mb-4 align-items-center w-100">
-		<h1 class="col-auto me-auto me-md-none mb-0 p-3">{title}</h1>
+<header class="bg-light pt-4 px-4 px-lg-5 d-flex mb-4 align-items-center title" class:pb-5={tabs.length} class:pb-4={!tabs.length}>
+	<div class="row align-items-center w-100" class:pb-4={tabs.length}>
+		<h1 class="col-auto me-auto me-md-none mb-0 p-0 p-md-3 text-center text-md-start w-100">{title}</h1>
 	</div>
-	<ul class="nav-tabs px-4 px-lg-5 content-tabset justify-content-start nav" role="tablist">
-		{#each tabs as { title, key, path }}
-			{@const isActive = $selectedTabName$ === key}
-			<li class="nav-item" role="presentation">
-				<a
-					href={`${$pathToRoot$}docs/${$selectedFramework$}${path}`}
-					role="tab"
-					class="nav-link link-body-emphasis"
-					aria-selected={isActive}
-					class:active={isActive}
-				>
-					{title}
-				</a>
-			</li>
-		{/each}
-	</ul>
+	{#if tabs.length}
+		<ul class="nav-tabs px-4 px-lg-5 content-tabset justify-content-start nav" role="tablist">
+			{#each tabs as { title, key, path }}
+				{@const isActive = $selectedTabName$ === key}
+				<li class="nav-item" role="presentation">
+					<a
+						href={`${$pathToRoot$}docs/${$selectedFramework$}${path}`}
+						role="tab"
+						class="nav-link link-body-emphasis"
+						aria-selected={isActive}
+						class:active={isActive}
+					>
+						{title}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{/if}
 </header>
diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte
@@ -6,7 +6,7 @@
 	import {/*canonicalURL$,*/ pathToRoot$, routeLevel$} from '$lib/stores';
 	import './styles.scss';
 	import {beforeNavigate, onNavigate} from '$app/navigation';
-	import {updated} from '$app/stores';
+	import {page, updated} from '$app/stores';
 	import {onMount} from 'svelte';
 	import MobileSubMenu from './menu/MobileSubMenu.svelte';
 	import MobileMenu from './menu/MobileMenu.svelte';
@@ -56,8 +56,18 @@
 			<a class="navbar-brand" href={$pathToRoot$}> AgnosUI </a>
 			<div class="align-items-center d-none d-md-flex">
 				<div class="d-flex align-items-center"></div>
-				<a class="nav-link text-white ms-3" href="{$pathToRoot$}docs/angular/getting-started/installation">Documentation</a>
-				<a class="nav-link text-white ms-3" href="{$pathToRoot$}blog/2024-01-12">Blog</a>
+				<a
+					class="nav-link text-white ms-3"
+					href="{$pathToRoot$}docs/angular/getting-started/installation"
+					class:active={$page.route.id?.startsWith('/docs/')}
+					aria-current={$page.route.id?.startsWith('/docs/') ? 'page' : undefined}>Documentation</a
+				>
+				<a
+					class="nav-link text-white ms-3"
+					href="{$pathToRoot$}blog/2024-01-12"
+					class:active={$page.route.id?.startsWith('/blog/')}
+					aria-current={$page.route.id?.startsWith('/blog/') ? 'page' : undefined}>Blog</a
+				>
 				<a class="nav-link text-white ms-3" href="https://github.com/AmadeusITGroup/AgnosUI" aria-label="link to GitHub repository" target="_blank">
 					<Svg className="icon-24 align-middle" svg={github} />
 				</a>
@@ -102,6 +112,10 @@
 <style lang="scss">
 	@import '@agnos-ui/common/variables';
 
+	.nav-link.active {
+		font-weight: 600;
+	}
+
 	.agnos-ui {
 		width: 100vw;
 		height: 100dvh;