- {#if !hideLogo}
-
- {/if}
- {#if !hideTitle}
-
{title}
+
-
-
-
(mobileOpen = false)}
/>
-
- {#each links as { text, url, external }}
- {#if external}
-
{text}
- {:else}
-
{text}
- {/if}
- {/each}
-
-
(mobileOpen = false)}
- />
+ {#if validLinks?.length}
+
+ {#each validLinks as { text, url }}
+ {#if isInternal(url)}
+
+ {text}
+
+ {:else}
+
+ {text}
+
+ {/if}
+ {/each}
+
+ (mobileOpen = false)}
+ />
+
-
+ {/if}
{/if}
@@ -110,11 +130,20 @@
}
.nav {
- flex: 1 1 auto;
- display: grid;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
padding: var(--spacing-xl);
- max-width: 1400px;
- grid-template-columns: 1fr auto;
+ width: 1400px;
+ max-width: 100%;
+ }
+ .nav-header {
+ flex: 0 0 auto;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
}
.main-wrapper {
display: flex;
@@ -124,12 +153,12 @@
flex: 1 1 auto;
}
.main {
- flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
- max-width: 1400px;
+ width: 1400px;
+ max-width: 100%;
position: relative;
}
@@ -143,16 +172,13 @@
justify-content: flex-start;
align-items: center;
gap: var(--spacing-xl);
- grid-column: 1;
}
.logo img {
height: 48px;
}
.portal {
display: grid;
- justify-items: center;
- align-items: center;
- grid-column: 2;
+ place-items: center;
}
.links {
display: flex;
@@ -160,8 +186,6 @@
justify-content: flex-start;
align-items: center;
gap: var(--spacing-l);
- grid-column: 1 / 3;
- grid-row: 2;
}
.link {
color: var(--spectrum-alias-text-color);
@@ -175,8 +199,8 @@
.close {
display: none;
position: absolute;
- top: var(--spacing-m);
- right: var(--spacing-m);
+ top: var(--spacing-xl);
+ right: var(--spacing-xl);
}
.mobile-click-handler {
display: none;
@@ -194,12 +218,9 @@
}
.nav--top {
- grid-template-rows: auto auto;
- justify-content: space-between;
gap: var(--spacing-xl);
}
.nav--left {
- grid-template-rows: auto 1fr;
width: 250px;
gap: var(--spacing-m);
}
@@ -246,19 +267,11 @@
/* Force standard top bar */
.nav {
- justify-content: space-between;
- gap: var(--spacing-xl);
- grid-template-columns: auto auto auto;
- grid-template-rows: auto;
- padding: var(--spacing-m);
+ padding: var(--spacing-m) var(--spacing-xl);
}
.burger {
display: grid;
place-items: center;
- grid-column: 1;
- }
- .logo {
- grid-column: 2;
}
.logo img {
height: 36px;
@@ -266,9 +279,6 @@
.logo :global(h1) {
display: none;
}
- .portal {
- grid-column: 3;
- }
/* Transform links into drawer */
.links {
@@ -289,6 +299,7 @@
}
.link {
width: calc(100% - 30px);
+ font-size: 120%;
}
.links.visible {
opacity: 1;
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 58c45d32f8..2a2c763d21 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -24,7 +24,7 @@ export { default as stackedlist } from "./StackedList.svelte"
export { default as card } from "./Card.svelte"
export { default as text } from "./Text.svelte"
export { default as navigation } from "./Navigation.svelte"
-export { default as layout } from "./layout/Layout.svelte"
+export { default as layout } from "./Layout.svelte"
export { default as link } from "./Link.svelte"
export { default as heading } from "./Heading.svelte"
export { default as image } from "./Image.svelte"
diff --git a/packages/standard-components/src/layout/Mobile.svelte b/packages/standard-components/src/layout/Mobile.svelte
deleted file mode 100644
index 249256a3a0..0000000000
--- a/packages/standard-components/src/layout/Mobile.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
-
-
- {#each links as { text, url }}
-
- - {text}
- {/each}
-
-
-
-
-
diff --git a/packages/standard-components/src/layout/Navigation.svelte b/packages/standard-components/src/layout/Navigation.svelte
deleted file mode 100644
index c2b15c559d..0000000000
--- a/packages/standard-components/src/layout/Navigation.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-
-
-
- {#if navigation === "Top"}
-
- {#each links as { text, url }}
- - {text}
- {/each}
-
- {:else}
-
- {#each links as { text, url }}
-
- - {text}
- {/each}
-
- {/if}
-
-
-
(mobileOpen = !mobileOpen)}
- />
- {#if mobileOpen}
- (mobileOpen = !mobileOpen)} />
- {/if}
-
-
-