Skip to content

Commit 3f3e460

Browse files
MrSunshyneMrSunshyne
authored
Merge pull request #251 from the-code-raider/main
fix: Fixed redirect to github from the left menu social icons and added a constants file
2 parents e685b97 + a94d1a3 commit 3f3e460

File tree

3 files changed

+106
-88
lines changed

3 files changed

+106
-88
lines changed

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,60 @@
1+
<script setup lang="ts">
2+
import { DISCORD_URL, GITHUB_URL, INSTAGRAM_URL, LINKEDIN_URL, TWITTER_URL, WHATSAPP_URL } from '@/constants'
3+
</script>
4+
15
<template>
26
<nav
37
class="fixed bottom-[50px] gap-4 flex-col pl-4 justify-end w-10 hidden xl:flex z-30"
48
>
59
<a
610
target="_blank"
7-
href="https://discord.gg/WxXW9Jvv6k?ref=frontend.mu"
11+
:href="DISCORD_URL"
12+
rel="noopener noreferrer nofollow"
813
class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
914
>
1015
<IconDiscord class="w-6" />
1116
</a>
1217

1318
<a
1419
target="_blank"
15-
href="https://github.com/Front-End-Coders-Mauritius?ref=frontend.mu"
20+
:href="GITHUB_URL"
21+
rel="noopener noreferrer nofollow"
1622
class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
1723
>
1824
<IconGithub class="w-6" />
1925
</a>
2026

2127
<a
2228
target="_blank"
23-
href="https://chat.whatsapp.com/invite/0kQ2QX0ZQ0j1YQ4X6Q4Q4Q"
29+
:href="WHATSAPP_URL"
30+
rel="noopener noreferrer nofollow"
2431
class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
2532
>
2633
<IconWhatsappCommunity class="w-6" />
2734
</a>
2835

2936
<a
3037
target="_blank"
31-
href="https://twitter.com/frontendmu"
38+
:href="TWITTER_URL"
39+
rel="noopener noreferrer nofollow"
3240
class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
3341
>
3442
<IconSocialTwitter class="w-6" />
3543
</a>
3644

3745
<a
3846
target="_blank"
39-
href="https://www.instagram.com/frontend.mu/?ref=frontend.mu"
47+
:href="INSTAGRAM_URL"
48+
rel="noopener noreferrer nofollow"
4049
class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
4150
>
4251
<IconInstagram class="w-6" />
4352
</a>
4453

4554
<a
4655
target="_blank"
47-
href="https://www.linkedin.com/company/81846464/admin/?ref=frontend.mu"
56+
:href="LINKEDIN_URL"
57+
rel="noopener noreferrer nofollow"
4858
class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
4959
>
5060
<IconLinkedin class="w-6" />

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

