@omniumretail/component-library 1.1.61 → 1.1.63

package/dist/main.css

@@ -1,4 +1,4 @@
-.lCPh1mJwiXUUOgmbv_mk{padding:12px 24px;border-radius:4px;min-width:170px;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;text-decoration:none;border:none;font-size:14px;line-height:16.8px;font-weight:700;font-family:"Silka",sans-serif;background-color:var(--button-default-background);color:var(--button-default-text-color)}@media(max-width: 767px){.lCPh1mJwiXUUOgmbv_mk{min-width:0px}}.lCPh1mJwiXUUOgmbv_mk:hover{background-color:var(--button-default-background-hover-color);color:var(--button-default-text-hover-color) !important}.lCPh1mJwiXUUOgmbv_mk:focus,.lCPh1mJwiXUUOgmbv_mk:active,.lCPh1mJwiXUUOgmbv_mk:focus:active{background-color:var(--button-default-background-focus-color);color:var(--button-default-text-focus-color)}.lCPh1mJwiXUUOgmbv_mk:disabled,.lCPh1mJwiXUUOgmbv_mk.vwrGv_jOJcIvImjzKZNv{background-color:var(--button-disabled-background-color);color:var(--button-disabled-default-text-color);pointer-events:none}.PYUelyvKNnKRxaBMgCyk{flex-direction:row-reverse;gap:5px}.edzSVcT9ajLWxd6QfVI1{background-color:var(--button-style-1-background);color:var(--button-style-1-text-color)}.edzSVcT9ajLWxd6QfVI1:hover{background-color:var(--button-style-1-background-hover-color);color:var(--button-style-1-text-hover-color) !important}.edzSVcT9ajLWxd6QfVI1:focus,.edzSVcT9ajLWxd6QfVI1:active,.edzSVcT9ajLWxd6QfVI1:focus:active{background-color:var(--button-style-1-background-focus-color);color:var(--button-style-1-text-focus-color)}.edzSVcT9ajLWxd6QfVI1:disabled,.edzSVcT9ajLWxd6QfVI1.vwrGv_jOJcIvImjzKZNv{background-color:var(--button-disabled-background-color);color:var(--button-disabled-default-text-color);pointer-events:none}
+.lCPh1mJwiXUUOgmbv_mk{padding:12px 24px;border-radius:4px;min-width:170px;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;text-decoration:none;border:none;font-size:14px;line-height:16.8px;font-weight:700;font-family:"Silka",sans-serif;background-color:var(--button-default-background);color:var(--button-default-text-color)}@media(max-width: 767px){.lCPh1mJwiXUUOgmbv_mk{min-width:0px}}.lCPh1mJwiXUUOgmbv_mk:hover{background-color:var(--button-default-background-hover-color) !important;color:var(--button-default-text-hover-color) !important}.lCPh1mJwiXUUOgmbv_mk:focus,.lCPh1mJwiXUUOgmbv_mk:active,.lCPh1mJwiXUUOgmbv_mk:focus:active{background-color:var(--button-default-background-focus-color) !important;color:var(--button-default-text-focus-color) !important}.lCPh1mJwiXUUOgmbv_mk:disabled,.lCPh1mJwiXUUOgmbv_mk.vwrGv_jOJcIvImjzKZNv{background-color:#c7cac9 !important;color:var(--button-disabled-default-text-color) !important;pointer-events:none}.PYUelyvKNnKRxaBMgCyk{flex-direction:row-reverse;gap:5px}.edzSVcT9ajLWxd6QfVI1{background-color:var(--button-style-1-background);color:var(--button-style-1-text-color)}.edzSVcT9ajLWxd6QfVI1:hover{background-color:var(--button-style-1-background-hover-color);color:var(--button-style-1-text-hover-color) !important}.edzSVcT9ajLWxd6QfVI1:focus,.edzSVcT9ajLWxd6QfVI1:active,.edzSVcT9ajLWxd6QfVI1:focus:active{background-color:var(--button-style-1-background-focus-color);color:var(--button-style-1-text-focus-color)}.edzSVcT9ajLWxd6QfVI1:disabled,.edzSVcT9ajLWxd6QfVI1.vwrGv_jOJcIvImjzKZNv{background-color:var(--button-disabled-background-color);color:var(--button-disabled-default-text-color);pointer-events:none}:where(.css-dev-only-do-not-override-m4timi).ant-btn-link:disabled,:where(.css-dev-only-do-not-override-m4timi).ant-btn-link.ant-btn-disabled{color:var(--button-disabled-default-text-color);background-color:#c7cac9}:where(.css-dev-only-do-not-override-m4timi).ant-btn-link:disabled,:where(.css-dev-only-do-not-override-m4timi).ant-btn-link.ant-btn-disabled{color:var(--button-disabled-default-text-color);background-color:#c7cac9}
 .UxfXOleP69PjM5rFOMTD{display:grid !important;grid-template-columns:repeat(3, 1fr) !important;justify-items:center !important;align-items:center !important;height:45px !important;gap:0 24px !important;position:relative !important;padding:0px !important}@media(max-width: 767px){.UxfXOleP69PjM5rFOMTD .UxfXOleP69PjM5rFOMTD{grid-template-columns:1fr}.UxfXOleP69PjM5rFOMTD .UK3esJZjnri5Jb9Jxcca,.UxfXOleP69PjM5rFOMTD .U5tZ7kRlrIHUKsuduD1S{justify-self:center}.UxfXOleP69PjM5rFOMTD .LzcTbjk0fp70tXlKd3eS{text-align:center}.UxfXOleP69PjM5rFOMTD .DhO9jcXNunsWq22jXuJJ{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.UxfXOleP69PjM5rFOMTD .LzcTbjk0fp70tXlKd3eS{font-size:var(--font-size-body-3);font-weight:var(--font-weight-semibold);text-transform:uppercase}@media(min-width: 768px){.UxfXOleP69PjM5rFOMTD .LzcTbjk0fp70tXlKd3eS{font-size:var(--font-size-body-4)}}.UxfXOleP69PjM5rFOMTD .gn06XRZhFG00HaVjAqNc{align-self:center}@media(max-width: 768px){.UxfXOleP69PjM5rFOMTD .gn06XRZhFG00HaVjAqNc{position:unset !important;top:unset !important;margin:unset !important;left:unset !important;right:unset !important;text-align:unset !important}}.UxfXOleP69PjM5rFOMTD .UK3esJZjnri5Jb9Jxcca{justify-self:start}.UxfXOleP69PjM5rFOMTD .SP4eLTEZBzKjo_LdsNw2{justify-self:end}@media(max-width: 460px){.UxfXOleP69PjM5rFOMTD .SP4eLTEZBzKjo_LdsNw2{width:80px}}@media(max-width: 460px){.UxfXOleP69PjM5rFOMTD .SP4eLTEZBzKjo_LdsNw2 :where(.css-dev-only-do-not-override-fpg3f5).ant-btn.ant-btn-icon-only{padding-inline-start:40px}}.UxfXOleP69PjM5rFOMTD .nt_yaN_SHYobZ6zexnfY{justify-self:end}@media(max-width: 460px){.UxfXOleP69PjM5rFOMTD .nt_yaN_SHYobZ6zexnfY{width:60px}}@media(max-width: 460px){.UxfXOleP69PjM5rFOMTD .nt_yaN_SHYobZ6zexnfY :where(.css-dev-only-do-not-override-fpg3f5).ant-btn.ant-btn-icon-only{padding-inline-start:22px}}
 .ii1Ag3GTfp8unGCe48A0{display:inline-flex;text-decoration:none;height:auto;color:var(--color-black);font-size:var(--font-size-body-3);line-height:100%;font-weight:300;font-style:var(--font-style-italic)}.L9ncGwaItcjHJBLuwrKb{color:var(--color-orange);font-style:var(--font-style-normal)}.Yrb4eAglcF7FedoEB9AH span:nth-child(2){margin-inline-end:8px;margin-inline-start:0;order:-1}
 .dr2zFJ8bDffg5CjjPq2c{color:var(--color-black)}.ant-dropdown-menu-title-content{color:var(--color-black)}
@@ -30,3 +30,4 @@
 .nkyL3EtE9Zsnc5VOW43L{display:flex;flex-wrap:wrap;flex-direction:column}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{background-color:rgba(0,0,0,0);border:0px;color:var(--color-blue)}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th:before{display:none}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper{margin-bottom:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-cell{word-break:break-word}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr{cursor:pointer}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:last-child>td{border-bottom:1px solid var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:first-child>td{border-top:1px solid var(--color-blue) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:hover td{border-radius:0 !important;border-bottom-color:var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-space{align-self:flex-end}.nkyL3EtE9Zsnc5VOW43L .ant-select-selection-placeholder{color:var(--color-black)}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:hover,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:hover{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:calc(100% - 200px);margin-left:auto !important}.nkyL3EtE9Zsnc5VOW43L button[type=button].ant-pagination-item-link{margin-top:0 !important}.nkyL3EtE9Zsnc5VOW43L button[type=button]{margin-top:-50px}@media screen and (max-width: 1024px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:8px}}@media screen and (max-width: 767px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-content table{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-content{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-title,.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-header{word-break:break-all}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter{margin-inline-start:0px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-up{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-down{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:unset}}
 .aZEBTQus3Y3MyodeDwkf{display:flex;flex-direction:column;align-items:center;justify-content:center}.cc1pbQlAgw2CmXVml3bs{height:300px;width:400px}.aTf_CXAsyp0tySsoZdD_{display:flex;justify-content:space-between;margin:10px 10px 0px 10px;font-size:20px}.kuu1hf_JTvYD55IW6Nxl{color:#ff4d4f}.N8ODEO3zDbY7gmecjTrp{color:#52c41a}.WIsL9Shu6c0mGJq9qSSz{margin-top:20px;border-radius:4px;overflow:hidden}.WIsL9Shu6c0mGJq9qSSz img{width:100%;height:auto}
 .OJKeuXyOSPIeCCssVum2{display:flex;gap:32px}.jzxszvL7wzCV5nztJL0S{padding:12px}.OGA8oJw8RDyohcRftjmo{width:100%}.y2_7QVPOhjRZlAHCRWKf{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.Smkcs3LGp1uPuQge2GxE{margin-top:16px}Label{margin-bottom:8px}.djarlYFkE9Kb7wUjUnrY{height:36px}
+:root{--color-grey: #e4e4e4;--color-grey-100: #E5E5E5;--color-white: #FFFFFF;--color-black: #2C2D2E}.SF5f_Q_Ggz_4JHUHS2Xa{display:flex;align-items:center;padding:13px 20px;border-bottom:2px solid var(--color-grey-100);box-sizing:border-box}.SF5f_Q_Ggz_4JHUHS2Xa *{box-sizing:border-box}.gSVYvBn1sLbcMsGI32b9{display:flex;flex-grow:1;align-items:flex-end;justify-content:center}.gSVYvBn1sLbcMsGI32b9 img{max-width:196px}.BIBQmS_NwoMw2Ncq5yuN{cursor:pointer;padding:4px 4px 4px 0;font-size:20px}.ZinSgUtysxITkbGRKdux{position:fixed;top:0;left:-100%;bottom:0;width:100%;max-width:375px;background-color:var(--color-white);padding-inline:15px;z-index:999;box-shadow:0 3px 12px rgba(0,0,0,.45);transition:.6s ease-out}.ZinSgUtysxITkbGRKdux.FW1pOdad0uN5LO9h5PgQ{left:0;transition:.3s ease-in}.ZfA8OEmbRzRsNqLAmdtn{background-color:rgba(0,0,0,.3);backdrop-filter:blur(1px);position:absolute;left:0;top:0;right:0;bottom:0;z-index:998;pointer-events:none;opacity:0;transition:.3s}.ZfA8OEmbRzRsNqLAmdtn.FW1pOdad0uN5LO9h5PgQ{opacity:1;pointer-events:all}.V7acITs53XdgpTPxzunc{width:calc(100% + 30px);margin-left:-15px;background-color:var(--color-orange);display:flex;align-items:center;justify-content:center}.fVSt3bSZBcJGsOdA5nIN{color:var(--color-white);text-transform:uppercase;font-weight:bold}.E6YZPpa60LxA7qqIW7jQ{position:absolute;top:14px;right:15px;font-size:25px;cursor:pointer;color:var(--color-white)}.YYp3pzktjEDEyW8knAZQ{overflow-y:auto;height:calc(100% - 51px);margin:0;padding:0}.u7k2VQ30AQDk6mKA22GX{height:60px;padding:10px;display:flex;align-items:center;border-bottom:1px solid var(--color-black);cursor:pointer;transition:.3s;text-transform:uppercase;width:100%}.u7k2VQ30AQDk6mKA22GX:hover{background-color:var(--color-grey);color:var(--color-black)}.QQoDB9XPcAK18l2DIym4{list-style:none}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN{height:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-bottom:0}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX{position:relative}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa{position:absolute;width:60px;height:100%;background:var(--color-black);right:0;display:flex;align-items:center;justify-content:center}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa:hover{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .zo7CFksIKx7Fahu4e4S_{color:var(--color-white)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E{background:var(--color-grey)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .NytmT59TmaWHc4FLM2wa{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .uLgjMU9sbvfaa0qKEguP{height:auto;opacity:1}.uLgjMU9sbvfaa0qKEguP{padding:0;width:100%;margin:0;background-color:var(--color-orange);color:var(--color-white);height:0;opacity:0;overflow:hidden;transition:height .3s ease,opacity .3s ease}.uLgjMU9sbvfaa0qKEguP .u7k2VQ30AQDk6mKA22GX{min-height:60px;height:auto;padding-inline:40px}.efnjUnudkE0UTVQ6wrgH{cursor:pointer}

package/dist/types/components/Header/Header.data.d.ts

@@ -0,0 +1,3 @@
+import { MenuItem } from './Header.types';
+export declare const getMenuTopList: (onHome: () => void) => MenuItem[];
+export declare const getMenuBottomList: (onProfile: () => void, onLogout: () => void) => MenuItem[];

package/dist/types/components/Header/Header.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from "@storybook/react";
+import { HeaderProps } from './Header.types';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<HeaderProps>;

package/dist/types/components/Header/Header.types.d.ts

@@ -0,0 +1,17 @@
+export interface MenuItem {
+    name: string;
+    action: () => void;
+    dropdownMenu?: MenuItem[];
+}
+export interface actionButton {
+    element?: any;
+    action?: () => void;
+    visibility?: boolean;
+}
+export interface HeaderProps {
+    actionButton?: actionButton;
+    menuList?: MenuItem[];
+    logout?: () => void;
+    homeUrl?: string;
+    profileUrl?: string;
+}

package/dist/types/components/Header/index.d.ts

@@ -0,0 +1,3 @@
+import { HeaderProps } from './Header.types';
+export declare const Header: ({ menuList, actionButton, logout, homeUrl, profileUrl }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default Header;

package/dist/types/components/index.d.ts

@@ -28,3 +28,4 @@ export * from './DropdownButton';
 export * from './ResponsiveTable';
 export * from './WebCam';
 export * from './ResponseType';
+export * from './Header';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.1.61",
+  "version": "1.1.63",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/Button/styles.module.scss

@@ -20,21 +20,21 @@
     }
 
     &:hover {
-        background-color: var(--button-default-background-hover-color);
+        background-color: var(--button-default-background-hover-color) !important;
         color: var(--button-default-text-hover-color) !important;
     }
 
     &:focus,
     &:active,
     &:focus:active {
-        background-color: var(--button-default-background-focus-color);
-        color: var(--button-default-text-focus-color);
+        background-color: var(--button-default-background-focus-color) !important;
+        color: var(--button-default-text-focus-color) !important;
     }
 
     &:disabled,
     &.disabled {
-        background-color: var(--button-disabled-background-color);
-        color: var(--button-disabled-default-text-color);
+        background-color: #C7CAC9 !important;
+        color: var(--button-disabled-default-text-color) !important;
         pointer-events: none;
     }
 
@@ -67,3 +67,18 @@
         }
     }
 }
+
+:global {
+
+    :where(.css-dev-only-do-not-override-m4timi).ant-btn-link:disabled,
+    :where(.css-dev-only-do-not-override-m4timi).ant-btn-link.ant-btn-disabled {
+        color: var(--button-disabled-default-text-color);
+        background-color: #C7CAC9;
+    }
+
+    :where(.css-dev-only-do-not-override-m4timi).ant-btn-link:disabled,
+    :where(.css-dev-only-do-not-override-m4timi).ant-btn-link.ant-btn-disabled {
+        color: var(--button-disabled-default-text-color);
+        background-color: #C7CAC9;
+    }
+}

package/src/components/Header/Header.data.ts

@@ -0,0 +1,24 @@
+import { MenuItem } from './Header.types';
+
+export const getMenuTopList = (
+    onHome: () => void,
+): MenuItem[] => [
+    {
+        name: 'Home',
+        action: onHome,
+    },
+];
+
+export const getMenuBottomList= (
+    onProfile: () => void,
+    onLogout: () => void,
+): MenuItem[] => [
+    {
+        name: 'Profile',
+        action: onProfile,
+    },
+    {
+        name: 'Logout',
+        action: onLogout,
+    }
+];

package/src/components/Header/Header.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta, Story } from "@storybook/react";
+import { Header } from '.';
+import { HeaderProps } from './Header.types';
+
+export default {
+    title: 'Header',
+    component: Header,
+} as Meta;
+
+const Template: Story<HeaderProps> = (args) => <Header {...args}></Header>;
+
+const mockAction = () => {
+    console.log('action');
+}
+
+const homeUrl = 'http://www.google.com';
+const profileUrl = 'http://www.google.pt';
+
+const mockMenu = [
+    {
+        name: "Ciclos de Avaliação",
+        action: () => mockAction(),
+    },
+    {
+        name: "Questionários",
+        action: () => mockAction(),
+    },
+    {
+        name: "Análises",
+        action: () => mockAction(),
+    },
+    {
+        name: "Relatórios",
+        action: () => mockAction(),
+        dropdownMenu: [
+        ]
+    }
+];
+
+export const Primary = Template.bind({});
+Primary.args = {
+    menuList: mockMenu,
+    logout: () => console.log('Logout'), // in here logout from auth0 should be passed
+    homeUrl: homeUrl,
+    profileUrl: profileUrl,
+};
+

package/src/components/Header/Header.types.ts

@@ -0,0 +1,19 @@
+export interface MenuItem {
+    name: string;
+    action: () => void;
+    dropdownMenu?: MenuItem[];
+}
+
+export interface actionButton {
+    element?: any; // the client wants to be able to get a icon here
+    action?: () => void;
+    visibility?: boolean;
+}
+
+export interface HeaderProps {
+    actionButton?: actionButton;
+    menuList?: MenuItem[];
+    logout?: () => void;
+    homeUrl?: string;
+    profileUrl?: string;
+}

package/src/components/Header/index.tsx

@@ -0,0 +1,129 @@
+import { useRef, useState } from 'react';
+import { MinusOutlined, PlusOutlined, BarsOutlined, CloseOutlined } from '@ant-design/icons';
+import omniumIcon from '../../assets/images/omnium-retail-logo.png';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+import { HeaderProps, MenuItem } from './Header.types';
+import { getMenuTopList, getMenuBottomList } from './Header.data';
+
+export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl }: HeaderProps) => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
+    const headerRef = useRef<HTMLDivElement>(null);
+    const overlayRef = useRef<HTMLDivElement>(null);
+
+    const onLogout = () => {
+        if(logout) {
+            logout();
+        } else {
+            onHome();
+        }
+    };
+
+    const onProfile = () => {
+        if(profileUrl) {
+            window.location.href = profileUrl;
+        } else {
+            window.location.reload();
+        }
+    };
+
+    const onHome = () => {
+        if(homeUrl) {
+            window.location.href = homeUrl;
+        } else {
+            window.location.reload();
+        }
+    };
+
+    const menuTopList = getMenuTopList(
+        onHome,
+    );
+
+    const menuBottomList = getMenuBottomList(
+        onProfile,
+        onLogout
+    );
+
+    const combinedMenuList = [...menuTopList, ...(menuList || []), ...menuBottomList];
+
+    const onToggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+    };
+
+    const handleDropdownClick = (e: any, index: number) => {
+        e.stopPropagation();
+        setActiveDropdown(activeDropdown === index ? null : index);
+    };
+
+    const renderMenu = (menuList: MenuItem[]) => {
+        return menuList.map((link, index) => (
+            <li
+                key={link.name}
+                data-index={index}
+                className={classNames(styles.listItem, {
+                    [styles.hasDropdown]: link.dropdownMenu,
+                    [styles.dropdownActive]: activeDropdown === index
+                })}
+            >
+                <div
+                    className={styles.listName}
+                    onClick={() => link.action()}
+                >
+                    {link.name} 
+                    {
+                        link.dropdownMenu && link.dropdownMenu.length > 0 && <div className={ styles.arrow } onClick={ (event) => handleDropdownClick(event, index) }>
+                            {
+                                activeDropdown === index ? 
+                                <MinusOutlined className={styles.arrowIcon } /> :
+                                <PlusOutlined className={styles.arrowIcon } />
+                            }
+                        </div>
+                    }
+                </div>
+                {link.dropdownMenu && link.dropdownMenu.length > 0 && (
+                    <ul
+                        className={styles.dropdownMenu}
+                    >
+                        {link.dropdownMenu.map((dropdownLink) => (
+                            <li key={dropdownLink.name} onClick={dropdownLink.action} className={styles.listItem}>
+                                <div className={styles.listName}>{dropdownLink.name}</div>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </li>
+        ));
+    };
+
+    return (
+        <div className={styles.header} ref={headerRef}>
+            <BarsOutlined onClick={onToggleMenu} className={ styles.toggleMenuOpen } />
+
+            <div className={styles.logoContainer}>
+                <img src={omniumIcon} alt="Omnium Retail Logo" />
+            </div>
+
+            <div className={classNames(styles.menu, { [styles.active]: isMenuOpen })}>
+                <div className={styles.titleWrapper}>
+                    <p className={styles.title}>
+                        Menu
+                    </p>
+                    <CloseOutlined color={'#FFFFFF'} className={styles.toggleMenuClose} onClick={onToggleMenu} />
+                </div>
+                <div className={styles.menuList}>
+                    {renderMenu(combinedMenuList)}
+                </div>
+            </div>
+            <div ref={overlayRef} className={classNames(styles.overlay, { [styles.active]: isMenuOpen })} onClick={onToggleMenu}></div>
+
+            {actionButton && actionButton.visibility && (
+                <div className={styles.actionButton} onClick={actionButton.action}>
+                    {actionButton.element}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Header;

package/src/components/Header/styles.module.scss

@@ -0,0 +1,193 @@
+
+:root {
+    --color-grey: #e4e4e4;
+    --color-grey-100: #E5E5E5;
+    --color-white: #FFFFFF;
+    --color-black: #2C2D2E;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    padding: 13px 20px;
+    border-bottom: 2px solid var(--color-grey-100);
+    box-sizing: border-box;
+
+     * {
+        box-sizing: border-box;
+    }
+}
+
+.logoContainer {
+    display: flex;
+    flex-grow: 1;
+    align-items: flex-end;
+    justify-content: center;
+
+    img {
+        max-width: 196px;
+    }
+}
+
+.toggleMenuOpen {
+    cursor: pointer;
+    padding: 4px 4px 4px 0;
+    font-size: 20px;
+} 
+
+.menu {
+    position: fixed;
+    top: 0;
+    left: -100%;
+    bottom: 0;
+    width: 100%;
+    max-width: 375px;
+    background-color: var(--color-white);
+    padding-inline: 15px;
+    z-index: 999;
+    box-shadow: 0 3px 12px rgba(0,0,0, .45);
+    transition: 0.6s ease-out;
+
+    &.active {
+        left: 0;
+        transition: 0.3s ease-in;
+    }
+}
+
+.overlay {
+    background-color: rgba(0,0,0,.3);
+    backdrop-filter: blur(1px);
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 998;
+    pointer-events: none;
+    opacity: 0;
+    transition: 0.3s;
+
+    &.active {
+        opacity: 1;
+        pointer-events: all;
+    }
+}
+
+.titleWrapper {
+    width: calc(100% + 30px);
+    margin-left: -15px;
+    background-color: var(--color-orange);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.title {
+    color: var(--color-white);
+    text-transform: uppercase;
+    font-weight: bold;
+}
+
+.toggleMenuClose {
+    position: absolute;
+    top: 14px;
+    right: 15px;
+    font-size: 25px;
+    cursor: pointer;
+    color: var(--color-white);
+}
+
+.menuList {
+    overflow-y: auto;
+    height: calc(100% - 51px);
+    margin: 0;
+    padding: 0;
+}
+
+.listName {
+    height: 60px;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--color-black);
+    cursor: pointer;
+    transition: 0.3s;
+    text-transform: uppercase;
+    width: 100%;
+
+    &:hover {
+        background-color: var(--color-grey);
+        color: var(--color-black);
+    }
+}
+
+.listItem {
+    list-style: none;
+
+    &.hasDropdown {
+        height: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        padding-bottom: 0;
+
+        > .listName {
+            position: relative;
+        
+            .arrow {
+                position: absolute;
+                width: 60px;
+                height: 100%;
+                background: var(--color-black);
+                right: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+    
+                &:hover {
+                    background-color: var(--color-orange);
+                }
+            }
+    
+            .arrowIcon {
+                color: var(--color-white);
+            }
+        } 
+
+        &.dropdownActive {
+            background: var(--color-grey);
+
+            .arrow {
+                background-color: var(--color-orange);
+            }
+
+            .dropdownMenu {
+                height: auto; /* Arbitrary large value to allow smooth transition */
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.dropdownMenu {
+    padding: 0;
+    width: 100%;
+    margin: 0;
+    background-color: var(--color-orange);
+    color: var(--color-white);
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: height 0.3s ease, opacity 0.3s ease;
+
+    .listName {
+        min-height: 60px;
+        height: auto;
+        padding-inline: 40px;
+    } 
+}
+
+.actionButton {
+    cursor: pointer;
+}

package/src/components/index.tsx

@@ -28,3 +28,4 @@ export * from './DropdownButton';
 export * from './ResponsiveTable';
 export * from './WebCam';
 export * from './ResponseType';
+export * from './Header';