Align main menu for lf design (#2615)

frontend/src/assets/scss/index.scss

@@ -33,6 +33,7 @@
 @import 'form/checkbox';
 @import 'form/switch';
 @import 'tooltip';
+@import 'layout/index';
 
 @import '../../../config/styles';
 @import '../../ui-kit';

frontend/src/assets/scss/layout/_menu.scss

@@ -0,0 +1,32 @@
+.l-menu{
+  @apply border-r border-gray-200 bg-white py-4 flex flex-col transition-all;
+
+  &__link{
+    @apply w-65 flex flex-nowrap items-center border-l-3 h-9 px-5 border-transparent text-gray-900 text-medium;
+
+    .c-icon{
+      @apply text-gray-400 mr-3 font-normal;
+    }
+
+    &:hover:not(.is-disabled, .is-active){
+      @apply text-gray-900 #{!important};
+      @apply bg-gray-50;
+    }
+
+    &.is-active{
+      @apply bg-primary-50 border-primary-500 font-bold text-gray-900 #{!important};
+
+      .c-icon{
+        @apply text-black;
+      }
+    }
+
+    &.is-disabled{
+      @apply text-gray-400 cursor-not-allowed #{!important};
+
+      .c-icon{
+        @apply text-gray-300 #{!important};
+      }
+    }
+  }
+}

frontend/src/assets/scss/layout/index.scss

@@ -0,0 +1 @@
+@import "menu";

frontend/src/assets/scss/tooltip.scss

@@ -2,20 +2,24 @@
   position:relative;
 
   &:before{
-    content: attr(data-tooltip);
-    position:absolute;
-
-    bottom: calc(100% + 0.75rem);
-    left:50%;
-    transform:translateX(-50%);
-
-    width: max-content;
-    max-width: 20rem;
-    display: block;
-    @apply bg-gray-900 text-white rounded-md text-2xs font-medium leading-5 py-0.5 px-1.5 opacity-0 transition invisible;
+    @apply invisible opacity-0 transition;
   }
 
   &:hover:before {
     @apply opacity-100 visible;
   }
 }
+
+[data-tooltip]:before, .el-popper.is-dark{
+  content: attr(data-tooltip);
+  position:absolute;
+
+  bottom: calc(100% + 0.75rem);
+  left:50%;
+  transform:translateX(-50%);
+
+  width: max-content;
+  max-width: 20rem;
+  display: block;
+  @apply bg-gray-900 text-white rounded-md text-2xs font-medium leading-5 py-0.5 px-1.5;
+}

frontend/src/modules/layout/components/layout.vue

@@ -2,9 +2,9 @@
   <el-container v-if="tenant" class="flex-col">
     <el-container style="height: calc(100vh - 60px); margin-top: 60px;">
       <!-- App menu -->
-      <app-lf-menu />
+      <lf-menu />
 
-      <el-container class="bg-white rounded-tl-2xl">
+      <el-container class="bg-white">
         <el-main id="main-page-wrapper" class="relative">
           <app-lf-banners />
           <router-view />
@@ -14,25 +14,18 @@
   </el-container>
 </template>
 
-<script>
-import AppLfMenu from '@/modules/lf/layout/components/lf-menu.vue';
+<script setup lang="ts">
 import AppLfBanners from '@/modules/lf/layout/components/lf-banners.vue';
 import { useAuthStore } from '@/modules/auth/store/auth.store';
 import { storeToRefs } from 'pinia';
+import LfMenu from '@/modules/layout/components/menu/menu.vue';
 
+const authStore = useAuthStore();
+const { tenant } = storeToRefs(authStore);
+</script>
+
+<script lang="ts">
 export default {
   name: 'AppLayout',
-
-  components: {
-    AppLfMenu,
-    AppLfBanners,
-  },
-
-  setup() {
-    const authStore = useAuthStore();
-    const { token, tenant } = storeToRefs(authStore);
-
-    return { tenant, token };
-  },
 };
 </script>

frontend/src/modules/layout/components/menu/menu-link.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-tooltip
+    :hide-after="50"
+    effect="dark"
+    placement="right"
+    raw-content
+    :content="props.title"
+    :disabled="!props.isCollapsed"
+  >
+    <component
+      :is="props.disabled ? 'span' : 'router-link'"
+      :to="props.to"
+      v-bind="$attrs"
+      class="l-menu__link"
+      active-class="is-active"
+      :class="{ 'is-disabled': props.disabled }"
+    >
+      <lf-icon :name="props.icon" :size="16" />
+      <span class="transition" :class="!props.isCollapsed ? 'opacity-100' : 'opacity-0'">
+        {{ props.title }}
+      </span>
+    </component>
+  </el-tooltip>
+</template>
+
+<script setup lang="ts">
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const props = defineProps<{
+  isCollapsed: boolean;
+  to: any,
+  icon: string,
+  title: string,
+  disabled?: boolean,
+}>();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfMenuLink',
+};
+</script>

frontend/src/modules/layout/components/menu/menu.vue

