Skip to content

Commit

Permalink
feat: nav links
Browse files Browse the repository at this point in the history
  • Loading branch information
@paring-chan
paring-chan committed Aug 10, 2024
1 parent 29cb2f1 commit 77ca70d
Show file tree
Hide file tree
Showing 6 changed files with 125 additions and 4 deletions.
9 changes: 8 additions & 1 deletion .storybook/Root.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,20 @@
language: lang,
setLanguage: (v) => lang.set(v),
urls: {
main: '/',
levels: 'https://adofai.gg/levels',
rankings: 'https://adofai.gg/rankings',
references: 'https://adofai.gg/references',
signIn: 'https://accounts.adofai.gg/auth/signin',
signUp: 'https://accounts.adofai.gg/autn/signup',
userSettings: 'https://accounts.adofai.gg/settings'
}
},
links: [
{
key: 'custom:Hello',
href: '/hello'
}
]
})
</script>

Expand Down
31 changes: 31 additions & 0 deletions src/lib/components/nav/LogoIcon.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5023_13690)">
<path
d="M6.13874 3.39757C-0.824469 8.84089 -2.05658 18.8984 3.38674 25.8616C8.83006 32.8248 18.8875 34.0569 25.8507 28.6136C32.8139 23.1702 34.0461 13.1128 28.6027 6.14957C23.1594 -0.813639 13.1019 -2.04575 6.13874 3.39757Z"
fill="#0B192B"
/>
<path
opacity="0.35"
d="M9.54139 6.65376C9.81551 6.4106 10.1266 6.21718 10.4616 6.08164C10.679 5.93057 10.9132 5.80778 11.1588 5.716C11.4204 5.57565 11.6991 5.47367 11.9871 5.41297C12.2795 5.26133 12.5922 5.1572 12.9143 5.10418C13.1302 5.02681 13.3534 4.97373 13.5798 4.94587C13.7693 4.89585 13.9626 4.86409 14.1574 4.85099C14.3811 4.80486 14.6087 4.78378 14.8364 4.7881C15.1587 4.7352 15.4864 4.73401 15.8085 4.78456C16.1651 4.74253 16.5257 4.7634 16.8751 4.84632C17.1354 4.84776 17.3944 4.88245 17.6463 4.94961C17.9376 4.98584 18.2225 5.06393 18.4931 5.18166C19.0114 5.25303 19.5041 5.45708 19.9277 5.7757C20.3512 6.09432 20.6924 6.51768 20.9211 7.0082C21.1497 7.49873 21.2587 8.04127 21.2383 8.58769C21.2179 9.13411 21.0689 9.66752 20.8043 10.1406C20.4141 10.8379 19.7953 11.3644 19.0634 11.6222C18.3314 11.8799 17.5361 11.8512 16.8256 11.5415C16.7002 11.5241 16.5758 11.4991 16.4532 11.4665C16.342 11.4526 16.2315 11.4325 16.1223 11.4065C15.9678 11.4058 15.8136 11.3932 15.661 11.3689C15.5213 11.3856 15.3808 11.3925 15.2403 11.3898C15.1435 11.406 15.0463 11.4174 14.9486 11.4238C14.8652 11.4409 14.7811 11.4548 14.6969 11.4653C14.6021 11.4903 14.5062 11.5107 14.4093 11.5267C14.2763 11.5744 14.1404 11.6129 14.0026 11.642C13.889 11.7009 13.7723 11.7529 13.6529 11.7975C13.5529 11.851 13.4503 11.8991 13.3455 11.9415C13.2165 12.0311 13.0816 12.1108 12.9417 12.1801C12.8344 12.2756 12.7212 12.3635 12.6028 12.4433C12.5309 12.5129 12.4559 12.5794 12.3783 12.6417C12.3183 12.7047 12.2556 12.7651 12.1911 12.823C12.135 12.8883 12.0766 12.9511 12.0158 13.0113C11.9361 13.1143 11.8506 13.2123 11.7599 13.3049C11.6951 13.4188 11.6238 13.5286 11.5466 13.6338C11.4904 13.7355 11.4291 13.8341 11.363 13.9291C11.3013 14.0775 11.2293 14.2209 11.1476 14.3584C11.107 14.4992 11.0576 14.6371 10.9997 14.7712C10.9753 14.8702 10.9468 14.9686 10.9139 15.065C10.8963 15.1516 10.8755 15.2378 10.8509 15.323C10.7821 15.7721 10.6259 16.2022 10.392 16.5866C10.1581 16.971 9.85143 17.3015 9.49099 17.5577C9.13055 17.814 8.72402 17.9904 8.29654 18.0762C7.86906 18.1619 7.42974 18.1552 7.00576 18.0564C6.58179 17.9575 6.18217 17.7687 5.83166 17.5015C5.48114 17.2344 5.18718 16.8946 4.96797 16.5033C4.74876 16.1119 4.60895 15.6773 4.55722 15.2263C4.50548 14.7753 4.54291 14.3176 4.66718 13.8814C4.69808 13.6797 4.74658 13.4814 4.81207 13.2889C4.85984 13.0559 4.93122 12.8287 5.02499 12.6113C5.1058 12.2809 5.23439 11.965 5.4063 11.6747C5.51017 11.3154 5.67116 10.9766 5.88251 10.6726C5.98669 10.4226 6.11973 10.1867 6.27864 9.97019C6.42574 9.704 6.60713 9.46008 6.81771 9.24532C6.96815 8.98128 7.15256 8.73995 7.36573 8.52813C7.48869 8.3694 7.62522 8.22266 7.7736 8.08975C7.90447 7.93771 8.04833 7.79845 8.20337 7.67371C8.36462 7.50488 8.54259 7.35447 8.73425 7.22504C8.97399 6.99287 9.24609 6.80021 9.54113 6.65372L9.54139 6.65376Z"
fill="#E65836"
/>
<path
d="M9.98172 18.3271C11.3476 17.1729 11.521 15.1318 10.3691 13.7683C9.21713 12.4047 7.17608 12.235 5.81023 13.3891C4.44439 14.5433 4.27098 16.5844 5.4229 17.948C6.57482 19.3115 8.61588 19.4813 9.98172 18.3271Z"
fill="#E65836"
/>
<path
opacity="0.35"
d="M12.512 20.564C12.923 20.3455 13.3741 20.2229 13.8339 20.2047C14.2938 20.1865 14.7515 20.273 15.1751 20.4584C15.3002 20.4756 15.4242 20.5006 15.5464 20.5332C15.6579 20.5471 15.7687 20.5671 15.8781 20.5931C16.0328 20.5939 16.1872 20.6064 16.3401 20.6305C16.4796 20.614 16.62 20.6071 16.7604 20.61C16.857 20.5938 16.9541 20.5824 17.0517 20.5759C17.1352 20.5587 17.219 20.5449 17.3033 20.5345C17.3979 20.5096 17.4935 20.4892 17.59 20.4733C17.7234 20.4254 17.8596 20.3868 17.9978 20.3577C18.111 20.2989 18.2274 20.2472 18.3465 20.2028C18.4467 20.149 18.5496 20.1008 18.6546 20.0584C18.7837 19.9687 18.9189 19.8888 19.0589 19.8194C19.1662 19.7241 19.2793 19.6363 19.3975 19.5565C19.4695 19.4868 19.5443 19.4207 19.6218 19.3582C19.6818 19.2952 19.7441 19.2348 19.8088 19.177C19.8649 19.1117 19.9233 19.049 19.984 18.9888C20.0638 18.8857 20.1494 18.7875 20.2403 18.6949C20.3051 18.5814 20.3761 18.4718 20.453 18.3668C20.5093 18.2649 20.5707 18.1661 20.6369 18.0708C20.6987 17.9223 20.7707 17.7786 20.8525 17.641C20.8931 17.5002 20.9425 17.3622 21.0005 17.2281C21.0245 17.129 21.0532 17.0312 21.0858 16.9347C21.1037 16.8479 21.1247 16.7619 21.1488 16.6767C21.2787 15.8218 21.7232 15.0522 22.3871 14.5323C22.4322 14.497 22.4784 14.4628 22.5258 14.4297C23.0697 14.0483 23.7121 13.8509 24.3653 13.8643C25.0186 13.8776 25.651 14.1011 26.1764 14.5044C26.7019 14.9076 27.0948 15.4709 27.3016 16.1176C27.5085 16.7643 27.5193 17.463 27.3325 18.1184C27.3017 18.3201 27.2532 18.5186 27.1877 18.7112C27.14 18.9441 27.0687 19.1711 26.975 19.3884C26.8942 19.7189 26.7656 20.0349 26.5936 20.3254C26.4896 20.685 26.3284 21.024 26.1168 21.3282C26.0129 21.5775 25.8803 21.8128 25.722 22.0289C25.5747 22.2955 25.3931 22.5399 25.1822 22.755C25.0316 23.0193 24.8471 23.2608 24.6337 23.4727C24.511 23.631 24.3747 23.7774 24.2267 23.91C24.0958 24.062 23.9519 24.2013 23.7968 24.3261C23.6355 24.495 23.4575 24.6454 23.2659 24.7748C23.0261 25.007 22.7539 25.1997 22.4588 25.3463C22.1845 25.5896 21.8731 25.7832 21.5378 25.919C21.321 26.0695 21.0874 26.192 20.8425 26.2835C20.5805 26.4242 20.3015 26.5263 20.0131 26.5871C19.7203 26.739 19.4071 26.8433 19.0846 26.8962C18.8692 26.9732 18.6467 27.0261 18.4208 27.0538C18.2313 27.1038 18.0379 27.1356 17.843 27.1489C17.6195 27.1951 17.392 27.2163 17.1644 27.212C16.842 27.265 16.514 27.2661 16.1918 27.2153C15.8349 27.2576 15.474 27.2367 15.1244 27.1534C14.8647 27.152 14.6063 27.1175 14.3549 27.0504C14.0633 27.0143 13.7779 26.9363 13.5071 26.8184C12.8344 26.7265 12.2086 26.4117 11.7215 25.92C11.2344 25.4284 10.9116 24.7859 10.8003 24.0865C10.689 23.3872 10.7952 22.6678 11.1032 22.0339C11.4112 21.4 11.9049 20.8847 12.5119 20.5638L12.512 20.564Z"
fill="#7DABFF"
/>
<path
d="M26.1906 18.61C27.5564 17.4558 27.7298 15.4148 26.5779 14.0512C25.426 12.6876 23.3849 12.5179 22.0191 13.6721C20.6533 14.8263 20.4798 16.8674 21.6318 18.2309C22.7837 19.5945 24.8247 19.7642 26.1906 18.61Z"
fill="#7DABFF"
/>
</g>
<defs>
<clipPath id="clip0_5023_13690">
<rect width="32" height="32" fill="white" />
</clipPath>
</defs>
</svg>
63 changes: 61 additions & 2 deletions src/lib/components/nav/Nav.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,38 @@
<script lang="ts">
import { Button, Logo, NavSignArea, type User } from '$lib/index.js'
import { getGlobalContext, Logo, NavSignArea, type User } from '$lib/index.js'
import Container from '$lib/components/Container.svelte'
import NavUserArea from './NavUserArea.svelte'
import IconButton from '$lib/components/IconButton.svelte'
import LogoIcon from '$lib/components/nav/LogoIcon.svelte'
import NavLink from '$lib/components/nav/NavLink.svelte'
export let user: User | null
const ctx = getGlobalContext()
$: mainUrl = ctx.urls.main
</script>

