Skip to main content

Layout & Global Menus

v.5.1.0

Micro frontend​

If you are working on a micro frontend application, the page layout and the menus will be provided by the shell app and you do not need to use these components.

Installation​

yarn add @mercell/global-menu-react

Usage​

Include the line below to import the components from the global-menu-react:

import {
    CompanyMenu,
    GlobalMenu,
    Sidebar,
    UserMenu,
    GridWrapper,
    SidebarContainer,
    MainContent
} from '@mercell/global-menu-react';

If you are working on a stand alone application:

Below is a simplified example of how you can create a page layout that aligns with the structure of the design system's layout using the menu-components from @mercell/global-menu-react together with the grid layout styling (css-grid) from @mercell/tailwind.

We cannot show the component since Docusaurus documentation is using react-router v5 and our components are using v6. We want to apologize for the inconvenience.

const LayoutWrapper = () => {
    const navigationData: NavigationData = {
        home: {
            title: 'Home',
            Icon: Home24,
            path: '',
        },
        tenders: {
            title: 'Tenders',
            Icon: Search24,
            path: '',
        },
        documents: {
            title: 'Documents',
            Icon: Document24,
            path: '',
        },
    };
    const [userIsLoggedIn, setUserIsLoggedIn] = React.useState(false);
    const [showSidebar, setShowSidebar] = React.useState(false);
    // Custom Mercell logo example, uncomment this line - 'logoProps={customImgProps}' in the GlobalMenu if you want to try it out
    const customImgProps = {
        src: 'https://cdn.mercell.com/logos/Mercell_Logo_square_rgb_dark.svg',
        alt: 'Custom Mercell logo',
        width: 70,
        height: 20,
    };
    return (
        <Router>
             <GridWrapper>
                <GlobalMenu
                    logoPath='/'
                    // logoProps={customImgProps}
                    isAuthenticated={userIsLoggedIn}
                    openSidebarOnMobile={setShowSidebar}
                >
                    {userIsLoggedIn && (
                        <CompanyMenu
                            companyName="Mercell"
                            companyMenuText="My company (not implemented yet)"
                        />
                    )}
                    <UserMenu
                        profileText="My profile (not implemented yet)"
                        loginText="Log in"
                        logoutText="Log out"
                        isAuthenticated={userIsLoggedIn}
                        userNickname="Ola"
                        login={() =>
                            new Promise<void>((resolve) => {
                                setUserIsLoggedIn(true);
                                resolve();
                            })
                        }
                        logout={() => setUserIsLoggedIn(false)}
                    />
                </GlobalMenu>
                <SidebarContainer>
                      {userIsLoggedIn && (
                        <Sidebar
                            logoPath="/"
                            navigationData={navigationData}
                            showSidebar={showSidebar}
                            openSidebarOnMobile={setShowSidebar}
                        />
                    )}
                </SidebarContainer>
                <MainContent>
                   <Routes>
                    <Route
                        path="/"
                        element={
                            <p className="col-span-full">
                                Lorem ipsum dolor sit amet, consectetur
                                adipiscing elit. Sed at dignissim justo. Proin
                                auctor lorem ut dui scelerisque dictum.
                                Vestibulum vel leo ac tellus tempor iaculis eu
                                interdum justo. Duis at ligula id dolor suscipit
                                accumsan. Morbi egestas ex sed sem posuere
                                dignissim. Cras facilisis pharetra nibh, non
                                tempor elit malesuada non. Mauris cursus sed
                                lectus id malesuada. Mauris dictum non eros ut
                                gravida. Etiam mauris nisi, sodales elementum
                                laoreet tempor, accumsan quis nisi. Pellentesque
                                quis magna ornare, blandit ipsum at, rutrum
                                sapien. Pellentesque tempor ligula sodales nisi
                                tempor, ac pharetra lacus molestie. Nam sed erat
                                ex. Fusce nec ligula auctor, viverra risus id,
                                dictum nisl. Phasellus tincidunt laoreet mauris.
                                Mauris eget iaculis enim. Integer scelerisque eu
                                leo id commodo. Fusce maximus luctus tellus, sit
                                amet cursus elit condimentum elementum.
                                Curabitur odio justo, venenatis consequat sapien
                                eget, interdum venenatis ligula. Nullam nec eros
                                non dolor luctus dictum. Praesent dui nibh,
                                cursus sit amet enim a, suscipit sollicitudin
                                tortor. Proin hendrerit magna sit amet enim
                                cursus interdum. Donec porttitor sagittis
                                malesuada. Quisque sit amet ipsum convallis,
                                vehicula velit sed, dignissim arcu. Maecenas
                                maximus aliquet eros, vitae hendrerit turpis
                                convallis id. Curabitur mattis sapien sit amet
                                dictum pharetra. Mauris sodales justo eros, id
                                posuere orci semper non. Curabitur venenatis
                                ante in ullamcorper aliquam. Sed sagittis
                                tincidunt lobortis. Proin nec sollicitudin nisi.
                                Suspendisse ac lorem metus. Morbi facilisis
                                mauris et nibh bibendum congue. Donec in ipsum
                                id urna eleifend vehicula mattis nec ante.
                                Curabitur iaculis, metus ac imperdiet tristique,
                                ex nulla rutrum tellus, nec mattis turpis odio
                                vel lacus. Sed auctor pretium erat quis
                                facilisis.
                            </p>
                        }
                    />
                </MainContent>
            </div>
        </Router>

Types, Figma​

GlobalMenuProps
type GlobalMenuProps = {
    logoPath: string;
    isAuthenticated: boolean;
    openSidebarOnMobile?: (isSidebarOpen: boolean) => void;
    logoProps?: JSX.IntrinsicElements['img']; //allows you to add/change props of the logo img tag (src, alt, width, height, className)
    trackingAction?: TrackingActionType;
    additionalTrackingParams?: Record<string, string | string[]>;
    children: ReactNode;
    className: string;
};
Link to TrackingActionType
CompanyMenuProps
type CompanyMenuProps = {
    companyName: string;
    companyMenuText: string;
};
UserMenuProps
type UserMenuProps = {
    profileText: string;
    loginText: string;
    logoutText: string;
    isAuthenticated: boolean;
    userNickname: string;
    logout: () => void;
    login: () => Promise<void>;
    dropdownItems?: DropdownItem[];
    dropdownExternalItems?: DropdownItem[];
    trackingAction?: TrackingActionType;
    additionalTrackingParams?: Record<string, string | string[]>;
};

type DropdownItem = {
    title: string;
    path: string;
    ariaLabel?: string;
};
SidebarProps
type SidebarProps = {
    navigationData: NavigationData;
    showSidebar: boolean;
    logoPath: string;
    openSidebarOnMobile: (isSidebarOpen: boolean) => void;
    trackingAction?: TrackingActionType;
    additionalTrackingParams?: Record<string, string | string[]>;
};
NavigationData
type NavigationData = {
    [key: string]: NavigationItem;
};
NavigationItem
type NavigationItem = {
    title: string;
    Icon: CarbonIconType;
    path: string;
};