@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.211

package/es/components/organism/LeftMenu/constants/variables.d.ts

@@ -0,0 +1,32 @@
+import { TMenuFeatureItem } from '../types';
+export declare const APP_KEYS: {
+    HOME: string;
+    MARKETING: string;
+    CONTENT: string;
+    TEMPLATES: string;
+    PROFILES: string;
+    DATA: string;
+    INSIGHTS: string;
+    SETTINGS: string;
+};
+export declare const MENU_ITEM_TYPE: {
+    APP: number;
+    MENU: number;
+    GROUP_MENU: number;
+};
+export declare const ICON_SIZE = 20;
+export declare const HOME_MENU_ITEMS: Record<string, TMenuFeatureItem>;
+export declare const MARKETING_ROUTES: {
+    CHANNEL: string;
+};
+export declare const MARKETING_CHANNEL_KEY: {
+    readonly ALL_CHANNEL: 0;
+    readonly ORCHESTRATION: 8;
+};
+export declare const MARKETING_CHANNEL_CODE: {
+    readonly ALL_CHANNEL: "ALL_CHANNEL";
+    readonly ORCHESTRATION: "ORCHESTRATION";
+};
+export declare const RENDER_OPTION: {
+    readonly CHANNEL: "destination_channel";
+};

package/es/components/organism/LeftMenu/constants/variables.js

@@ -0,0 +1,44 @@
+export const APP_KEYS = {
+    HOME: 'HOME',
+    MARKETING: 'MARKETING',
+    CONTENT: 'PROMOTION_CENTER',
+    TEMPLATES: 'TEMPLATE',
+    PROFILES: 'PROFILE',
+    DATA: 'DATA',
+    INSIGHTS: 'INSIGHT',
+    SETTINGS: 'SETTING',
+};
+export const MENU_ITEM_TYPE = {
+    APP: 1,
+    MENU: 2,
+    GROUP_MENU: 3,
+};
+export const ICON_SIZE = 20;
+/* HOME APP */
+export const HOME_MENU_ITEMS = {
+    RECENT: {
+        menu_item_name: 'Recent',
+        menu_item_code: 'recentDashboard',
+        icon_name: null,
+    },
+    OWNERS: {
+        menu_item_name: 'Owners',
+        menu_item_code: 'ownedDashboard',
+        icon_name: null,
+    },
+    SHARED_WITH_ME: {
+        menu_item_name: 'Shared with me',
+        menu_item_code: 'sharedDashboard',
+        icon_name: null,
+    },
+};
+/* MARKETING APP */
+export const MARKETING_ROUTES = {
+    CHANNEL: '/gen2/:networkId/:user_id/marketing-hub/journeys/:channelId/list',
+};
+export const MARKETING_CHANNEL_KEY = { ALL_CHANNEL: 0, ORCHESTRATION: 8 };
+export const MARKETING_CHANNEL_CODE = {
+    ALL_CHANNEL: 'ALL_CHANNEL',
+    ORCHESTRATION: 'ORCHESTRATION',
+};
+export const RENDER_OPTION = { CHANNEL: 'destination_channel' };

package/es/components/organism/LeftMenu/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useLeftMenu } from './useLeftMenu';

package/es/components/organism/LeftMenu/hooks/index.js

@@ -0,0 +1 @@
+export { useLeftMenu } from './useLeftMenu';

package/es/components/organism/LeftMenu/hooks/useLeftMenu.d.ts

@@ -0,0 +1,14 @@
+import { LeftMenuProps } from '..';
+interface TState {
+    hoverItem: string;
+    isExpandMenu: boolean;
+}
+export declare const useLeftMenu: (props: LeftMenuProps) => {
+    state: TState;
+    activeAppCode: string;
+    permissionMenu: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
+    onToggleChildMenu: () => void;
+    onMouseEnter: (key: string) => void;
+    onMouseLeave: () => void;
+};
+export {};

package/es/components/organism/LeftMenu/hooks/useLeftMenu.js

