feat: move the framework selection into the side menu instead of comp…

…onent page header In this way, it is easier to understand that the framework selected is global for your documentation
AmadeusITGroup · Jan 11, 2024 · 71821e1 · 71821e1
1 parent 4300462
commit 71821e1
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 52 deletions.
diff --git a/demo/src/lib/layout/Header.svelte b/demo/src/lib/layout/Header.svelte
@@ -1,40 +1,13 @@
 <script lang="ts">
-	import {pathToRoot$, frameworkLessUrl$, selectedFramework$} from '../stores';
-
+	import {pathToRoot$, selectedFramework$} from '../stores';
 	export let title: string;
 	export let tabs: {title: string; key: string; path: string}[];
 	export let tab = '';
-
-	$: isAngular = $selectedFramework$ === 'angular';
-	$: isReact = $selectedFramework$ === 'react';
-	$: isSvelte = $selectedFramework$ === 'svelte';
 </script>
 
 <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>
-		<div class="col flex-grow-0">
-			<div class="btn-group btn-group-sm me-2 bg-white" role="group" aria-label="Basic radio toggle button group">
-				<a
-					href={`${$pathToRoot$}angular/${$frameworkLessUrl$}`}
-					class="btn btn-outline-primary"
-					class:active={isAngular}
-					aria-current={!isAngular || 'page'}>Angular</a
-				>
-				<a
-					href={`${$pathToRoot$}react/${$frameworkLessUrl$}`}
-					class="btn btn-outline-primary"
-					class:active={isReact}
-					aria-current={!isReact || 'page'}>React</a
-				>
-				<a
-					href={`${$pathToRoot$}svelte/${$frameworkLessUrl$}`}
-					class="btn btn-outline-primary"
-					class:active={isSvelte}
-					aria-current={!isSvelte || 'page'}>Svelte</a
-				>
-			</div>
-		</div>
 	</div>
 	<ul class="nav-tabs px-4 px-lg-5 content-tabset justify-content-start nav" role="tablist">
 		{#each tabs as { title, key, path }}

diff --git a/demo/src/routes/[framework]/getting-started/installation/+page.svelte b/demo/src/routes/[framework]/getting-started/installation/+page.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
 	import {selectedFramework$} from '$lib/stores';
 	import Code from '$lib/layout/Code.svelte';
-	import {pathToRoot$, frameworkLessUrl$} from '$lib/stores';
 	import Section from '$lib/layout/Section.svelte';
-	$: isAngular = $selectedFramework$ === 'angular';
-	$: isReact = $selectedFramework$ === 'react';
-	$: isSvelte = $selectedFramework$ === 'svelte';
+
 	$: capitalizedFramework = $selectedFramework$?.[0]?.toUpperCase() + $selectedFramework$?.substring(1);
 
 	$: fwkDir = `./fwk/${$selectedFramework$}/`;
@@ -20,25 +17,6 @@
 <!-- TODO refactor it with the header part to use the same component -->
 <div class="row mb-4 align-items-center">
 	<h1 class="col-auto me-auto me-md-none mb-0 p-3">AgnosUI <span class="text-capitalize">{$selectedFramework$}</span> Installation Guide</h1>
-	<div class="col flex-grow-0">
-		<div class="btn-group btn-group-sm me-2 bg-white" role="group" aria-label="Basic radio toggle button group">
-			<a
-				href={`${$pathToRoot$}angular/${$frameworkLessUrl$}`}
-				class="btn btn-outline-primary"
-				class:active={isAngular}
-				aria-current={!isAngular || 'page'}>Angular</a
-			>
-			<a href={`${$pathToRoot$}react/${$frameworkLessUrl$}`} class="btn btn-outline-primary" class:active={isReact} aria-current={!isReact || 'page'}
-				>React</a
-			>
-			<a
-				href={`${$pathToRoot$}svelte/${$frameworkLessUrl$}`}
-				class="btn btn-outline-primary"
-				class:active={isSvelte}
-				aria-current={!isSvelte || 'page'}>Svelte</a
-			>
-		</div>
-	</div>
 </div>
 
 <Section label="Prerequisites" id="Prerequisites" level={2}>

diff --git a/demo/src/routes/[framework]/menu/SideMenu.svelte b/demo/src/routes/[framework]/menu/SideMenu.svelte
@@ -1,12 +1,36 @@
 <script lang="ts">
 	import {page} from '$app/stores';
 	import {menu} from '../../navigation';
-	import {pathToRoot$, selectedFramework$} from '$lib/stores';
+	import {pathToRoot$, frameworkLessUrl$, selectedFramework$} from '$lib/stores';
 
 	import './menu.scss';
+
+	$: isAngular = $selectedFramework$ === 'angular';
+	$: isReact = $selectedFramework$ === 'react';
+	$: isSvelte = $selectedFramework$ === 'svelte';
 </script>
 
 <nav class="w-100 mt-1">
+	<strong class="d-flex w-100 align-items-center fw-semibold">Framework </strong>
+	<div class="col flex-grow-0">
+		<div class="btn-group btn-group-sm me-2 my-2 bg-white" role="group" aria-label="Basic radio toggle button group">
+			<a
+				href={`${$pathToRoot$}angular/${$frameworkLessUrl$}`}
+				class="btn btn-outline-primary"
+				class:active={isAngular}
+				aria-current={!isAngular || 'page'}>Angular</a
+			>
+			<a href={`${$pathToRoot$}react/${$frameworkLessUrl$}`} class="btn btn-outline-primary" class:active={isReact} aria-current={!isReact || 'page'}
+				>React</a
+			>
+			<a
+				href={`${$pathToRoot$}svelte/${$frameworkLessUrl$}`}
+				class="btn btn-outline-primary"
+				class:active={isSvelte}
+				aria-current={!isSvelte || 'page'}>Svelte</a
+			>
+		</div>
+	</div>
 	{#each menu as { title, submenu }}
 		<strong class="d-flex w-100 align-items-center fw-semibold">{title}</strong>
 		<div class="my-2">