@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/sidebar/TMHeader.js

@@ -0,0 +1,616 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo } from 'react';
+import six from '../../assets/six.png';
+import { getAvatarColor, IconCloseOutline, IconCopy, IconSearch, openApps, SDKUI_Localizator } from '../../helper';
+import styled, { keyframes } from 'styled-components';
+import { SDK_Globals, AuthenticationModes, AppModules, UserLevels, CultureIDs } from '@topconsultnpm/sdk-ts';
+import { TMColors } from '../../utils/theme';
+import { ButtonNames, TMMessageBoxManager } from '../base/TMPopUp';
+import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
+import { TMAboutApp } from './TMAboutApp';
+import ShowAlert from '../base/TMAlert';
+import TMResizableMenu from '../base/TMResizableMenu';
+import it from '../../assets/italy.svg';
+import de from '../../assets/german.svg';
+import fr from '../../assets/france.svg';
+import en from '../../assets/united-kingdom.svg';
+import es from '../../assets/spain.svg';
+import pt from '../../assets/portugal.svg';
+export var TMSearchContext;
+(function (TMSearchContext) {
+    TMSearchContext["JOBS"] = "jobs";
+    TMSearchContext["PROCESSES"] = "processes";
+    TMSearchContext["PROCESS_MONITOR"] = "ProcessMonitor";
+    TMSearchContext["JOBS_LIST"] = "JobsList";
+    TMSearchContext["PLATFORM"] = "OrchestrationPlatform";
+    TMSearchContext["QE"] = "QueryEditor";
+})(TMSearchContext || (TMSearchContext = {}));
+export const getInitials = (name) => {
+    if (!name)
+        return 'U';
+    if (name.toLowerCase() === 'sysadmin')
+        return 'SYS';
+    const words = name.trim().split(/\s+/);
+    if (words.length === 1) {
+        return words[0].substring(0, 2).toUpperCase();
+    }
+    return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+};
+export const getCultureFlag = (cultureId) => {
+    switch (cultureId) {
+        case 'it_IT': return it;
+        case 'fr_FR': return fr;
+        case 'en_US': return en;
+        case 'pt_PT': return pt;
+        case 'es_ES': return es;
+        case 'de_DE': return de;
+        default: return it;
+    }
+};
+export const getCultureDisplayName = (cultureId) => {
+    switch (cultureId) {
+        case 'it_IT': return 'Italiano';
+        case 'fr_FR': return 'Français';
+        case 'en_US': return 'English';
+        case 'pt_PT': return 'Português';
+        case 'es_ES': return 'Español';
+        case 'de_DE': return 'Deutsch';
+        default: return 'Italiano';
+    }
+};
+export const copyUserInfoToClipboard = (userName, cultureId, archiveId, archiveDesc, endpoint, domain) => {
+    const userInfo = {
+        username: userName,
+        endpoint: endpoint,
+        cultureID: cultureId,
+        archiveID: archiveId,
+        archiveDescription: archiveDesc,
+        domain: domain ?? 'undefined',
+    };
+    navigator.clipboard.writeText(JSON.stringify(userInfo, null, 2))
+        .then(() => {
+        ShowAlert({
+            message: SDKUI_Localizator.OperationSuccess,
+            mode: 'success',
+            title: SDKUI_Localizator.CopyUserInfo,
+            duration: 3000
+        });
+    })
+        .catch(() => {
+        ShowAlert({
+            message: SDKUI_Localizator.FailedToCopyToClipboard,
+            mode: 'error',
+            title: 'Error',
+            duration: 3000
+        });
+    });
+};
+export const TMSearchBar = ({ searchValue, onSearchValueChanged, maxWidth, marginLeft }) => {
+    const deviceType = useDeviceType();
+    return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '20px' }, "$isMobile": deviceType === DeviceType.MOBILE, children: [" ", _jsx(IconSearch, { fontSize: 12, color: '#00000060', style: { position: 'absolute', width: '20px', height: '20px', left: '5px', top: '5px', zIndex: 1 } }), _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
+};
+const TMHeader = ({ customButtons = _jsx(_Fragment, {}), onMenusOpen, showSettingsMenu = true, showSearchBar = true, clearSearchJobValue, clearSearchQEValue, searchContext = TMSearchContext.JOBS, onChangePassword, onLogout, settingsMenuContext, onSeacrhJobsValueChange, onSeacrhJobslistValueChange, onSeacrhProcessMonitorValueChange, onSeacrhProcessValueChange, onSeacrhPlatformValueChange, onSeacrhQEValueChange, onSettingsClick }) => {
+    const [appRoutes, setAppRoutes] = useState();
+    const [menuStatus, setMenuStatus] = useState(false);
+    const [showAppMenu, setShowAppMenu] = useState(false);
+    const [searchJobListValue, setSearchJobListValue] = useState('');
+    const [searchJobsValue, setSearchJobsValue] = useState('');
+    const [searchProcessesValue, setSearchProcessesValue] = useState('');
+    const [searchProcessMonitorValue, setSearchProcessMonitorValue] = useState('');
+    const [searchPlatformValue, setSearchPlatformValue] = useState('');
+    const [searchQEValue, setSearchQEValue] = useState('');
+    const tmSession = SDK_Globals.tmSession;
+    const deviceType = useDeviceType();
+    let isMobile = deviceType == DeviceType.MOBILE;
+    const menuRef = useRef(null);
+    const userIcon = useRef(null);
+    const logoRef = useRef(null);
+    const appMenuRef = useRef(null);
+    const userName = tmSession?.SessionDescr?.userName ?? 'User';
+    const archiveId = tmSession?.SessionDescr?.archiveID ?? 'No Archive';
+    const archiveDesc = tmSession?.SessionDescr?.description ?? 'No Description';
+    const endpoint = tmSession?.TopMediaServer.BaseAddress ?? 'No Endpoint';
+    const domain = tmSession?.SessionDescr?.domain;
+    const cultureId = tmSession?.SessionDescr?.cultureID ?? CultureIDs.It_IT;
+    const userInitials = getInitials(userName);
+    const avatarColor = getAvatarColor(userName);
+    const cultureFlag = getCultureFlag(cultureId);
+    const cultureName = getCultureDisplayName(cultureId);
+    const headerAppName = useMemo(() => {
+        switch (SDK_Globals.appModule) {
+            case AppModules.WORD_CONNECTOR:
+            case AppModules.EXCEL_CONNECTOR:
+            case AppModules.OUTLOOK_CONNECTOR:
+            case AppModules.POWERPOINT_CONNECTOR: return '';
+            default: return SDK_Globals.appModule;
+        }
+    }, [SDK_Globals.appModule, AppModules]);
+    useEffect(() => { clearSearchJobValue && setSearchJobsValue(''); }, [clearSearchJobValue]);
+    useEffect(() => { clearSearchQEValue && setSearchQEValue(''); }, [clearSearchQEValue]);
+    useEffect(() => {
+        switch (searchContext) {
+            case TMSearchContext.JOBS_LIST:
+                onSeacrhJobslistValueChange && onSeacrhJobslistValueChange(searchJobListValue);
+                break;
+            case TMSearchContext.JOBS:
+                onSeacrhJobsValueChange && onSeacrhJobsValueChange(searchJobsValue);
+                break;
+            case TMSearchContext.PROCESSES:
+                onSeacrhProcessValueChange && onSeacrhProcessValueChange(searchProcessesValue);
+                break;
+            case TMSearchContext.PROCESS_MONITOR:
+                onSeacrhProcessMonitorValueChange && onSeacrhProcessMonitorValueChange(searchProcessMonitorValue);
+                break;
+            case TMSearchContext.PLATFORM:
+                onSeacrhPlatformValueChange && onSeacrhPlatformValueChange(searchPlatformValue);
+                break;
+            case TMSearchContext.QE:
+                onSeacrhQEValueChange && onSeacrhQEValueChange(searchQEValue);
+                break;
+        }
+    }, [searchContext, searchJobListValue, searchJobsValue, searchProcessMonitorValue, searchProcessesValue, searchPlatformValue, searchQEValue]);
+    const openMenuTimer = useRef(null);
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (menuRef.current && !menuRef.current.contains(event.target) && !userIcon.current?.contains(event.target)) {
+                if (menuStatus) {
+                    setMenuStatus(false);
+                }
+            }
+        }
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, [menuRef, userIcon, menuStatus]);
+    useEffect(() => {
+        if (SDK_Globals.appModule === AppModules.WORD_CONNECTOR)
+            return;
+        fetch('../appConfig.json')
+            .then(res => res.json())
+            .then(json => setAppRoutes(Object.values(json.appRoutes)));
+    }, [SDK_Globals.appModule]);
+    useEffect(() => {
+        return () => {
+            if (openMenuTimer.current)
+                clearTimeout(openMenuTimer.current);
+        };
+    }, []);
+    useEffect(() => {
+        if (!showAppMenu)
+            return;
+        const safe = 20;
+        const handleMouseMove = (e) => {
+            const logoRect = logoRef.current?.getBoundingClientRect();
+            const menuRect = appMenuRef.current?.getBoundingClientRect();
+            const insideLogo = logoRect &&
+                e.clientX >= logoRect.left - safe &&
+                e.clientX <= logoRect.right + safe &&
+                e.clientY >= logoRect.top - safe &&
+                e.clientY <= logoRect.bottom + safe;
+            const insideMenu = menuRect &&
+                e.clientX >= menuRect.left - safe &&
+                e.clientX <= menuRect.right + safe &&
+                e.clientY >= menuRect.top - safe &&
+                e.clientY <= menuRect.bottom + safe;
+            if (!insideLogo && !insideMenu) {
+                setShowAppMenu(false);
+            }
+        };
+        window.addEventListener('mousemove', handleMouseMove);
+        return () => window.removeEventListener('mousemove', handleMouseMove);
+    }, [showAppMenu]);
+    const hasAdministrativeLevel = (sd) => {
+        if (sd.userLevel == UserLevels.SystemAdministrator)
+            return true;
+        if (sd.userLevel == UserLevels.Administrator)
+            return true;
+        if (sd.userLevel == UserLevels.AutonomousAdministrator)
+            return true;
+        return false;
+    };
+    const isAdministrativeLevel = useMemo(() => {
+        return hasAdministrativeLevel(tmSession?.SessionDescr);
+    }, [tmSession?.SessionDescr]);
+    const openAppsHandler = (appName, session, appRoutes) => {
+        if (!appRoutes) {
+            ShowAlert({ message: `App routes are not defined`, mode: 'error', title: appName, duration: 3000 });
+            return;
+        }
+        const route = appRoutes.find(route => route.appName === appName);
+        if (route) {
+            openApps(appName, session, appRoutes);
+        }
+        else {
+            ShowAlert({ message: `Route is not found`, mode: 'info', title: appName, duration: 3000 });
+        }
+        setShowAppMenu(false);
+    };
+    const isTopMediaAuth = useMemo(() => {
+        return tmSession?.SessionDescr?.authenticationMode === AuthenticationModes.TopMedia;
+    }, [tmSession]);
+    const appModuleHandler = useMemo(() => {
+        if (SDK_Globals.appModule === AppModules.ORCHESTRATOR) {
+            return { app_1: AppModules.DESIGNER, app_2: AppModules.SURFER };
+        }
+        if (SDK_Globals.appModule === AppModules.DESIGNER) {
+            return { app_1: AppModules.ORCHESTRATOR, app_2: AppModules.SURFER };
+        }
+        return { app_1: AppModules.DESIGNER, app_2: AppModules.ORCHESTRATOR };
+        ;
+    }, [SDK_Globals.appModule]);
+    const isOfficeConnector = useMemo(() => {
+        return SDK_Globals.appModule === AppModules.WORD_CONNECTOR || SDK_Globals.appModule === AppModules.EXCEL_CONNECTOR || SDK_Globals.appModule === AppModules.POWERPOINT_CONNECTOR || SDK_Globals.appModule === AppModules.OUTLOOK_CONNECTOR;
+    }, [SDK_Globals.appModule]);
+    return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule, children: [(isAdministrativeLevel && !isOfficeConnector) &&
+                _jsx(TMResizableMenu, { ref: appMenuRef, isVisible: showAppMenu, top: 58, left: 10, resizable: false, maxWidth: 215, minWidth: 215, maxHeight: 180, minHeight: 180, onClose: () => { }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsx("h5", { style: { color: TMColors.primary }, children: "Accessi ad altre applicazioni " }), _jsx("hr", {}), _jsxs("div", { style: { display: 'flex', gap: '10px', alignItems: 'center', width: '100%' }, children: [_jsxs(AppMenuButton, { onClick: () => openAppsHandler(appModuleHandler.app_1, tmSession, appRoutes), "$bgColor": '#482234', children: [_jsx("img", { src: six, alt: appModuleHandler.app_1, width: 30, height: 30 }), " ", appModuleHandler.app_1.toUpperCase()] }), _jsxs(AppMenuButton, { onClick: () => openAppsHandler(appModuleHandler.app_2, tmSession, appRoutes), "$bgColor": '#1d6f42', children: [_jsx("img", { src: six, alt: appModuleHandler.app_2, width: 30, height: 30 }), " ", appModuleHandler.app_2.toUpperCase()] })] })] }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%', gap: isMobile ? 5 : 15 }, children: [_jsxs("div", { style: { height: '50px', display: 'flex', alignItems: 'center', gap: 20, justifyContent: 'center' }, children: [_jsx(StyledLogo, { ref: logoRef, style: { cursor: (isAdministrativeLevel && !isOfficeConnector) ? 'pointer' : 'default' }, onMouseEnter: () => {
+                                    if (openMenuTimer.current)
+                                        clearTimeout(openMenuTimer.current);
+                                    openMenuTimer.current = setTimeout(() => { setShowAppMenu(true); onMenusOpen?.(); }, 200);
+                                }, onMouseLeave: () => {
+                                    if (openMenuTimer.current)
+                                        clearTimeout(openMenuTimer.current);
+                                }, src: six, height: isMobile ? 35 : 40, alt: "" }), (!isMobile || SDK_Globals.appModule === AppModules.WORD_CONNECTOR) && _jsx(StyledHeaderAppText, { children: headerAppName })] }), showSearchBar && _jsxs(_Fragment, { children: [searchContext === TMSearchContext.JOBS_LIST && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobListValue(e), searchValue: searchJobListValue }), searchContext === TMSearchContext.JOBS && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobsValue(e), searchValue: searchJobsValue }), searchContext === TMSearchContext.PROCESSES && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessesValue(e), searchValue: searchProcessesValue }), searchContext === TMSearchContext.PROCESS_MONITOR && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessMonitorValue(e), searchValue: searchProcessMonitorValue }), searchContext === TMSearchContext.PLATFORM && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchPlatformValue(e), searchValue: searchPlatformValue }), searchContext === TMSearchContext.QE && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchQEValue(e), searchValue: searchQEValue })] }), customButtons] }), showSettingsMenu && _jsxs(StyledHeaderIcon, { onClick: () => onSettingsClick?.(), children: [" ", _jsx(IconHeaderSettings, { fontSize: 24 }), " "] }), _jsx(UserAvatarContainer, { "$isSelected": menuStatus, ref: userIcon, onClick: e => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setMenuStatus(prev => !prev);
+                }, children: _jsx(UserAvatar, { "$bgColor": avatarColor, children: userInitials }) }), menuStatus &&
+                _jsx(TMResizableMenu, { ref: menuRef, isVisible: menuStatus, top: 60, right: 10, resizable: false, maxWidth: 300, minWidth: 300, maxHeight: 180, minHeight: 180, padding: 0, children: _jsxs(MenuContainer, { children: [_jsxs(UserProfileSection, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, height: 'max-content' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, height: 'max-content' }, children: [_jsx(AvatarContainer, { children: _jsx(UserAvatarLarge, { "$bgColor": avatarColor, children: userInitials }) }), _jsxs(UserInfo, { children: [_jsxs(UserNameContainer, { children: [_jsx(UserName, { children: userName }), _jsx(CultureFlag, { src: cultureFlag, alt: cultureName, title: cultureName })] }), domain && _jsx(SessionInfo, { style: { padding: 0, margin: 0 }, children: `(${domain})` })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', gap: 5 }, children: [_jsx(SessionInfo, { children: endpoint }), _jsx(SessionInfo, { children: archiveId + ' (' + archiveDesc + ')' })] })] }), _jsx(CopyIcon, { onClick: (e) => {
+                                            e.stopPropagation();
+                                            copyUserInfoToClipboard(userName, cultureId, archiveId, archiveDesc, endpoint, domain);
+                                        }, title: SDKUI_Localizator.CopyUserInfo, children: _jsx(IconCopy, { fontSize: 12 }) }), _jsx(LogoutButton, { onClick: () => {
+                                            setMenuStatus(false);
+                                            onLogout && onLogout();
+                                        }, children: _jsx(LogoutText, { children: SDKUI_Localizator.Logout }) })] }), _jsxs(BottomActionsContainer, { children: [isTopMediaAuth && (_jsx(BottomActionButton, { onClick: () => {
+                                            setMenuStatus(false);
+                                            onChangePassword && onChangePassword();
+                                        }, children: _jsx(BottomActionText, { children: SDKUI_Localizator.ChangePassword }) })), _jsx(BottomActionButton, { onClick: () => {
+                                            setMenuStatus(false);
+                                            TMMessageBoxManager.show({
+                                                buttons: [ButtonNames.OK],
+                                                title: SDK_Globals.appModule,
+                                                message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: true })
+                                            });
+                                        }, children: _jsx(BottomActionText, { children: SDKUI_Localizator.About }) })] })] }) })] }));
+};
+export default TMHeader;
+export function IconHeaderNotifications(props) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 31 31", width: "1em", height: "1em", ...props, children: [_jsx("defs", {}), _jsxs("g", { children: [_jsxs("g", { children: [_jsx("path", { stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", d: "m4.37,25.81v-14.18C4.37,5.48,9.36.5,15.5.5s11.13,4.98,11.13,11.13v14.18" }), _jsx("line", { stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", x1: ".5", y1: "25.81", x2: "30.5", y2: "25.81" })] }), _jsx("path", { stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", d: "m20.19,25.81c0,2.59-2.1,4.69-4.69,4.69s-4.69-2.1-4.69-4.69h9.39Z" })] })] }));
+}
+export function IconHeaderSettings(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", width: "1em", height: "1em", ...props, children: _jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5px", d: "M39.23 26a17 17 0 0 0 .14-2a17 17 0 0 0-.14-2l4.33-3.39a1 1 0 0 0 .25-1.31l-4.1-7.11a1 1 0 0 0-1.25-.44l-5.11 2.06a15.7 15.7 0 0 0-3.46-2l-.77-5.43a1 1 0 0 0-1-.86H19.9a1 1 0 0 0-1 .86l-.77 5.43a15.4 15.4 0 0 0-3.46 2L9.54 9.75a1 1 0 0 0-1.25.44l-4.1 7.11a1 1 0 0 0 .25 1.31L8.76 22a17 17 0 0 0-.14 2a17 17 0 0 0 .14 2l-4.32 3.39a1 1 0 0 0-.25 1.31l4.1 7.11a1 1 0 0 0 1.25.44l5.11-2.06a15.7 15.7 0 0 0 3.46 2l.77 5.43a1 1 0 0 0 1 .86h8.2a1 1 0 0 0 1-.86l.77-5.43a15.4 15.4 0 0 0 3.46-2l5.11 2.06a1 1 0 0 0 1.25-.44l4.1-7.11a1 1 0 0 0-.25-1.31ZM24 31.18A7.18 7.18 0 1 1 31.17 24A7.17 7.17 0 0 1 24 31.18" }) }));
+}
+const iconPulse = keyframes `
+    0% { transform: scale(1); box-shadow: 0 0 0 0 ${TMColors.primary}20; }
+    50% { transform: scale(1.05); box-shadow: 0 0 0 8px ${TMColors.primary}10; }
+    100% { transform: scale(1); box-shadow: 0 0 0 0 ${TMColors.primary}00; }
+`;
+const iconBounce = keyframes `
+    0%, 20%, 60%, 100% { transform: translateY(0); }
+    40% { transform: translateY(-3px); }
+    80% { transform: translateY(-1px); }
+`;
+const slideInFromLeft = keyframes `
+    from { opacity: 0; transform: translateX(-20px); }
+    to { opacity: 1; transform: translateX(0); }
+`;
+const fadeIn = keyframes `
+    from { opacity: 0; }
+    to { opacity: 1; }
+`;
+const StyledLogo = styled.img `
+    image-rendering: auto;
+    shape-rendering: auto;
+`;
+const StyledHeaderContainer = styled.div ` 
+    position:fixed; 
+    width: 100%; 
+    height: 60px; 
+    background-color:transparent; 
+    opacity: 1; 
+    display: flex; 
+    flex-direction: row; 
+    width: 100%; 
+    justify-content: space-between; 
+    align-items: center; 
+    padding: 0px 10px;
+`;
+const StyledHeaderIcon = styled.div `
+    position: relative;
+    width: 40px;
+    height: 40px;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${TMColors.primary};
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    border-radius: 50%;
+
+    &:before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 35px;
+        height: 35px;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        background: ${TMColors.primary}20;
+        opacity: 0;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        z-index: -1;
+    }
+
+    &:hover {
+        color: ${TMColors.primary};
+        transform: translateY(-2px);
+        &:before {
+            opacity: 1;
+        }
+        svg {
+            animation: ${iconBounce} 0.6s ease-in-out;
+        }
+    }
+
+    &:active {
+        transform: translateY(0);
+        color: ${TMColors.primary};
+        &:before {
+            opacity: 1;
+            background: ${TMColors.primary}40;
+        }
+    }
+
+    ${props => props.$isSelected && `
+        &:before {
+            opacity: 1;
+            background: ${TMColors.primary}25;
+        }
+    `}
+
+    &.has-notification {
+        animation: ${iconPulse} 2s infinite;
+    }
+
+    &:focus {
+        outline: none;
+    }
+
+    svg {
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+    }
+`;
+const StyledSearchBarContainer = styled.div ` position: relative; height:30px; width: 100%; max-width: ${props => props.$isMobile ? '65%' : '650px'}; margin-left: ${props => props.$isMobile ? '10px' : '50px'}; `;
+const StyledSearchBar = styled.input ` background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #dbdbdb; border-radius: 5px; padding: 5px 30px; width:100%; transition: 100ms linear; &:focus{ outline: none; border-bottom: 2px solid ${TMColors.primary}; } `;
+const StyledHeaderAppText = styled.h2 ` text-align: left; letter-spacing: 0px; color: ${TMColors.primary}; opacity: 1; `;
+const AppMenuButton = styled.div `
+  width: 90px;
+  height: 90px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  color: #2459A4;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  border-radius: 10px;
+  margin: 8px 0;
+  cursor: pointer;
+  box-shadow: 0 2px 8px #2459a41a;
+  user-select: none;
+  gap: 5px;
+  transition:
+    transform 0.18s cubic-bezier(.4,0,.2,1),
+    box-shadow 0.18s cubic-bezier(.4,0,.2,1);
+  &:hover {
+    transform: translateY(-2px) scale(1.06);
+    box-shadow: 0 6px 18px #2459a433;
+  }
+`;
+const UserAvatarContainer = styled.div `
+    position: relative;
+    width: 40px;
+    height: 40px;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+    padding: 2px;
+
+    ${props => props.$isSelected && `
+        background: ${TMColors.primary}20;
+        transform: scale(1.05);
+    `}
+
+    &:hover {
+        background: ${TMColors.primary}15;
+        transform: scale(1.05);
+    }
+`;
+const UserAvatar = styled.div `
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: ${props => props.$bgColor};
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    user-select: none;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+`;
+const UserAvatarLarge = styled(UserAvatar) `
+    width: 48px;
+    height: 48px;
+    font-size: 18px;
+    flex-shrink: 0;
+`;
+const MenuContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 100%;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+`;
+const UserProfileSection = styled.div `
+    display: flex;
+    padding: 20px;  
+    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
+    border-bottom: 1px solid #e1e5e9;
+    gap: 12px;
+    opacity: 0;
+    animation: ${fadeIn} 0.3s ease-out forwards;
+    flex: 1;  
+`;
+const UserProfileSectionWithUserName = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;  
+`;
+const UserInfo = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    flex: 1;
+`;
+const UserName = styled.div `
+    font-size: 16px;
+    font-weight: 600;
+    color: #242424;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.2;
+`;
+const SessionInfo = styled.div `
+    font-size: 11px;
+    color: #605e5c;
+    font-weight: 400;
+    line-height: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+`;
+const CultureFlag = styled.img `
+    width: 14px;
+    height: 14px;
+    object-fit: cover;
+    flex-shrink: 0;
+`;
+const LogoutButton = styled.div `
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-left: auto;
+    flex-shrink: 0;
+
+    &:hover {
+        transform: translateY(-1px);
+        color: ${TMColors.primary};
+    }
+
+    &:active {
+        transform: translateY(0);
+    }
+`;
+const LogoutText = styled.span `
+    font-size: 13px;
+    color: #605e5c;
+    font-weight: 500;
+    transition: color 0.2s ease;
+    white-space: nowrap;
+
+    &:hover {
+        color: ${TMColors.primary};
+    }
+`;
+const AvatarContainer = styled.div `
+    position: relative;
+    flex-shrink: 0;
+`;
+const CopyIcon = styled.div `
+    position: absolute;
+    bottom: 50px;
+    right: 15px;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border: 1px solid #e1e5e9;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #605e5c;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+    opacity: 0.6;
+
+    &:hover {
+        background: #b7b7b7;
+        color: white;
+        opacity: 1;
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+
+    svg {
+        transition: all 0.2s ease;
+    }
+`;
+const BottomActionsContainer = styled.div `
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 20px;
+    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
+    border-top: 1px solid #e1e5e9;
+    gap: 20px;
+`;
+const BottomActionButton = styled.div `
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        transform: translateY(-1px);
+        color: ${TMColors.primary};
+    }
+
+    &:active {
+        transform: translateY(0);
+    }
+`;
+const BottomActionText = styled.span `
+    font-size: 13px;
+    color: #605e5c;
+    font-weight: 500;
+    transition: color 0.2s ease;
+    white-space: nowrap;
+
+    &:hover {
+        color: ${TMColors.primary};
+    }
+`;
+const UserNameContainer = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    min-width: 0;
+`;

package/lib/components/sidebar/TMSidebar.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export type AppRouteType = 'route' | 'panel' | 'panelRight' | 'app';
+export interface AppRoute {
+    name: string;
+    path: string;
+    icon?: any;
+    element?: JSX.Element;
+    category?: string;
+    type?: AppRouteType;
+}
+interface ITMSidebar {
+    /** List of TMSidebarItem components that make up the menu */
+    items: JSX.Element[];
+    height?: string;
+    width?: string;
+    top?: string;
+    left?: string;
+    borderRightRadius?: string;
+}
+declare const TMSidebar: React.FC<ITMSidebar>;
+export default TMSidebar;