@@ -0,0 +1,146 @@
+<template>
+  <aside
+    class="l-menu"
+    :class="isCollapsed ? 'w-16 min-w-16' : 'w-65 min-w-65'"
+  >
+    <lf-menu-link
+      title="All project groups"
+      icon="folders-line"
+      :is-collapsed="isCollapsed"
+      :to="{ path: '/project-groups' }"
+    />
+    <div class="px-3 py-4">
+      <app-lf-menu-project-group-selection
+        v-if="!isCollapsed"
+      />
+      <el-divider v-else class="!mt-1 !mb-0" />
+    </div>
+    <lf-menu-link
+      title="Overview"
+      icon="home-5-line"
+      :is-collapsed="isCollapsed"
+      :to="{ path: '/', query: { projectGroup: selectedProjectGroup?.id } }"
+      :disabled="!selectedProjectGroup"
+    />
+    <lf-menu-link
+      title="People"
+      icon="group-2-line"
+      :is-collapsed="isCollapsed"
+      :to="{ path: '/people', query: { projectGroup: selectedProjectGroup?.id } }"
+      :disabled="!selectedProjectGroup"
+      @click="onMembersClick"
+    />
+    <lf-menu-link
+      title="Organizations"
+      icon="community-line"
+      :is-collapsed="isCollapsed"
+      :to="{ path: '/organizations', query: { projectGroup: selectedProjectGroup?.id } }"
+      :disabled="!selectedProjectGroup"
+      @click="onOrganizationsClick"
+    />
+    <lf-menu-link
+      title="Activities"
+      icon="radar-line"
+      :is-collapsed="isCollapsed"
+      :to="{ path: '/activities', query: { projectGroup: selectedProjectGroup?.id } }"
+      :disabled="!selectedProjectGroup"
+    />
+    <div class="flex-grow" />
+    <div class="flex justify-end pb-8">
+      <div
+        class="bg-gray-500 w-6 h-8 rounded-l flex items-center justify-center cursor-pointer"
+        @click="toggleMenu()"
+      >
+        <lf-icon
+          :name="`arrow-${isCollapsed ? 'right' : 'left'}-double-fill`"
+          :size="20"
+          class="text-white"
+        />
+      </div>
+    </div>
+    <lf-menu-link
+      v-if="hasPermission(LfPermission.eagleEyeRead)"
+      title="Community Lens"
+      icon="eye-2-line"
+      :is-collapsed="isCollapsed"
+      :to="{ path: '/community-lens' }"
+    />
+    <div class="px-3 py-4">
+      <div class="border-b border-gray-200" />
+    </div>
+    <lf-menu-link
+      v-if="hasPermission(LfPermission.projectGroupCreate) || hasPermission(LfPermission.projectGroupEdit)"
+      title="Admin panel"
+      icon="settings-3-line"
+      :is-collapsed="isCollapsed"
+      :to="{ path: '/admin' }"
+    />
+  </aside>
+</template>
+
+<script setup>
+import { watch } from 'vue';
+import { useActivityTypeStore } from '@/modules/activity/store/type';
+import { useLfSegmentsStore } from '@/modules/lf/segments/store';
+import { storeToRefs } from 'pinia';
+import AppLfMenuProjectGroupSelection from '@/modules/lf/layout/components/lf-menu-project-group-selection.vue';
+import { mapGetters } from '@/shared/vuex/vuex.helpers';
+import { useStore } from 'vuex';
+import { useActivityStore } from '@/modules/activity/store/pinia';
+import { useMemberStore } from '@/modules/member/store/pinia';
+import allMembers from '@/modules/member/config/saved-views/views/all-members';
+import allOrganizations from '@/modules/organization/config/saved-views/views/all-organizations';
+import { useOrganizationStore } from '@/modules/organization/store/pinia';
+import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
+import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
+import LfMenuLink from '@/modules/layout/components/menu/menu-link.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
+const store = useStore();
+
+const { menuCollapsed: isCollapsed } = mapGetters('layout');
+
+const { fetchActivityTypes } = useActivityTypeStore();
+const { fetchActivityChannels } = useActivityStore();
+
+const lsSegmentsStore = useLfSegmentsStore();
+const { selectedProjectGroup } = storeToRefs(lsSegmentsStore);
+
+const memberStore = useMemberStore();
+const { filters: membersFilters } = storeToRefs(memberStore);
+
+const organizationStore = useOrganizationStore();
+const { filters: organizationFilters } = storeToRefs(organizationStore);
+
+const { hasPermission } = usePermissions();
+
+const onMembersClick = () => {
+  membersFilters.value = allMembers.config;
+};
+
+const onOrganizationsClick = () => {
+  organizationFilters.value = allOrganizations.config;
+};
+
+watch(
+  selectedProjectGroup,
+  (updatedProjectGroup) => {
+    if (updatedProjectGroup) {
+      fetchActivityTypes([selectedProjectGroup.value.id]);
+      fetchActivityChannels([selectedProjectGroup.value.id]);
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+function toggleMenu() {
+  store.dispatch('layout/toggleMenu');
+}
+
+</script>
+
+<script>
+export default {
+  name: 'LfMenu',
+};
+</script>