Skip to content

Commit 86baad1

Browse files
MrSunshyneMrSunshyne
committed
feat: remove Meetups and Sponsors from the menu temporarily
1 parent 95e7794 commit 86baad1

File tree

2 files changed

+63
-81
lines changed

2 files changed

+63
-81
lines changed

‎packages/frontendmu-nuxt/components/site/Menu.vue

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ interface TMenuItem {
99
href: string
1010
class?: string
1111
children?: TMenuItem[]
12+
target?: string
13+
rel?: string
1214
}
1315
1416
interface TMenu {
@@ -78,10 +80,10 @@ const links: TMenu = {
7880
},
7981
],
8082
},
81-
meetups: {
82-
title: 'Meetups',
83-
href: '/meetups',
84-
},
83+
// meetups: {
84+
// title: 'Meetups',
85+
// href: '/meetups',
86+
// },
8587
community: {
8688
title: 'Community',
8789
href: '/community',
@@ -91,15 +93,17 @@ const links: TMenu = {
9193
href: '/team',
9294
class: 'hidden md:block',
9395
},
94-
sponsors: {
95-
title: 'Sponsors',
96-
href: '/sponsors',
97-
class: 'hidden md:block',
98-
},
96+
// sponsors: {
97+
// title: 'Sponsors',
98+
// href: '/sponsors',
99+
// class: 'hidden md:block',
100+
// },
99101
advent: {
100102
title: 'Advent Calendar',
101103
href: 'https://advent.frontend.mu',
102-
104+
class: 'external-link',
105+
target: '_blank',
106+
rel: 'noopener noreferrer',
103107
},
104108
}
105109
@@ -179,24 +183,16 @@ onMounted(toggleHeader)
179183
<div class="menu theme-light w-full">
180184
<div class="flex justify-between items-center contain">
181185
<div class="flex">
182-
<NuxtLink
183-
href="/"
184-
class="flex gap-2 text-verse-500 dark:text-verse-200"
185-
title="frontend.mu"
186-
@contextmenu="handleRightClick"
187-
>
186+
<NuxtLink href="/" class="flex gap-2 text-verse-500 dark:text-verse-200" title="frontend.mu"
187+
@contextmenu="handleRightClick">
188188
<SiteLogo class="w-10" />
189-
<span
190-
class="hidden text-lg font-bold leading-none tracking-tighter md:text-3xl md:block"
191-
>
189+
<span class="hidden text-lg font-bold leading-none tracking-tighter md:text-3xl md:block">
192190
frontend.mu
193191
</span>
194192
</NuxtLink>
195193
</div>
196194
<nav>
197-
<ul
198-
class="nav-links text-sm md:text-sm lg:text-base flex md:gap-4 gap-2 font-medium font-heading"
199-
>
195+
<ul class="nav-links text-sm md:text-sm lg:text-base flex md:gap-4 gap-2 font-medium font-heading">
200196
<template v-for="item of Object.keys(links)" :key="item">
201197
<SiteMenuItem :links="links" :item="item" />
202198
</template>
@@ -211,9 +207,7 @@ onMounted(toggleHeader)
211207
<slot name="dock-right" />
212208
</div>
213209
</div>
214-
<div
215-
class="absolute right-10 top-10 rounded-lg px-4 bg-white/20 shadow-[0px_0px_2px_var(--color-verse-500)]"
216-
>
210+
<div class="absolute right-10 top-10 rounded-lg px-4 bg-white/20 shadow-[0px_0px_2px_var(--color-verse-500)]">
217211
<slot name="dock-right-bottom" />
218212
</div>
219213
</div>

‎packages/frontendmu-nuxt/components/site/MenuItem.vue

Lines changed: 44 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@ const { links, item } = defineProps<Props>()
33
44
const currentPath = computed(() => useRoute().path)
55
6-
const today = new Date().getDate()
6+
const today = computed(() => {
7+
const date = new Date()
8+
const month = date.getMonth()
9+
// Only show date during December, otherwise show 1
10+
return month === 11 ? date.getDate() : 1
11+
})
712
813
interface TMenuItem {
914
title: string
@@ -23,36 +28,26 @@ interface Props {
2328
</script>
2429

2530
<template>
26-
<li
27-
class="nav-link hover:bg-white/10 rounded-md hover:dark:text-white " :class="[
28-
{ 'nav-link-dropdown': links[item].children },
29-
links[item].class,
30-
currentPath.includes(links[item].href) ? 'dark:text-white' : 'text-verse-700 dark:text-verse-300',
31-
]"
32-
:aria-haspopup="links[item].title === 'About' ? 'true' : undefined"
33-
>
34-
<NuxtLink
35-
:class="[links[item].title === 'Advent Calendar' && 'hidden md:flex text-red-600 dark:text-green-500']"
31+
<li class="nav-link hover:bg-white/10 rounded-md hover:dark:text-white " :class="[
32+
{ 'nav-link-dropdown': links[item].children },
33+
links[item].class,
34+
currentPath.includes(links[item].href) ? 'dark:text-white' : 'text-verse-700 dark:text-verse-300',
35+
]" :aria-haspopup="links[item].title === 'About' ? 'true' : undefined">
36+
<NuxtLink :class="[links[item].title === 'Advent Calendar' && 'hidden md:flex text-red-600 dark:text-green-500']"
3637
class="flex items-center" :href="links[item].href"
37-
:target="!!links[item].href.includes(&quot;https&quot;) ? &quot;_blank&quot; : &quot;_self&quot;"
38-
>
39-
<span
40-
v-if="currentPath.includes(links[item].href)" :style="vTransitionName('menu-border', 'global')"
41-
class="absolute bottom-0 left-0 right-0 h-1 rounded-full bg-verse-700 dark:bg-verse-100"
42-
/>
38+
:target="!!links[item].href.includes(&quot;https&quot;) ? &quot;_blank&quot; : &quot;_self&quot;">
39+
<span v-if="currentPath.includes(links[item].href)" :style="vTransitionName('menu-border', 'global')"
40+
class="absolute bottom-0 left-0 right-0 h-1 rounded-full bg-verse-700 dark:bg-verse-100" />
4341