@@ -0,0 +1,183 @@
+// Libraries
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import { isArray, sortBy } from 'lodash';
+import { useLocation } from 'react-router-dom';
+// Contexts
+import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
+// Queries
+import { useGetDashboard, useGetDestinationChannel, useGetListMenu, useGetListMenuPermission, } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
+// Utils
+import { findActiveAppCodeByUrl, findLastMatchedCodeByUrl, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
+// Store
+import { useLeftMenuStore } from '../stores';
+const initialState = {
+    hoverItem: '',
+    isExpandMenu: true,
+};
+export const useLeftMenu = (props) => {
+    // Props
+    const { objectType = 'OVERVIEW', objectId = 1, isGrouped = true, onActiveMenuCodeChange } = props;
+    // Hooks
+    const { pathname, hash, search } = useLocation();
+    // Contexts
+    const appConfig = useContextSelector(AppConfigContext, state => state);
+    // Stores
+    const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
+    const setLeftMenuState = useLeftMenuStore(store => store.setState);
+    // Destructuring variables
+    const { auth, languageCode } = appConfig;
+    // State
+    const [state, setState] = useState(initialState);
+    // Queries
+    const { data: menuList } = useGetListMenu({
+        args: {
+            auth: {
+                token: '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4' || (auth === null || auth === void 0 ? void 0 : auth.token),
+                url: 'https://sandbox-permission.ants.vn',
+                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
+                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
+                accountId: auth === null || auth === void 0 ? void 0 : auth.accountId,
+            },
+            params: {
+                type: 'menu-item-permission',
+            },
+        },
+    });
+    const { data: menuListPermission } = useGetListMenuPermission({
+        args: {
+            auth: {
+                token: '5474r2x214z254a4u2a4y4t5w244o444l4s4f464n5k5' || (auth === null || auth === void 0 ? void 0 : auth.token),
+                url: 'https://permission.antsomi.com',
+                userId: '1600080515' || (auth === null || auth === void 0 ? void 0 : auth.userId),
+                accountId: '1600080515' || (auth === null || auth === void 0 ? void 0 : auth.accountId),
+            },
+            params: {
+                type: 'list-app',
+                from: 'side',
+                hasChild: true,
+                languageCode,
+            },
+        },
+    });
+    const { data: dashboardData } = useGetDashboard({
+        args: {
+            auth: {
+                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                url: 'https://sandbox-app.cdp.asia/hub',
+                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
+                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
+            },
+            params: {
+                objectType,
+                objectId,
+                isGrouped,
+                languageCode,
+            },
+        },
+    });
+    const { data: destinationChannel } = useGetDestinationChannel({
+        args: {
+            auth: {
+                token: '5474r2x214z2a46403e4y4749426s2v544r2i4u2k5t5' || (auth === null || auth === void 0 ? void 0 : auth.token),
+                url: 'https://sandbox-app.cdp.asia/hub',
+                userId: '1600085179' || (auth === null || auth === void 0 ? void 0 : auth.userId),
+                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
+            },
+            params: {
+                objectType: 'STORIES',
+                languageCode,
+            },
+        },
+    });
+    // Variables
+    const flattenMenuPermission = flattenMenuArray(menuListPermission || [], 'childs');
+    // Memos
+    const permissionMenu = useMemo(() => recursivePermissionMenu(sortBy((menuList === null || menuList === void 0 ? void 0 : menuList.rows) || [], ['level_position']), flattenMenuPermission), [menuList === null || menuList === void 0 ? void 0 : menuList.rows, flattenMenuPermission]);
+    const mappingChildrenMenu = useMemo(() => getMappingAppChildren({
+        menuList: permissionMenu,
+        auth,
+        dashboardData,
+        destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
+    }), [auth, dashboardData, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, permissionMenu]);
+    // Side Effects
+    /**
+     * Change list menu children when hovering or activating items, giving priority to hovering items
+     */
+    useEffect(() => {
+        var _a;
+        const appCode = state.hoverItem ? state.hoverItem : activeAppCode;
+        if (isArray(mappingChildrenMenu)) {
+            setLeftMenuState({
+                menuItems: mappingChildrenMenu,
+                appMenuChildren: ((_a = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === appCode)) === null || _a === void 0 ? void 0 : _a.children) || [],
+            });
+        }
+    }, [activeAppCode, mappingChildrenMenu, state.hoverItem, setLeftMenuState]);
+    /**
+     * Active App Item having code matching url
+     */
+    useEffect(() => {
+        const url = `${pathname}${hash}${search}`;
+        const matchAppCode = findActiveAppCodeByUrl({ url, menuItems: mappingChildrenMenu, auth });
+        if (matchAppCode && matchAppCode !== activeAppCode) {
+            setLeftMenuState({ activeAppCode: matchAppCode });
+        }
+    }, [
+        activeAppCode,
+        appConfig.auth,
+        auth,
+        hash,
+        mappingChildrenMenu,
+        pathname,
+        permissionMenu,
+        search,
+        setLeftMenuState,
+    ]);
+    /**
+     * Callback function when url change
+     */
+    useEffect(() => {
+        const url = `${pathname}${hash}${search}`;
+        const matchedCode = findLastMatchedCodeByUrl({
+            url,
+            menuItems: mappingChildrenMenu,
+            auth,
+        });
+        onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(matchedCode, flattenMenuPermission);
+    }, [
+        auth,
+        flattenMenuPermission,
+        hash,
+        mappingChildrenMenu,
+        onActiveMenuCodeChange,
+        pathname,
+        search,
+    ]);
+    /* Callbacks */
+    const onToggleChildMenu = useCallback(() => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));
+    }, []);
+    const onMouseEnter = useCallback((key) => {
+        if (!state.isExpandMenu) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: key })));
+        }
+    }, [state.isExpandMenu]);
+    const onMouseLeave = useCallback(() => {
+        if (!state.isExpandMenu) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '' })));
+        }
+    }, [state.isExpandMenu]);
+    return {
+        /* State */
+        state,
+        /* Zustand */
+        activeAppCode,
+        /* Data Queries */
+        permissionMenu,
+        /* Callbacks */
+        onToggleChildMenu,
+        onMouseEnter,
+        onMouseLeave,
+    };
+};

