Skip to content

Commit 889af12

Browse files
svvimmingsvvimming
committed
feat: site header and nav on desktop
1 parent 3dfea05 commit 889af12

File tree

9 files changed

+181
-27
lines changed

9 files changed

+181
-27
lines changed

‎assets/scss/settings.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
* project-to-project.
1717
*/
1818

19-
$gridWidth: 60rem;
19+
$gridWidth: 79.125rem;
2020
$standardGutter: 0.75rem;
2121
$baseFontSize: 16;
2222
$baseLeading: 1.2;

‎assets/scss/theme/utilities.scss

+4
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,10 @@ $tundora: #414141;
9393
border-radius: 0.125rem;
9494
}
9595

96+
@mixin transitionDefault {
97+
transition: 200ms cubic-bezier(0.33, 0.2, 0.41, 0.99);
98+
}
99+
96100
@mixin tooltipMobilePosition {
97101
&:hover {
98102
&:before,

‎components/button/cta.vue

+91-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,31 @@
55
:class="['button-x', `theme__${props.theme}`]">
66
<div class="inner-content">
77

8+
<svg
9+
v-if="theme === 'primary'"
10+
width="25"
11+
height="41"
12+
viewBox="0 0 25 41"
13+
fill="none"
14+
xmlns="http://www.w3.org/2000/svg"
15+
class="detail">
16+
<path
17+
d="M 24 40 H 2.0441 C 1.3963 40 0.9194 39.3934 1 38.7639 L 7.0927 13.9863 C 9 6 16 1 24 1"
18+
fill="#070707"
19+
fill-opacity="0.2"
20+
shape-rendering="crispEdges" />
21+
<path
22+
d="M 24 40 H 2.0441 C 1.3963 40 0.9194 39.3934 1 38.7639 L 7.0927 13.9863 C 9 6 16 1 24 1"
23+
fill="#FFC582"
24+
shape-rendering="crispEdges"
25+
class="fill-path" />
26+
<path
27+
d="M 24 40 H 2.0441 C 1.3963 40 0.9194 39.3934 1 38.7639 L 7.0927 13.9863 C 9 6 16 1 24 1"
28+
stroke="#FFC582"
29+
stroke-width="2"
30+
shape-rendering="crispEdges" />
31+
</svg>
32+
833
<div :class="['button-content', { hide: loading }]">
934
<slot />
1035
</div>
@@ -62,7 +87,7 @@ const props = defineProps({
6287
&:not([disabled="true"]) {
6388
&:hover {
6489
.button-content {
65-
transition: 150ms ease-in;
90+
@include transitionDefault;
6691
text-decoration: none;
6792
}
6893
}
@@ -97,16 +122,71 @@ const props = defineProps({
97122
}
98123
99124
.button-content {
100-
transition: 150ms ease-out;
125+
@include transitionDefault;
101126
&.hide {
102127
opacity: 0;
103128
}
104129
}
105130
131+
.detail {
132+
position: absolute;
133+
top: 0;
134+
right: calc(100% - 1px);
135+
.fill-path {
136+
opacity: 0;
137+
@include transitionDefault;
138+
}
139+
}
140+
106141
// ////////////////////////////////////////////////////////////////////// Themes
107142
.theme__primary {
143+
display: block;
144+
width: fit-content;
145+
filter: drop-shadow(0px 2px 14px rgba(255, 197, 130, 0.32));
146+
padding-left: toRem(25);
147+
&:before {
148+
content: '';
149+
position: absolute;
150+
left: toRem(25);
151+
top: 0;
152+
width: calc(100% - 25px);
153+
height: 100%;
154+
box-sizing: border-box;
155+
border-top: solid 2px $chardonnay;
156+
border-bottom: solid 2px $chardonnay;
157+
border-right: solid 2px $chardonnay;
158+
border-top-right-radius: 2px;
159+
border-bottom-right-radius: 2px;
160+
background-color: rgba(7, 7, 7, 0.2);
161+
@include transitionDefault;
162+
}
163+
.inner-content {
164+
position: relative;
165+
height: toRem(41);
166+
padding: toRem(10) toRem(17) toRem(10) toRem(3);
167+
}
108168
.button-content {
169+
display: flex;
170+
align-items: center;
171+
width: fit-content;
109172
@include b1;
173+
:deep(div) {
174+
@include b1;
175+
@include transitionDefault;
176+
}
177+
}
178+
&:hover {
179+
.detail {
180+
.fill-path {
181+
opacity: 1;
182+
}
183+
}
184+
&:before {
185+
background-color: $chardonnay;
186+
}
187+
.button-content {
188+
color: $codGray;
189+
}
110190
}
111191
}
112192
@@ -115,4 +195,13 @@ const props = defineProps({
115195
@include b2;
116196
}
117197
}
198+
199+
.theme__icon {
200+
padding: toRem(9);
201+
border-radius: 50%;
202+
border: 2px solid $sageGreen;
203+
.button-content {
204+
display: flex;
205+
}
206+
}
118207
</style>

‎components/icon/github-icon.vue

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<svg
3+
width="20"
4+
height="20"
5+
viewBox="0 0 20 20"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg">
8+
<path d="M10 0C4.475 0 0 4.58819 0 10.2529C0 14.7899 2.8625 18.6219 6.8375 19.9804C7.3375 20.0701 7.525 19.7625 7.525 19.4934C7.525 19.2499 7.5125 18.4425 7.5125 17.5838C5 18.058 4.35 16.9558 4.15 16.3791C4.0375 16.0843 3.55 15.1743 3.125 14.9308C2.775 14.7386 2.275 14.2644 3.1125 14.2516C3.9 14.2388 4.4625 14.9949 4.65 15.3025C5.55 16.8533 6.9875 16.4175 7.5625 16.1484C7.65 15.4819 7.9125 15.0334 8.2 14.777C5.975 14.5207 3.65 13.6364 3.65 9.71466C3.65 8.59965 4.0375 7.67689 4.675 6.95918C4.575 6.70286 4.225 5.65193 4.775 4.24215C4.775 4.24215 5.6125 3.97301 7.525 5.29308C8.325 5.06239 9.175 4.94704 10.025 4.94704C10.875 4.94704 11.725 5.06239 12.525 5.29308C14.4375 3.9602 15.275 4.24215 15.275 4.24215C15.825 5.65193 15.475 6.70286 15.375 6.95918C16.0125 7.67689 16.4 8.58684 16.4 9.71466C16.4 13.6492 14.0625 14.5207 11.8375 14.777C12.2 15.0975 12.5125 15.7126 12.5125 16.6738C12.5125 18.0452 12.5 19.1474 12.5 19.4934C12.5 19.7625 12.6875 20.0829 13.1875 19.9804C15.1728 19.2935 16.8979 17.9854 18.12 16.2403C19.3421 14.4953 19.9997 12.4012 20 10.2529C20 4.58819 15.525 0 10 0Z" fill="#D3D3D3" />
9+
</svg>
10+
</template>

‎components/icon/github.vue

-10
This file was deleted.

‎components/icon/slack-icon.vue

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<svg
3+
width="15"
4+
height="15"
5+
viewBox="0 0 15 15"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg">
8+
<path d="M3.15188 9.47812C3.15188 10.3462 2.44313 11.0541 1.57594 11.0541C0.70875 11.0541 0 10.3463 0 9.47906C0 8.61187 0.70875 7.90313 1.575 7.90313H3.15188V9.47812ZM3.945 9.47812C3.945 8.61187 4.65375 7.90313 5.52094 7.90313C6.38812 7.90313 7.09688 8.61187 7.09688 9.47812V13.425C7.09688 14.2912 6.38812 15 5.52187 15C5.10421 14.9993 4.70384 14.8331 4.40834 14.538C4.11283 14.2428 3.94624 13.8427 3.945 13.425V9.47812ZM5.52187 3.15188C4.65375 3.15188 3.945 2.44313 3.945 1.57594C3.945 0.70875 4.65375 0 5.52187 0C6.39 0 7.09688 0.70875 7.09688 1.575V3.15188H5.52187ZM5.52187 3.945C6.38812 3.945 7.09688 4.65375 7.09688 5.52094C7.09688 6.38812 6.38812 7.09688 5.52187 7.09688H1.575C0.709687 7.09688 0 6.38812 0 5.52187C0 4.65375 0.70875 3.945 1.575 3.945H5.52187ZM11.8491 5.52187C11.8491 4.65375 12.5569 3.945 13.4241 3.945C14.2913 3.945 15 4.65375 15 5.52094C15 6.38812 14.2912 7.09688 13.425 7.09688H11.8491V5.52187ZM11.0541 5.52187C11.0541 6.38812 10.3463 7.09688 9.47906 7.09688C9.06156 7.09589 8.66143 6.92966 8.36613 6.63453C8.07083 6.3394 7.90436 5.93937 7.90313 5.52187V1.575C7.90313 0.709687 8.61187 0 9.47812 0C10.3462 0 11.0541 0.70875 11.0541 1.575V5.52187ZM9.47812 11.8481C10.3462 11.8481 11.055 12.5569 11.055 13.4241C11.055 14.2913 10.3462 15 9.47812 15C8.61 15 7.90219 14.2912 7.90219 13.425V11.8481H9.47812ZM9.47812 11.0541C8.61187 11.0541 7.90313 10.3463 7.90313 9.47906C7.90313 8.61187 8.61187 7.90313 9.47812 7.90313H13.425C14.2912 7.90313 15 8.61187 15 9.47812C15 10.3462 14.2912 11.0541 13.425 11.0541H9.47812Z" fill="#D3D3D3" />
9+
</svg>
10+
</template>

‎components/navbar.vue

+34
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818

1919
<script setup>
2020
// ======================================================================= Props
21+
// eslint-disable-next-line
2122
const props = defineProps({
2223
links: {
2324
type: Array,
@@ -47,5 +48,38 @@ const props = defineProps({
4748
4849
.nav-link {
4950
@include navButton;
51+
@include transitionDefault;
52+
position: relative;
53+
padding: 0.25rem 0.5rem;
54+
transform: translateY(0);
55+
&:before {
56+
content: '';
57+
position: absolute;
58+
top: 100%;
59+
left: 0;
60+
width: 100%;
61+
height: toRem(17);
62+
}
63+
&:after {
64+
content: '';
65+
position: absolute;
66+
top: calc(100% + 5px);
67+
left: calc(50% - 0.25rem);
68+
width: 0.5rem;
69+
height: 0.5rem;
70+
border-radius: 50%;
71+
background-color: $chardonnay;
72+
opacity: 0;
73+
transition: inherit;
74+
}
75+
&:hover {
76+
transform: translateY(-1.125rem);
77+
&:before {
78+
height: toRem(30);
79+
}
80+
&:after {
81+
opacity: 1;
82+
}
83+
}
5084
}
5185
</style>

‎components/site-header.vue

+29-12
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,11 @@
2323
</NuxtLink>
2424
</div>
2525

26-
<div class="col-7 nav-items" data-push-left="off-2">
27-
26+
<div class="col-4" data-push-left="off-2">
2827
<Navbar :links="navigation" class="desktop" />
28+
</div>
29+
30+
<div class="col-3">
2931

3032
<div class="nav-ctas">
3133
<ButtonCta
@@ -34,9 +36,13 @@
3436
:tag="cta.tag"
3537
:target="cta.target"
3638
:theme="cta.theme">
37-
<component :is="getCtaComponent(cta)">
38-
{{ cta.text || null }}
39-
</component>
39+
<component
40+
:is="getCtaComponent(cta.icon)"
41+
v-if="cta.icon"
42+
class="icon" />
43+
<span v-if="cta.text">
44+
{{ cta.text }}
45+
</span>
4046
</ButtonCta>
4147
</div>
4248

@@ -61,7 +67,8 @@
6167
// ===================================================================== Imports
6268
import { storeToRefs } from 'pinia'
6369
import GeneralSiteData from '@/content/core/general.json'
64-
import IconGithub from '@/components/icon/github'
70+
const GithubIcon = resolveComponent('icon/github-icon')
71+
const SlackIcon = resolveComponent('icon/slack-icon')
6572
6673
// ======================================================================== Data
6774
const generalStore = useGeneralStore()
@@ -88,7 +95,8 @@ watch(navigationOpen, (val) => {
8895
8996
// ======================================================================= Hooks
9097
onMounted(() => {
91-
console.log(navigation.value)
98+
const instance = getCurrentInstance()
99+
console.log(instance.appContext.components)
92100
})
93101
94102
// ===================================================================== Methods
@@ -101,11 +109,13 @@ const toggleNav = () => {
101109
/**
102110
* @method getCtaComponent
103111
*/
104-
const getCtaComponent = (cta) => {
105-
if (cta.component) {
106-
return cta.component
112+
const getCtaComponent = (icon) => {
113+
switch (icon) {
114+
case 'github' : return GithubIcon;
115+
case 'slack' : return SlackIcon;
116+
default : return 'span'
107117
}
108-
return 'div'
118+
109119
}
110120
111121
</script>
@@ -159,8 +169,9 @@ const getCtaComponent = (cta) => {
159169
justify-content: space-between;
160170
}
161171
162-
:deep(.navigation) {
172+
:deep(.navbar) {
163173
&.desktop {
174+
margin-right: 0.5rem;
164175
@include small {
165176
display: none;
166177
}
@@ -172,13 +183,19 @@ const getCtaComponent = (cta) => {
172183
justify-content: space-between;
173184
height: 100%;
174185
align-items: center;
186+
padding: 0 toRem(28);
175187
}
176188
177189
.desktop,
178190
.nav-ctas {
179191
flex-grow: 1;
180192
}
181193
194+
.icon {
195+
width: toRem(20);
196+
height: toRem(20);
197+
}
198+
182199
// /////////////////////////////////////////////////////////////////// Hamburger
183200
.nav-toggle-wrapper {
184201
display: none;

‎content/core/general.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,14 @@
3535
"ctas": [
3636
{
3737
"to": "https://github.com/data-preservation-programs/singularity",
38-
"component": "IconGithub",
38+
"icon": "github",
3939
"target": "_blank",
4040
"tag": "a",
4141
"theme": "icon"
4242
},
4343
{
4444
"to": "https://filecoinproject.slack.com/archives/C05JABREATH",
45-
"component": "IconSlack",
45+
"icon": "slack",
4646
"target": "_blank",
4747
"tag": "a",
4848
"theme": "icon"

0 commit comments

Comments
 (0)