Single decker nav (#310)

* single decker nav * mobile fix * lint
sveltejs · Oct 9, 2024 · 0f7fc57 · 0f7fc57
1 parent 1abac9d
commit 0f7fc57
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 24 deletions.
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -184,7 +184,7 @@
 		flex-direction: column;
 
 		@media (min-width: 800px) {
-			--app-controls-h: 5rem;
+			--app-controls-h: 6rem;
 		}
 	}
 

diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -305,20 +305,8 @@ export default app;`
 		flex: 0;
 		gap: 1rem;
 
-		&::after {
-			content: '';
-			position: absolute;
-			left: 0;
-			bottom: -4px;
-			width: 100%;
-			height: 4px;
-			z-index: 2;
-			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), transparent);
-		}
-
 		@media (min-width: 800px) {
-			padding-top: 0;
-			padding-bottom: 1rem;
+			padding-top: 1rem;
 		}
 	}
 
@@ -383,6 +371,7 @@ export default app;`
 		border-radius: var(--sk-border-radius);
 		color: currentColor;
 		font-family: var(--sk-font-ui);
+		width: 0;
 		flex: 1;
 		padding: 0.2rem 0.6rem;
 		height: 3.2rem;

diff --git a/apps/svelte.dev/src/routes/+layout.svelte b/apps/svelte.dev/src/routes/+layout.svelte
@@ -38,11 +38,7 @@
 
 <Shell nav_visible={$page.route.id !== '/(authed)/playground/[id]/embed'}>
 	{#snippet top_nav()}
-		<Nav
-			title={data.nav_title}
-			links={data.nav_links}
-			shadow={!$page.route.id?.startsWith('/(authed)/playground')}
-		>
+		<Nav title={data.nav_title} links={data.nav_links}>
 			{#snippet search()}
 				<Search />
 			{/snippet}

diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
@@ -337,7 +337,7 @@
 		width: 100%;
 		height: calc(100dvh - var(--sk-nav-height));
 		background: var(--sk-back-1);
-		padding: 1rem 0 0 0;
+		padding: 0;
 
 		&.embedded {
 			height: 100%;

diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -21,10 +21,9 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		links: NavigationLink[];
 		search?: Snippet;
 		external_links?: Snippet;
-		shadow: boolean;
 	}
 
-	let { home_title = 'Homepage', title, links, search, external_links, shadow }: Props = $props();
+	let { home_title = 'Homepage', title, links, search, external_links }: Props = $props();
 
 	let visible = $state(true);
 
@@ -67,7 +66,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	class:visible={visible || $nav_open}
 	class:$nav_open
 	class:dark={$theme.current === 'dark'}
-	class:shadow
 	style:z-index={$overlay_open && ($searching || $on_this_page_open) ? 80 : null}
 	aria-label="Primary"
 >
@@ -300,7 +298,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			display: grid;
 			grid-template-columns: auto 1fr 1fr;
 
-			&.shadow::after {
+			&::after {
 				top: auto;
 				bottom: -4px;
 				background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), transparent);