Lines changed: 84 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,170 +1,172 @@
11
<script setup lang="ts">
2-
import { onMounted } from "vue";
2+
import { onMounted } from 'vue'
3+
import { DISCORD_URL, GITHUB_URL, INSTAGRAM_URL, LINKEDIN_URL, TWITTER_URL, WHATSAPP_URL } from '@/constants'
34
4-
const router = useRouter();
5+
const router = useRouter()
56
67
interface TMenuItem {
7-
title: string;
8-
href: string;
9-
class?: string;
10-
children?: TMenuItem[];
8+
title: string
9+
href: string
10+
class?: string
11+
children?: TMenuItem[]
1112
}
1213
1314
interface TMenu {
14-
[key: string]: TMenuItem;
15+
[key: string]: TMenuItem
1516
}
1617
1718
const links: TMenu = {
1819
about: {
19-
title: "About",
20-
href: "/about",
21-
class: "hidden md:block",
20+
title: 'About',
21+
href: '/about',
22+
class: 'hidden md:block',
2223
children: [
2324
// {
2425
// title: 'FAQ',
2526
// href: '/faq',
2627
// class: '',
2728
// },
2829
{
29-
title: "History",
30-
href: "/history",
31-
class: "",
30+
title: 'History',
31+
href: '/history',
32+
class: '',
3233
},
3334
{
34-
title: "Contribute",
35-
href: "/contribute",
36-
class: "",
35+
title: 'Contribute',
36+
href: '/contribute',
37+
class: '',
3738
},
3839
{
39-
title: "Code of conduct",
40-
href: "/code_of_conduct",
41-
class: "",
40+
title: 'Code of conduct',
41+
href: '/code_of_conduct',
42+
class: '',
4243
},
4344
{
44-
title: "Coding Guidelines",
45-
href: "/coding_guidelines",
46-
class: "",
45+
title: 'Coding Guidelines',
46+
href: '/coding_guidelines',
47+
class: '',
4748
},
4849
{
49-
title: "WhatsApp",
50-
href: "https://chat.whatsapp.com/invite/0kQ2QX0ZQ0j1YQ4X6Q4Q4Q",
51-
class: "",
50+
title: 'WhatsApp',
51+
href: WHATSAPP_URL,
52+
class: '',
5253
},
5354
{
54-
title: "Instagram",
55-
href: "https://www.instagram.com/frontend.mu/?ref=frontend.mu",
56-
class: "",
55+
title: 'Instagram',
56+
href: INSTAGRAM_URL,
57+
class: '',
5758
},
5859
{
59-
title: "LinkedIn",
60-
href: "https://www.linkedin.com/company/81846464/admin/?ref=frontend.mu",
61-
class: "",
60+
title: 'LinkedIn',
61+
href: LINKEDIN_URL,
62+
class: '',
6263
},
6364
{
64-
title: "Join Discord",
65-
href: "https://discord.gg/WxXW9Jvv6k?ref=frontend.mu",
66-
class: "",
65+
title: 'Join Discord',
66+
href: DISCORD_URL,
67+
class: '',
6768
},
6869
{
69-
title: "GitHub",
70-
href: "https://github.com/frontendmu?ref=frontend.mu",
71-
class: "",
70+
title: 'GitHub',
71+
href: GITHUB_URL,
72+
class: '',
7273
},
7374
{
74-
title: "Twitter",
75-
href: "https://twitter.com/frontendmu?ref=frontend.mu",
76-
class: "",
75+
title: 'Twitter',
76+
href: TWITTER_URL,
77+
class: '',
7778
},
7879
],
7980
},
8081
meetups: {
81-
title: "Meetups",
82-
href: "/meetups",
82+
title: 'Meetups',
83+
href: '/meetups',
8384
},
8485
community: {
85-
title: "Community",
86-
href: "/community",
86+
title: 'Community',
87+
href: '/community',
8788
},
8889
team: {
89-
title: "Team",
90-
href: "/team",
91-
class: "hidden md:block",
90+
title: 'Team',
91+
href: '/team',
92+
class: 'hidden md:block',
9293
},
9394
sponsors: {
94-
title: "Sponsors",
95-
href: "/sponsors",
96-
class: "hidden md:block",
95+
title: 'Sponsors',
96+
href: '/sponsors',
97+
class: 'hidden md:block',
9798
},
98-
};
99+
}
99100
100101
function toggleHeader() {
101-
const headerElement = document.querySelector(".menu-wrapper") as HTMLElement;
102+
const headerElement = document.querySelector('.menu-wrapper') as HTMLElement
102103
103104
// headerOffset tracks how much the header has been moved vertically
104-
let headerOffset = 0;
105+
let headerOffset = 0
105106
106107
// This keeps track of the previous scroll position to calculate whether the user is scrolling up or down.
107-
let previousScrollPosition = 0;
108+
let previousScrollPosition = 0
108109
109110
if (headerElement) {
110111
const handleScroll = () => {
111112
window.requestAnimationFrame(() => {
112-
const headerHeight = headerElement.clientHeight;
113+
const headerHeight = headerElement.clientHeight
113114
114115
// the current vertical scroll position of the page
115-
const currentScrollPosition =
116-
window.scrollY || document.documentElement.scrollTop;
116+
const currentScrollPosition
117+
= window.scrollY || document.documentElement.scrollTop
117118
118119
// the distance that the user has scrolled since the last scroll event
119-
const distance = currentScrollPosition - previousScrollPosition;
120+
const distance = currentScrollPosition - previousScrollPosition
120121
121122
// New vertical position of the header
122123
const nextHeaderOffset = Math.min(
123124
Math.max(headerOffset + distance, 0),
124-
headerHeight
125-
);
125+
headerHeight,
126+
)
126127
127128
// checks if the user has scrolled past the header and nextHeaderOffset differs from the current position
128129
if (
129-
currentScrollPosition >= headerHeight &&
130-
nextHeaderOffset !== headerOffset
130+
currentScrollPosition >= headerHeight
131+
&& nextHeaderOffset !== headerOffset
131132
) {
132-
headerOffset = nextHeaderOffset;
133-
headerElement.style.transform = `translateY(-${headerOffset}px)`;
133+
headerOffset = nextHeaderOffset
134+
headerElement.style.transform = `translateY(-${headerOffset}px)`
134135
}
135136
136137
// if the user has scrolled past the header, we add these classes
137138
if (currentScrollPosition > headerHeight) {
138139
headerElement.classList.add(
139-
"intersect",
140-
"shadow-sm",
141-
"dark:bg-verse-900/50",
142-
"bg-verse-50/50"
143-
);
144-
} else {
140+
'intersect',
141+
'shadow-sm',
142+
'dark:bg-verse-900/50',
143+
'bg-verse-50/50',
144+
)
145+
}
146+
else {
145147
headerElement.classList.remove(
146-
"intersect",
147-
"shadow-sm",
148-
"dark:bg-verse-900/50",
149-
"bg-verse-50/50"
150-
);
148+
'intersect',
149+
'shadow-sm',
150+
'dark:bg-verse-900/50',
151+
'bg-verse-50/50',
152+
)
151153
}
152154
153-
previousScrollPosition = currentScrollPosition;
154-
});
155-
};
155+
previousScrollPosition = currentScrollPosition
156+
})
157+
}
156158
157-
window.addEventListener("scroll", handleScroll, { passive: true });
159+
window.addEventListener('scroll', handleScroll, { passive: true })
158160
}
159161
}
160162
161163
function handleRightClick(event: MouseEvent) {
162164
// prevent default and navigate to /branding
163-
event.preventDefault();
164-
router.push("/branding");
165+
event.preventDefault()
166+
router.push('/branding')
165167
}
166168
167-
onMounted(toggleHeader);
169+
onMounted(toggleHeader)
168170
</script>
169171

170172
<template>

‎packages/frontendmu-nuxt/constants.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const GITHUB_URL = 'https://github.com/frontendmu?ref=frontend.mu'
2+
export const DISCORD_URL = 'https://discord.gg/WxXW9Jvv6k?ref=frontend.mu'
3+
export const WHATSAPP_URL = 'https://chat.whatsapp.com/invite/0kQ2QX0ZQ0j1YQ4X6Q4Q4Q'
4+
export const TWITTER_URL = 'https://twitter.com/frontendmu?ref=frontend.mu'
5+
export const INSTAGRAM_URL = 'https://www.instagram.com/frontend.mu/?ref=frontend.mu'
6+
export const LINKEDIN_URL = 'https://www.linkedin.com/company/81846464/admin/?ref=frontend.mu'

0 commit comments

Comments
 (0)