<nav class="nav-container">
<Container>
<div class="nav-content">
<Logo height={20} width={140} />
<div class="start-area">
<a href={mainUrl}>
<div class="logo-icon">
<LogoIcon />
</div>
<div class="logo-text">
<Logo height={16} width={134} />
</div>
</a>

<div class="nav-links">
{#each ctx.links as link}
<NavLink key={link.key} href={link.href} />
{/each}
</div>
</div>

<div class="spacer"></div>

{#if user}
Expand Down Expand Up @@ -39,6 +61,8 @@
</nav>

<style lang="scss">
@import '../../stylesheets/system/breakpoints';
.nav-container {
background-color: rgba(var(--color-darkblue), 0.2);
}
Expand All @@ -59,4 +83,39 @@
justify-content: center;
align-items: center;
}
.logo-icon {
display: block;
}
.logo-text {
display: none;
}
@include breakpoint('md') {
.logo-icon {
display: none;
}
.logo-text {
display: block;
}
}
.start-area {
display: flex;
gap: 32px;
align-items: center;
}
.nav-links {
gap: 24px;
align-items: center;
display: none;
@include breakpoint('md') {
display: flex;
}
}
</style>
17 changes: 17 additions & 0 deletions src/lib/components/nav/NavLink.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<script lang="ts">
import { Translation, type TranslationKey } from '$lib/index.js'
export let href: string
export let key: TranslationKey
</script>

<a {href} class="nav-link">
<Translation {key} />
</a>

<style lang="scss">
.nav-link {
font-size: 16px;
font-weight: 700;
}
</style>
2 changes: 1 addition & 1 deletion src/lib/components/nav/NavUserArea.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}
.username-text {
font-size: 16px;
font-size: 18px;
font-weight: 500;
}
</style>
7 changes: 7 additions & 0 deletions src/lib/system/context.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { getContext, setContext } from 'svelte'
import type { Readable } from 'svelte/store'
import type { TranslationKey } from '$lib/utils/translation.js'

export const globalContextName = 'adofaigg-ui-global-context'

Expand All @@ -8,13 +9,19 @@ export type GlobalContext = {
setLanguage: (lang: string) => void

urls: {
main: string
levels: string
rankings: string
references: string
signIn: string
signUp: string
userSettings: string
}

links: {
key: TranslationKey
href: string
}[]
}

export const setGlobalContext = (context: GlobalContext) => setContext(globalContextName, context)
Expand Down

0 comments on commit 77ca70d

Please sign in to comment.