From 3e1d6db5a80a70683c2637105950d93e4d3fc777 Mon Sep 17 00:00:00 2001 From: "V. Claire Olmstead" <43625033+claireolmstead@users.noreply.github.com> Date: Tue, 16 Jan 2024 14:14:41 -0800 Subject: [PATCH] 70 nav layout (#80) closes #70 --------- Co-authored-by: Claire Olmstead --- src/components/Nav.svelte | 39 +++++++++++++++++++++++++++++++++++ src/lib/assets/icon-logo.png | Bin 0 -> 5129 bytes src/routes/+layout.svelte | 10 +++++++-- src/routes/+page.svelte | 1 - src/routes/faq/+page.svelte | 1 + src/style/app.css | 1 - tailwind.config.js | 1 + 7 files changed, 49 insertions(+), 4 deletions(-) create mode 100644 src/components/Nav.svelte create mode 100644 src/lib/assets/icon-logo.png create mode 100644 src/routes/faq/+page.svelte diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte new file mode 100644 index 00000000..aa53b76a --- /dev/null +++ b/src/components/Nav.svelte @@ -0,0 +1,39 @@ + + +
+ iconLogo +
+ {#each navItems as navItem} + {#key navItems} + { + const items = navItems.map((item) => { + return { ...item, isActive: item.name === navItem.name }; + }); + navItems = items; + }} + href={navItem.href} + class={` h-[100px] flex items-center justify-center font-bold text-sm ${ + navItem.isActive && 'bg-bg-black-active shadow-blue-border' + }`}>{navItem.name} + {/key} + {/each} +
+
diff --git a/src/lib/assets/icon-logo.png b/src/lib/assets/icon-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..3600d16044abae9bdc913699bf993df50b2fa76e GIT binary patch literal 5129 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 literal 0 HcmV?d00001 diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 9a48a8de..d2cd3a8b 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,11 +1,17 @@
The project logo -
- +
+
; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 158b8e87..4fae4e31 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -14,7 +14,6 @@ import KeySelection from '$components/KeySelection.svelte'; import ProviderActions from '$components/ProviderActions.svelte'; import ChainStatus from '$components/ChainStatus.svelte'; - import type { ChainInfo, MsaInfo } from '$lib/storeTypes'; let token = ''; diff --git a/src/routes/faq/+page.svelte b/src/routes/faq/+page.svelte new file mode 100644 index 00000000..99e43eba --- /dev/null +++ b/src/routes/faq/+page.svelte @@ -0,0 +1 @@ +
FAQ_PAGE
diff --git a/src/style/app.css b/src/style/app.css index c4ebe713..4cae8a87 100644 --- a/src/style/app.css +++ b/src/style/app.css @@ -49,7 +49,6 @@ body { color: white; min-height: 100vh; - margin: 2em; background: linear-gradient(to top, #2c333d, #007da1); } diff --git a/tailwind.config.js b/tailwind.config.js index 7206076e..6affdf26 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -32,6 +32,7 @@ export default { }, boxShadow: { md: '0px 4px 7px rgba(0,0,0,.25)', + 'blue-border': '8px 0 0 #69B9CD', }, backgroundImage: { topRight: 'url(/assets/top-right-bars.png)',