From 509b90ecd29ea2ff55415c0818c81400ca264604 Mon Sep 17 00:00:00 2001
From: Quentin Deroubaix <139884126+quentinderoubaix@users.noreply.github.com>
Date: Mon, 31 Jul 2023 11:08:31 +0200
Subject: [PATCH] fix: landing page on mobile #35 (#36)

---
 demo/src/lib/layout/Header.svelte          |  4 ++--
 demo/src/routes/+layout.svelte             |  6 +++++-
 demo/src/routes/+page.svelte               |  2 +-
 demo/src/routes/[framework]/+layout.svelte | 14 ++++++++++++--
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/demo/src/lib/layout/Header.svelte b/demo/src/lib/layout/Header.svelte
index 3f4d331d19..5208f00ade 100644
--- a/demo/src/lib/layout/Header.svelte
+++ b/demo/src/lib/layout/Header.svelte
@@ -11,7 +11,7 @@
 	$: isSvelte = $selectedFramework$ === 'svelte';
 </script>
 
-<header class="bg-light pt-4 pb-md-5 px-4 px-lg-5 d-flex mb-3 d-md-block align-items-center title">
+<header class="bg-light pt-4 pb-5 px-4 px-lg-5 d-flex mb-3 d-md-block align-items-center title">
 	<div class="row mb-4 align-items-end">
 		<h1 class="col-auto me-auto me-md-none mb-0">{title}</h1>
 		<div class="col">
@@ -37,7 +37,7 @@
 			</div>
 		</div>
 	</div>
-	<ul class="nav-tabs px-4 px-lg-5 content-tabset justify-content-md-start justify-content-end nav" role="tablist">
+	<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 = tab === key}
 			<li class="nav-item" role="presentation">
diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte
index 062a37555f..f7843178f1 100644
--- a/demo/src/routes/+layout.svelte
+++ b/demo/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
 	import Svg from '$lib/layout/Svg.svelte';
 	import github from 'bootstrap-icons/icons/github.svg?raw';
 	import twitter from 'bootstrap-icons/icons/twitter.svg?raw';
+	import coneStriped from 'bootstrap-icons/icons/cone-striped.svg?raw';
 	import 'bootstrap/dist/css/bootstrap.css';
 	import {/*canonicalURL$,*/ pathToRoot$} from '../lib/stores';
 	import './styles.scss';
@@ -18,7 +19,10 @@
 		<div class="container-fluid">
 			<a class="navbar-brand" href={$pathToRoot$}> AgnosUI </a>
 			<div class="d-flex align-items-center">
-				<span class="badge bg-warning text-bg-warning">Work In Progress</span>
+				<span class="badge bg-warning text-bg-warning d-none d-sm-block">Work In Progress</span>
+				<span class="badge rounded-pill bg-warning text-bg-warning d-block d-sm-none" aria-label="Work In Progress">
+					<Svg className="icon-20 align-middle" svg={coneStriped} />
+				</span>
 				<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>
diff --git a/demo/src/routes/+page.svelte b/demo/src/routes/+page.svelte
index bec621b2d2..03461d4588 100644
--- a/demo/src/routes/+page.svelte
+++ b/demo/src/routes/+page.svelte
@@ -41,7 +41,7 @@
 		font-weight: 300;
 	}
 	.links {
-		padding: 1rem;
+		padding: 1rem 0rem;
 		@media (min-width: 768px) {
 			padding: 3rem;
 		}
diff --git a/demo/src/routes/[framework]/+layout.svelte b/demo/src/routes/[framework]/+layout.svelte
index f3973ee8e4..ab62c9b827 100644
--- a/demo/src/routes/[framework]/+layout.svelte
+++ b/demo/src/routes/[framework]/+layout.svelte
@@ -5,10 +5,10 @@
 	import {menu} from '../navigation';
 </script>
 
-<div class="container-fluid demo-gutter demo-layout">
+<div class="demo-layout">
 	<aside class="demo-sidebar">
 		<nav class="w-100">
-			<ul class="list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
+			<ul class="list-unstyled mb-0 pb-0 pb-md-2 pe-lg-2 main-nav-list">
 				{#each menu as { title, submenu }}
 					<li class="py-2" id="sidenav-{title}">
 						<strong class="d-flex w-100 align-items-center fw-semibold">{title}</strong>
@@ -36,3 +36,13 @@
 		<slot />
 	</div>
 </div>
+
+<style lang="scss">
+	.main-nav-list {
+		@media (max-width: 992px) {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-evenly;
+		}
+	}
+</style>