package/es/components/organism/LeftMenu/hooks/useNavigatePath.d.ts

@@ -0,0 +1,5 @@
+export declare const useNavigatePath: () => {
+    isPushDifferentDomain: (domain: string | null, path: string | null) => boolean;
+    getPath: (domain: string | null, path: string | null) => string;
+    navigatePath: (domain: string | null, path: string | null) => void;
+};

package/es/components/organism/LeftMenu/hooks/useNavigatePath.js

@@ -0,0 +1,43 @@
+// Libraries
+import { useContextSelector } from 'use-context-selector';
+import { useCallback } from 'react';
+import { isNil } from 'lodash';
+// Contexts
+import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
+// Utils
+import { getGeneratePath } from '../utils';
+// Constants
+import { ENV } from '@antscorp/antsomi-ui/es/config';
+export const useNavigatePath = () => {
+    // Contexts
+    const { auth, env } = useContextSelector(AppConfigContext, state => state);
+    // Callbacks
+    const isPushDifferentDomain = useCallback((domain, path) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (env === ENV.DEV)
+            return false;
+        const customDomain = domain !== null && domain !== void 0 ? domain : '';
+        const splitNextPath = (path === null || path === void 0 ? void 0 : path.split('#')) || ['', ''];
+        const isCurrentPathIncludeHash = (_b = (_a = window.location) === null || _a === void 0 ? void 0 : _a.href) === null || _b === void 0 ? void 0 : _b.includes('#');
+        const isNextPathIncludeHash = path === null || path === void 0 ? void 0 : path.includes('#');
+        if (isCurrentPathIncludeHash && isNextPathIncludeHash) {
+            const currentRoute = ((_e = (_d = (_c = window.location.href) === null || _c === void 0 ? void 0 : _c.split) === null || _d === void 0 ? void 0 : _d['#']) === null || _e === void 0 ? void 0 : _e[0]) || '';
+            const nextRoute = `${customDomain}${splitNextPath[0]}`;
+            return currentRoute !== nextRoute;
+        }
+        return !!customDomain && customDomain !== ((_f = window.location) === null || _f === void 0 ? void 0 : _f.origin);
+    }, [env]);
+    const getPath = useCallback((domain, path) => {
+        var _a;
+        if ((path === null || path === void 0 ? void 0 : path.includes('#')) && isPushDifferentDomain(domain, path)) {
+            const customPath = ((_a = path === null || path === void 0 ? void 0 : path.split('#')) === null || _a === void 0 ? void 0 : _a[1]) || '';
+            return getGeneratePath(customPath, auth);
+        }
+        return getGeneratePath(`${path !== null && path !== void 0 ? path : ''}`, auth);
+    }, [auth, isPushDifferentDomain]);
+    const navigatePath = useCallback((domain, path) => {
+        const newDomain = isNil(domain) || env === ENV.DEV ? '' : domain;
+        window.location.assign(getGeneratePath(`${newDomain}${path}`, auth));
+    }, [auth, env]);
+    return { isPushDifferentDomain, getPath, navigatePath };
+};

