adapt with landing page #14

ouvroir · Sep 27, 2023 · d04f080 · d04f080
1 parent 6d05e12
commit d04f080
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/src/lib/components/LandingPage.svelte b/src/lib/components/LandingPage.svelte
@@ -113,7 +113,7 @@
 	/** Presentation */
 
 	.fill-vh {
-		height: 85vh;
+		height: 90vh;
 	}
 
 	.presentation-wrapper {

diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
@@ -43,13 +43,13 @@
 	let prevScrollY: number = 0;
 	const handleScroll = (e: Event) => {
 		const nav = document.querySelector('nav.main');
-		const top = nav?.getBoundingClientRect().top ?? 0;
-		// console.log({ top, scrollY });
+		const top = nav?.getBoundingClientRect().top ?? 500;
+		console.log({ top, scrollY });
 
 		if ($showPresentation) {
-			if (top === 0) {
+			if (top <= 0) {
+				nav?.classList.remove('bottom-nav');
 				$showPresentation = false;
-				$showPresentation = $showPresentation;
 			}
 		} else {
 			// if scrolling down
@@ -65,6 +65,8 @@
 		}
 	};
 
+	$: console.log('showPresentation', $showPresentation);
+
 	const toggleNavMenu = () => {
 		$showNavMenu = !$showNavMenu;
 	};
@@ -94,7 +96,7 @@
 {#if !smallScreen}
 	<nav
 		aria-labelledby={`${$t('aria.nav.label')}`}
-		class={`main ${$showPresentation ? 'add-bg' : ''}`}
+		class={`main ${$showPresentation ? 'bottom-nav' : ''}`}
 	>
 		<Ouvroir />
 		<NavLinks />
@@ -267,10 +269,6 @@
 		visibility: hidden;
 	}
 
-	.add-bg {
-		background-color: var(--bg-clr-presentation);
-	}
-
 	.add-bg * {
 		color: white;
 	}

diff --git a/src/lib/styles/style.css b/src/lib/styles/style.css
@@ -66,10 +66,21 @@ nav {
     padding-bottom: 1.2rem;
     max-height: 10vh;
     z-index: 3;
-    transition: all 0.3s ease;
+    transition: transform 0.3s ease;
     grid-auto-flow: dense !important;
 }
 
+.bottom-nav {
+    position: absolute;
+    top: 90vh;
+    background-color: var(--bg-clr-presentation);
+    transition: none;
+}
+
+.bottom-nav>* {
+    color: white;
+}
+
 .nav-shadow {
     box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
 }