Skip to content

Commit 06763da

Browse files
marcel-bitflymarcel-bitfly
committed
feat: add first draft of navigation to base layout
See: DF-91
1 parent 95c7c5c commit 06763da

File tree

3 files changed

+86
-62
lines changed

3 files changed

+86
-62
lines changed

‎frontend/layers/base/app/assets/css/main.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
@theme {
1212
--*: initial;
1313

14-
/* --breakpoint-sm: 40rem; */
15-
--breakpoint-md: 48rem;
14+
--breakpoint-sm: 40rem; /* 640px */
15+
--breakpoint-md: 48rem; /* 768px */
1616
/* --breakpoint-lg: 64rem; */
1717
/* --breakpoint-xl: 80rem; */
1818
/* --breakpoint-2xl: 96rem; */
@@ -35,6 +35,8 @@
3535
--color-gray-700: #3B3B3B;
3636
--color-gray-900: #262626;
3737

38+
--container-8xl: 90rem; /* 1440px */
39+
3840
--font-urbanist: "Urbanist", sans-serif;
3941
--font-weight-semibold: 600;
4042

‎frontend/layers/base/app/components/BaseButtonIcon.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script setup lang="ts">
2+
import type { IconName } from '~/layers/base/app/components/BaseIcon.vue'
3+
4+
const { size = 'md' } = defineProps<{
5+
name: IconName,
6+
size?: 'md',
7+
variant: 'secondary',
8+
}>()
9+
</script>
10+
11+
<template>
12+
<button
13+
class="flex rounded-full bg-linear-to-b disabled:opacity-40 aria-disabled:opacity-40 active:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
14+
:class="[
15+
variant === 'secondary' && 'from-gray-300 to-gray-200 text-black dark:from-charcoal-600 dark:to-charcoal-700 dark:text-white opacity-90 ',
16+
size === 'md' && 'p-md',
17+
]"
18+
>
19+
<BaseIcon
20+
:name
21+
class="w-6 h-6"
22+
/>
23+
</button>
24+
</template>
25+
26+
<style scoped></style>

‎frontend/layers/base/app/components/BaseNavigation.vue‎

Lines changed: 56 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -4,66 +4,62 @@ const { t: $t } = useTranslation()
44
</script>
55

66
<template>
7-
<nav class="p-2xl flex justify-between items-center">
8-
<NuxtLink to="/">
9-
<span class="sr-only">
10-
{{ $t('base.beaconchain_homepage') }}
11-
</span>
12-
<TheLogo
13-
class="text-black dark:text-white"
7+
<nav class="p-2xl">
8+
<div class="max-w-8xl mx-auto grid grid-cols-[auto_1fr_auto] gap-2xl items-center">
9+
<BaseButtonIcon
10+
class="sm:hidden"
11+
name="menu-2"
12+
variant="secondary"
1413
/>
15-
</NuxtLink>
16-
<ul class="flex gap-xl">
17-
<li>
18-
<a
19-
class="font-semibold flex gap-md items-center p-md bg-linear-to-b rounded-full from-gray-300 to-gray-200 text-black dark:from-charcoal-600 dark:to-charcoal-700 dark:text-white opacity-90 hover:opacity-95 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
20-
href=""
21-
>
22-
<BaseIcon name="file-code-2" />
23-
{{ $t('base.products.api') }}
24-
</a>
25-
<!-- <BaseButton
26-
variant="secondary"
27-
leading-icon="file-code-2"
28-
>
29-
{{ $t('base.products.api') }}
30-
</BaseButton> -->
31-
</li>
32-
<li>
33-
<a
34-
class="font-semibold flex gap-md items-center p-md bg-linear-to-b rounded-full from-gray-300 to-gray-200 text-black dark:from-charcoal-600 dark:to-charcoal-700 dark:text-white opacity-90 hover:opacity-95 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
35-
href=""
36-
>
37-
<BaseIcon name="coins" />
38-
{{ $t('base.products.stacking_hub') }}
39-
</a>
40-
<!-- <BaseButton
41-
leading-icon="coins"
42-
variant="secondary"
43-
>
44-
{{ $t('base.products.stacking_hub') }}
45-
</BaseButton> -->
46-
</li>
47-
<li>
48-
<a
49-
class="font-semibold flex gap-md items-center p-md bg-linear-to-b rounded-full from-gray-300 to-gray-200 text-black dark:from-charcoal-600 dark:to-charcoal-700 dark:text-white opacity-90 hover:opacity-95 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
50-
href=""
51-
>
52-
<BaseIcon name="compass" />
53-
{{ $t('base.products.explorer') }}
54-
</a>
55-
<!-- <BaseButton
56-
leading-icon="compass"
57-
variant="secondary"
58-
>
59-
{{ $t('base.products.explorer') }}
60-
</BaseButton> -->
61-
</li>
62-
</ul>
63-
<BaseButton
64-
@click="navigateToV1Login"
65-
>
66-
{{ $t('base.common.log_in') }}
67-
</BaseButton>
14+
<NuxtLink to="/">
15+
<span class="sr-only">
16+
{{ $t('base.beaconchain_homepage') }}
17+
</span>
18+
<span class="flex gap-sm text-black dark:text-white">
19+
<TheLogoMark
20+
width="1.25rem"
21+
class="aspect-square"
22+
/>
23+
<TheLogoType
24+
class="hidden md:inline"
25+
width="6.25rem"
26+
/>
27+
</span>
28+
</NuxtLink>
29+
<ul class="hidden sm:flex gap-xl justify-center">
30+
<li>
31+
<a
32+
class="font-semibold flex gap-md items-center p-md bg-linear-to-b rounded-full from-gray-300 to-gray-200 text-black dark:from-charcoal-600 dark:to-charcoal-700 dark:text-white opacity-90 hover:opacity-95 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
33+
href=""
34+
>
35+
<BaseIcon name="file-code-2" />
36+
{{ $t('base.products.api') }}
37+
</a>
38+
</li>
39+
<li>
40+
<a
41+
class="font-semibold flex gap-md items-center p-md bg-linear-to-b rounded-full from-gray-300 to-gray-200 text-black dark:from-charcoal-600 dark:to-charcoal-700 dark:text-white opacity-90 hover:opacity-95 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
42+
href=""
43+
>
44+
<BaseIcon name="coins" />
45+
{{ $t('base.products.stacking_hub') }}
46+
</a>
47+
</li>
48+
<li>
49+
<a
50+
class="font-semibold flex gap-md items-center p-md bg-linear-to-b rounded-full from-gray-300 to-gray-200 text-black dark:from-charcoal-600 dark:to-charcoal-700 dark:text-white opacity-90 hover:opacity-95 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
51+
href=""
52+
>
53+
<BaseIcon name="compass" />
54+
{{ $t('base.products.explorer') }}
55+
</a>
56+
</li>
57+
</ul>
58+
<BaseButton
59+
@click="navigateToV1Login"
60+
>
61+
{{ $t('base.common.log_in') }}
62+
</BaseButton>
63+
</div>
6864
</nav>
6965
</template>

0 commit comments

Comments
 (0)