package/es/components/organism/LeftMenu/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FeatureMenuPermission } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+export interface LeftMenuProps {
+    objectType?: string;
+    objectId?: number;
+    isGrouped?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    onActiveMenuCodeChange?: (activeMenuCode?: string, flattenPermissionList?: FeatureMenuPermission[]) => void;
+}
+export declare const LeftMenu: React.FC<LeftMenuProps>;

package/es/components/organism/LeftMenu/index.js

@@ -0,0 +1,99 @@
+// Libraries
+import React, { memo, useMemo } from 'react';
+import Icon from '@antscorp/icons';
+import { Typography } from 'antd';
+import classNames from 'classnames';
+import { isNil, isString } from 'lodash';
+import { Link } from 'react-router-dom';
+// Assets
+import SubLogoAntsomi from '@antscorp/antsomi-ui/es/assets/images/logo/sub-logo-antsomi.png';
+// Styled
+import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, } from './styled';
+// Constants
+import { APP_KEYS, ICON_SIZE } from './constants';
+// Components
+import { ProfilesMenu, ContentMenu, DataMenu, MarketingMenu, HomeMenu, InsightsMenu, SettingsMenu, TemplatesMenu, } from './components';
+// Hooks
+import { useLeftMenu } from './hooks';
+import { useNavigatePath } from './hooks/useNavigatePath';
+export const LeftMenu = memo(props => {
+    var _a;
+    const { style, className } = props;
+    // Hooks
+    const { 
+    /* State */
+    state, 
+    /* Store */
+    activeAppCode, 
+    /* Data Queries */
+    permissionMenu, 
+    /* Callbacks */
+    onToggleChildMenu, onMouseEnter, onMouseLeave, } = useLeftMenu(props);
+    const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
+    // Memo
+    const childMenu = useMemo(() => {
+        const selectedFeatureKey = state.hoverItem ? state.hoverItem : activeAppCode;
+        switch (selectedFeatureKey) {
+            case APP_KEYS.HOME: {
+                return React.createElement(HomeMenu, null);
+            }
+            case APP_KEYS.PROFILES: {
+                return React.createElement(ProfilesMenu, null);
+            }
+            case APP_KEYS.CONTENT: {
+                return React.createElement(ContentMenu, null);
+            }
+            case APP_KEYS.DATA: {
+                return React.createElement(DataMenu, null);
+            }
+            case APP_KEYS.MARKETING: {
+                return React.createElement(MarketingMenu, null);
+            }
+            case APP_KEYS.INSIGHTS: {
+                return React.createElement(InsightsMenu, null);
+            }
+            case APP_KEYS.TEMPLATES: {
+                return React.createElement(TemplatesMenu, null);
+            }
+            case APP_KEYS.SETTINGS: {
+                return React.createElement(SettingsMenu, null);
+            }
+            default:
+                return null;
+        }
+    }, [activeAppCode, state.hoverItem]);
+    // Render components
+    const renderFeatureMenuItems = (item) => {
+        const { menu_item_name, menu_item, icon_name, menu_item_code, menu_item_path, menu_item_domain, } = item;
+        const isActive = activeAppCode === menu_item_code;
+        const isHover = state.hoverItem === menu_item_code;
+        const labelComponent = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
+            React.createElement("div", { className: "icon-wrapper" }, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name, style: { fontSize: ICON_SIZE } })),
+            React.createElement(Typography.Text, null, menu_item_name),
+            React.createElement("div", { className: "popup-triangle" })));
+        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code) }, isString(menu_item_path) ? (isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path) }, labelComponent())) : (React.createElement(Link, { to: getPath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent()))) : (labelComponent())));
+    };
+    return (React.createElement(LeftMenuNavWrapper, { style: style, className: className },
+        React.createElement(LeftMenuNav, null,
+            React.createElement(FeatureMenuWrapper, { isExpandMenu: state.isExpandMenu, vertical: true },
+                React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: () => onMouseEnter(activeAppCode) },
+                    React.createElement("div", { className: "image-wrapper" },
+                        React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),
+                React.createElement(FeatureMenu, { role: "menu", className: "antsomi-scroll-box", onMouseLeave: onMouseLeave },
+                    React.createElement("div", { className: "menu-content scroll-content" }, (_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.filter(item => item.menu_item_code !== APP_KEYS.SETTINGS)) === null || _a === void 0 ? void 0 : _a.map(item => renderFeatureMenuItems(item))),
+                    React.createElement("div", { className: "nav-blank", onMouseEnter: () => onMouseEnter(activeAppCode) }),
+                    React.createElement(PopoverWrapper, { className: "antsomi-scroll-box antsomi-child-menu-popover", onMouseLeave: onMouseLeave },
+                        React.createElement("div", { className: "scroll-content" }, childMenu))),
+                React.createElement("div", { style: { flexShrink: 0 } }, (() => {
+                    const settingFeature = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === APP_KEYS.SETTINGS);
+                    return settingFeature ? renderFeatureMenuItems(settingFeature) : null;
+                })())),
+            React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },
+                React.createElement(Icon, { type: "icon-ants-expand-more", style: {
+                        cursor: 'pointer',
+                        fontSize: '20px',
+                        transform: `rotate(${state.isExpandMenu ? '90deg' : '270deg'})`,
+                    }, onClick: onToggleChildMenu }))),
+        React.createElement(ChildMenuWrapper, { isExpand: state.isExpandMenu, className: "antsomi-scroll-box" },
+            React.createElement("div", { className: "scroll-content" }, childMenu))));
+});

