diff --git a/webapp/components/AvatarMenu/AvatarMenu.spec.js b/webapp/components/AvatarMenu/AvatarMenu.spec.js
index 77de68de4..15f536ee7 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.spec.js
+++ b/webapp/components/AvatarMenu/AvatarMenu.spec.js
@@ -90,6 +90,13 @@ describe('AvatarMenu.vue', () => {
expect(profileLink.exists()).toBe(true)
})
+ it('displays a link to "My groups"', () => {
+ const profileLink = wrapper
+ .findAll('.ds-menu-item span')
+ .at(wrapper.vm.routes.findIndex((route) => route.path === '/my-groups'))
+ expect(profileLink.exists()).toBe(true)
+ })
+
it('displays a link to the notifications page', () => {
const notificationsLink = wrapper
.findAll('.ds-menu-item span')
@@ -103,6 +110,11 @@ describe('AvatarMenu.vue', () => {
.at(wrapper.vm.routes.findIndex((route) => route.path === '/settings'))
expect(settingsLink.exists()).toBe(true)
})
+
+ it('displays a total of 4 links', () => {
+ const allLinks = wrapper.findAll('.ds-menu-item')
+ expect(allLinks).toHaveLength(4)
+ })
})
describe('role moderator', () => {
@@ -125,9 +137,9 @@ describe('AvatarMenu.vue', () => {
expect(moderationLink.exists()).toBe(true)
})
- it('displays a total of 4 links', () => {
+ it('displays a total of 5 links', () => {
const allLinks = wrapper.findAll('.ds-menu-item')
- expect(allLinks).toHaveLength(4)
+ expect(allLinks).toHaveLength(5)
})
})
@@ -151,9 +163,9 @@ describe('AvatarMenu.vue', () => {
expect(adminLink.exists()).toBe(true)
})
- it('displays a total of 5 links', () => {
+ it('displays a total of 6 links', () => {
const allLinks = wrapper.findAll('.ds-menu-item')
- expect(allLinks).toHaveLength(5)
+ expect(allLinks).toHaveLength(6)
})
})
})
diff --git a/webapp/components/AvatarMenu/AvatarMenu.vue b/webapp/components/AvatarMenu/AvatarMenu.vue
index 061e96221..5caec07f2 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.vue
+++ b/webapp/components/AvatarMenu/AvatarMenu.vue
@@ -72,10 +72,15 @@ export default {
}
const routes = [
{
- name: this.$t('profile.name'),
+ name: this.$t('header.avatarMenu.myProfile'),
path: `/profile/${this.user.id}/${this.user.slug}`,
icon: 'user',
},
+ {
+ name: this.$t('header.avatarMenu.myGroups'),
+ path: '/my-groups',
+ icon: 'users',
+ },
{
name: this.$t('notifications.pageLink'),
path: '/notifications',
diff --git a/webapp/components/Group/GroupButton.vue b/webapp/components/Group/GroupButton.vue
new file mode 100644
index 000000000..2000e3046
--- /dev/null
+++ b/webapp/components/Group/GroupButton.vue
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/webapp/constants/groups.js b/webapp/constants/groups.js
index 3abf0d12a..1c49d3ff3 100644
--- a/webapp/constants/groups.js
+++ b/webapp/constants/groups.js
@@ -2,3 +2,4 @@
export const NAME_LENGTH_MIN = 3
export const NAME_LENGTH_MAX = 50
export const DESCRIPTION_WITHOUT_HTML_LENGTH_MIN = 100 // with removed HTML tags
+export const SHOW_GROUP_BUTTON_IN_HEADER = true
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 3e2a4aa69..6fb3a2f54 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -88,6 +88,9 @@
+
+
+
@@ -112,20 +115,22 @@