Skip to content

Commit e685b97

Browse files
MrSunshyneMrSunshyne
authored
Merge pull request #247 from frontendmu/move-social-media-links-to-side
Add social media links on a left menu
2 parents 44c54b4 + 863f51b commit e685b97

File tree

6 files changed

+137
-24
lines changed

6 files changed

+137
-24
lines changed

‎packages/frontendmu-nuxt/components/auth/LoggedUser.vue

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,37 @@
11
<script setup lang="ts">
2-
import { onMounted } from 'vue'
3-
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
4-
import useAuth, { getClient } from '../../auth-utils/useAuth'
5-
import useAuthRedirect from '@/auth-utils/useAuthRedirect'
2+
import { onMounted } from "vue";
3+
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
4+
import useAuth, { getClient } from "../../auth-utils/useAuth";
5+
import useAuthRedirect from "@/auth-utils/useAuthRedirect";
66
7-
const { user, logout, isLoggedIn, getCurrentUser, responseFromServer, checkIfLoggedIn, avatarUrl } = useAuth(getClient())
7+
const { user, logout, isLoggedIn, checkIfLoggedIn, avatarUrl } = useAuth(
8+
getClient()
9+
);
810
9-
const { setUrl } = useAuthRedirect()
11+
const { setUrl } = useAuthRedirect();
1012
1113
onMounted(() => {
12-
checkIfLoggedIn()
13-
})
14+
checkIfLoggedIn();
15+
});
1416
</script>
1517