package/es/components/organism/LeftMenu/stores/index.d.ts

@@ -0,0 +1,12 @@
+import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+export interface LeftMenuState {
+    activeAppCode: string;
+    menuItems: TFeatureMenu[];
+    appMenuChildren: TFeatureMenu[];
+}
+interface LeftMenuStore {
+    state: LeftMenuState;
+    setState: (state: Partial<LeftMenuState>) => void;
+}
+export declare const useLeftMenuStore: import("zustand").UseBoundStore<import("zustand").StoreApi<LeftMenuStore>>;
+export {};

package/es/components/organism/LeftMenu/stores/index.js

@@ -0,0 +1,7 @@
+// Libraries
+import { create } from 'zustand';
+const initialState = { activeAppCode: '', menuItems: [], appMenuChildren: [] };
+export const useLeftMenuStore = create(set => ({
+    state: initialState,
+    setState: newState => set(store => ({ state: Object.assign(Object.assign({}, store.state), newState) })),
+}));

package/es/components/organism/LeftMenu/styled.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const PopoverWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FeatureMenuWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    isExpandMenu: boolean;
+}, never>;
+export declare const ExpandWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LeftMenuNavWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavLogoWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const LeftMenuNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export declare const FeatureMenu: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const FeatureMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChildMenuWrapper: import("styled-components").StyledComponent<"div", any, {
+    isExpand: boolean;
+}, never>;

package/es/components/organism/LeftMenu/styled.js