4442
<span class="relative z-20 p-2">{{ links[item].title }}</span>
4543

4644
<Icon v-if="!!links[item].href.includes(&quot;https&quot;)" name="carbon:launch" height="1em" />
4745
</NuxtLink>
4846

49-
<NuxtLink
50-
v-if="links[item].title === 'Advent Calendar'" class="md:hidden text-green-600 relative flex justify-center items-center animate-bounce"
51-
:href="links[item].href"
52-
53-
:target="!!links[item].href.includes(&quot;https&quot;) ? &quot;_blank&quot; : &quot;_self&quot;"
54-
>
55-
<IconCalendar class="w-8 h-8" />
47+
<NuxtLink v-if="links[item].title === 'Advent Calendar'"
48+
class="md:hidden text-green-600 relative flex justify-center items-center animate-bounce" :href="links[item].href"
49+
:target="!!links[item].href.includes(&quot;https&quot;) ? &quot;_blank&quot; : &quot;_self&quot;">
50+
<Icon name="carbon:calendar" class="w-8 h-8" />
5651
<div class="text-xs text-red-600 dark:text-red-100 absolute top-1/3 ">
5752
{{ today }}
5853
</div>
@@ -62,21 +57,14 @@ interface Props {
6257
<ul class="flex flex-col gap-2">
6358
<template v-for="submenu in links[item].children" :key="submenu">
6459
<li class:list="[submenu.class]">
65-
<NuxtLink
66-
:href="submenu.href"
60+
<NuxtLink :href="submenu.href"
6761
:target="!!submenu.href.includes(&quot;https&quot;) ? &quot;_blank&quot; : &quot;_self&quot;"
68-
class="hover:bg-verse-100 rounded-md block p-2"
69-
>
62+
class="hover:bg-verse-100 rounded-md block p-2">
7063
<div class="flex items-center gap-2">
71-
<div
72-
class="whitespace-nowrap"
73-
>
64+
<div class="whitespace-nowrap">
7465
{{ submenu.title }}
7566
</div>
76-
<Icon
77-
v-if="!!submenu.href.includes(&quot;https&quot;)" name="carbon:launch"
78-
class="w-4 h-4"
79-
/>
67+
<Icon v-if="!!submenu.href.includes(&quot;https&quot;)" name="carbon:launch" class="w-4 h-4" />
8068
</div>
8169
</NuxtLink>
8270
</li>
@@ -89,30 +77,30 @@ interface Props {
8977

9078
<style scoped lang="postcss">
9179
.nav-link {
92-
position: relative;
93-
94-
&:focus-within,
95-
&:hover {
80+
position: relative;
9681
97-
.menu-dropdown {
98-
display: block;
99-
opacity: 1;
100-
clip-path: circle(100%);
101-
transform: translateY(0px);
102-
padding-top: 7px;
103-
transform-origin: left -100px;
104-
}
105-
}
82+
&:focus-within,
83+
&:hover {
10684
10785
.menu-dropdown {
108-
position: absolute;
109-
left: 0;
110-
top: 100%;
111-
clip-path: circle(0%);
112-
/* left: 50%; */
113-
opacity: 0;
114-
transform: translateY(-5px);
115-
transition: 0.2s ease;
86+
display: block;
87+
opacity: 1;
88+
clip-path: circle(100%);
89+
transform: translateY(0px);
90+
padding-top: 7px;
91+
transform-origin: left -100px;
11692
}
93+
}
94+
95+
.menu-dropdown {
96+
position: absolute;
97+
left: 0;
98+
top: 100%;
99+
clip-path: circle(0%);
100+
/* left: 50%; */
101+
opacity: 0;
102+
transform: translateY(-5px);
103+
transition: 0.2s ease;
104+
}
117105
}
118106
</style>

0 commit comments

Comments
 (0)