1618
<template>
1719
<div class="dark:text-zinc-200 dark:ring-white/10 pl-4">
1820
<BaseButton
19-
v-if="!isLoggedIn" href="/login" color="primary" class="font-medium hidden md:block"
21+
v-if="!isLoggedIn"
22+
href="/login"
23+
color="primary"
24+
class="font-medium hidden md:block"
2025
@click="setUrl()"
2126
>
2227
Log In
2328
</BaseButton>
2429
<BaseButton
25-
v-if="!isLoggedIn" href="/login" color="primary" class="font-medium block md:hidden" size="sm"
30+
v-if="!isLoggedIn"
31+
href="/login"
32+
color="primary"
33+
class="font-medium block md:hidden"
34+
size="sm"
2635
@click="setUrl()"
2736
>
2837
Log In
@@ -31,19 +40,24 @@ onMounted(() => {
3140
<Menu as="div" class="relative inline-block text-left">
3241
<div>
3342
<MenuButton
34-
class="inline-flex items-center w-full justify-center gap-x-1.5 rounded-full text-sm font-semibold text-verse-900 dark:text-verse-100 shadow-sm ring-gray-300 hover:bg-gray-50"
43+
class="inline-flex items-center w-full justify-center gap-x-1.5 rounded-full text-sm font-semibold text-verse-900 dark:text-verse-100 shadow-sm ring-gray-300 hover:bg-gray-50"
3544
>
3645
<div v-if="avatarUrl">
37-
<img class="w-10 aspect-square rounded-full" :src="avatarUrl">
46+
<img
47+
class="w-10 aspect-square rounded-full"
48+
:src="avatarUrl"
49+
alt="User Avatar"
50+
/>
3851
</div>
39-
<!-- <ChevronDownIcon class="-mr-1 h-5 w-5 text-gray-400" aria-hidden="true" /> -->
4052
</MenuButton>
4153
</div>
4254

4355
<transition
4456
enter-active-class="transition ease-out duration-100"
45-
enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100"
46-
leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100"
57+
enter-from-class="transform opacity-0 scale-95"
58+
enter-to-class="transform opacity-100 scale-100"
59+
leave-active-class="transition ease-in duration-75"
60+
leave-from-class="transform opacity-100 scale-100"
4761
leave-to-class="transform opacity-0 scale-95"
4862
>
4963
<MenuItems
@@ -53,15 +67,24 @@ onMounted(() => {
5367
<MenuItem v-slot="{ active }">
5468
<NuxtLink
5569
href="/user/me"
56-
class="block px-4 py-2 text-sm" :class="[active ? 'bg-gray-400/10 text-verse-900 dark:text-verse-100' : 'text-verse-900 dark:text-verse-100']"
70+
class="block px-4 py-2 text-sm"
71+
:class="[
72+
active
73+
? 'bg-gray-400/10 text-verse-900 dark:text-verse-100'
74+
: 'text-verse-900 dark:text-verse-100',
75+
]"
5776
>
58-
My
59-
Profile
77+
My Profile
6078
</NuxtLink>
6179
</MenuItem>
6280
<MenuItem v-slot="{ active }">
6381
<NuxtLink
64-
class="block px-4 py-2 text-sm cursor-pointer" :class="[active ? 'bg-gray-400/10 text-verse-900 dark:text-verse-100' : 'text-verse-900 dark:text-verse-100']"
82+
class="block px-4 py-2 text-sm cursor-pointer"
83+
:class="[
84+
active
85+
? 'bg-gray-400/10 text-verse-900 dark:text-verse-100'
86+
: 'text-verse-900 dark:text-verse-100',
87+
]"
6588
@click="logout()"
6689
>
6790
Logout
@@ -71,7 +94,10 @@ onMounted(() => {
7194
<div class="text-verse-900 dark:text-verse-100 p-4 text-sm">
7295
<div class="flex flex-col items-center justify-center gap-2">
7396
<div v-if="avatarUrl">
74-
<img class="w-16 aspect-square rounded-full" :src="avatarUrl">
97+
<img
98+
class="w-16 aspect-square rounded-full"
99+
:src="avatarUrl"
100+
/>
75101
</div>
76102

77103
{{ user?.full_name }}

‎packages/frontendmu-nuxt/components/icon/discord.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<svg
3-
xmlns="http://www.w3.org/2000/svg" class:list="{[props.class]}" fill-rule="evenodd" clip-rule="evenodd"
3+
xmlns="http://www.w3.org/2000/svg"
4+
class:list="{[props.class]}"
5+
fill-rule="evenodd"
6+
clip-rule="evenodd"
47
viewBox="0 0 24 24"
58
>
69
<path

‎packages/frontendmu-nuxt/components/icon/social/twitter.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script setup lang="ts">
2+
import { defineComponent } from "vue";
3+
4+
defineComponent({
5+
name: "HugeiconsNewTwitterEllipse",
6+
});
7+
</script>
8+
9+
<template>
10+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
11+
<g
12+
fill="none"
13+
stroke="currentColor"
14+
stroke-linecap="round"
15+
stroke-linejoin="round"
16+
stroke-width="1.5"
17+
color="currentColor"
18+
>
19+
<path
20+
d="m7 17l4.194-4.193M17 7l-4.193 4.194m0 0L9.777 7H7l4.194 5.807m1.612-1.614L17 17h-2.778l-3.028-4.193"
21+
/>
22+
<path
23+
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10"
24+
/>
25+
</g>
26+
</svg>
27+
</template>

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<nav
3+
class="fixed bottom-[50px] gap-4 flex-col pl-4 justify-end w-10 hidden xl:flex z-30"
4+
>
5+
<a
6+
target="_blank"
7+
href="https://discord.gg/WxXW9Jvv6k?ref=frontend.mu"
8+
class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
9+
>
10+
<IconDiscord class="w-6" />
11+
</a>
12+
13+
<a
14+
target="_blank"
15+
href="https://github.com/Front-End-Coders-Mauritius?ref=frontend.mu"
16+
class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
17+
>
18+
<IconGithub class="w-6" />
19+
</a>
20+
21+
<a
22+
target="_blank"
23+
href="https://chat.whatsapp.com/invite/0kQ2QX0ZQ0j1YQ4X6Q4Q4Q"
24+
class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
25+
>
26+
<IconWhatsappCommunity class="w-6" />
27+
</a>
28+
29+
<a
30+
target="_blank"
31+
href="https://twitter.com/frontendmu"
32+
class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
33+
>
34+
<IconSocialTwitter class="w-6" />
35+
</a>
36+
37+
<a
38+
target="_blank"
39+
href="https://www.instagram.com/frontend.mu/?ref=frontend.mu"
40+
class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
41+
>
42+
<IconInstagram class="w-6" />
43+
</a>
44+
45+
<a
46+
target="_blank"
47+
href="https://www.linkedin.com/company/81846464/admin/?ref=frontend.mu"
48+
class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200"
49+
>
50+
<IconLinkedin class="w-6" />
51+
</a>
52+
</nav>
53+
</template>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@
1010
</template>
1111
<!-- <RandomColor slot="dock-right" /> -->
1212
</SiteMenu>
13-
<div id="sticky-observer" class="bg-transparent z-0 h-4 w-full top-32 relative" />
13+
14+
<div
15+
id="sticky-observer"
16+
class="bg-transparent z-0 h-4 w-full top-32 relative"
17+
/>
1418
</template>
1519

1620
<!-- <script>

‎packages/frontendmu-nuxt/layouts/default.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<script setup lang="ts">
2-
defineOgImageComponent('Generic')
2+
defineOgImageComponent("Generic");
33
</script>
44

55
<template>
66
<NuxtLoadingIndicator />
77
<LayoutBackdrop>
88
<SiteNavigation />
9-
9+
<SiteLeftMenu />
1010
<slot />
1111

1212
<HomeSponsorHighlight />

0 commit comments

Comments
 (0)