@@ -0,0 +1,187 @@
+var _a, _b, _c, _d, _e;
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { HEADER_HEIGHT } from '../../molecules/HeaderV2/constants';
+// Components
+import { Flex } from '../../atoms';
+export const PopoverWrapper = styled.div `
+  opacity: 0;
+  visibility: hidden;
+  position: absolute;
+  background-color: white;
+  left: 69px;
+  border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px;
+  bottom: 15px;
+  width: 230px;
+  box-shadow: 0px 3px 20px 0px #002e5933;
+  height: calc(100% - ${HEADER_HEIGHT + 15}px);
+  transition: visibility 0s, opacity 0.2s ease-out;
+  z-index: 10;
+  padding: 10px;
+  box-sizing: border-box;
+`;
+export const FeatureMenuWrapper = styled(Flex) `
+  flex: 1 1 0%;
+  overflow: hidden;
+
+  &:hover {
+    ${PopoverWrapper} {
+      ${({ isExpandMenu }) => !isExpandMenu
+    ? `
+          visibility: visible;
+          opacity: 1;
+          `
+    : ''}
+    }
+  }
+`;
+export const ExpandWrapper = styled.div `
+  height: 35px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.bw3};
+  padding: 0 10px;
+`;
+export const LeftMenuNavWrapper = styled.div `
+  height: 100vh;
+  display: flex;
+  gap: 10px;
+  transition: all 0.2s ease-out;
+`;
+export const NavLogoWrapper = styled(Flex) `
+  height: ${HEADER_HEIGHT}px;
+  flex-shrink: 0;
+
+  .image-wrapper {
+    height: 30px;
+    width: 30px;
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
+  }
+`;
+export const LeftMenuNav = styled.nav `
+  position: relative;
+  width: 70px;
+  height: 100%;
+  background-color: ${(_c = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _c === void 0 ? void 0 : _c.blue1_2};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-right: 1px solid ${(_d = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _d === void 0 ? void 0 : _d.bw3};
+
+  ${ExpandWrapper} {
+    flex-shrink: 0;
+  }
+`;
+export const FeatureMenu = styled.ul `
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow-x: hidden;
+
+  .menu-content {
+    flex-shrink: 0;
+  }
+
+  .nav-blank {
+    flex: 1 1 0%;
+  }
+`;
+export const FeatureMenuItem = styled.div `
+  width: 100%;
+  padding: 5px;
+  box-sizing: border-box;
+
+  .menu-link {
+    width: 100% !important;
+    height: 100% !important;
+    display: flex !important;
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+
+  li {
+    width: 100%;
+    cursor: pointer;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: ${(_e = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _e === void 0 ? void 0 : _e.borderRadiusXL}px;
+    padding: 5px 0;
+    position: relative;
+
+    .icon-wrapper {
+      height: 30px;
+      width: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    span {
+      font-size: 11px !important;
+      font-weight: 500;
+      color: inherit;
+    }
+
+    &.isHover,
+    &.isActive {
+      .icon-wrapper,
+      span {
+        color: #005eb8;
+      }
+    }
+
+    &.isActive {
+      background-color: #d3e3fd !important;
+    }
+
+    &.isHover {
+      background-color: #ffffffcc;
+
+      .popup-triangle {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    .popup-triangle {
+      visibility: hidden;
+      opacity: 0;
+      right: -10px;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 1px 9px 10px 10px;
+      border-color: transparent transparent white transparent;
+      transform: rotate(270deg);
+      z-index: 100;
+    }
+  }
+`;
+export const ChildMenuWrapper = styled.div `
+  height: calc(100% - ${HEADER_HEIGHT}px);
+  margin-top: ${HEADER_HEIGHT}px;
+  margin-right: 0px !important;
+  width: ${({ isExpand }) => (isExpand ? '220px' : '0px')};
+  padding: ${({ isExpand }) => (isExpand ? '10px' : '10px 0')};
+  transition: width 0.2s, padding 0.2s ease;
+  padding-left: 0px;
+  box-sizing: border-box;
+  z-index: 1;
+`;