@smartbooks-ai/layout 0.0.3

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@smartbooks-ai/layout",
+  "version": "0.0.3",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.ts",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.ts",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest",
+    "lint:ts": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "7.3.6",
+    "@mui/material": "^7.3.6",
+    "@mui/x-date-pickers": "8.22.0",
+    "polished": "^4.3.1",
+    "react-router": "^7.10.1",
+    "react": "^18.3.1",
+    "@auth0/auth0-react": "2.8.0",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.3.6",
+    "@testing-library/react": "^16.3.1",
+    "@tsconfig/vite-react": "^7.0.2",
+    "@types/react": "^18.3.27",
+    "jsdom": "^27.3.0",
+    "react": "^18.3.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.16"
+  },
+  "dependencies": {
+    "@smartbooks-ai/api-client": "0.0.1",
+    "use-resize-observer": "^9.1.0"
+  }
+}

package/src/components/PageHeader/PageHeader.tsx

@@ -0,0 +1,15 @@
+import Typography from '@mui/material/Typography';
+
+import * as Styled from './styles';
+
+export type PageHeaderProps = {
+  title: React.ReactNode;
+  actions?: React.ReactNode;
+};
+
+export const PageHeader: React.FC<PageHeaderProps> = ({ title, actions }) => (
+  <Styled.Container>
+    {typeof title === 'string' ? <Typography variant="h1">{title}</Typography> : title}
+    {actions && <Styled.CtaButtons>{actions}</Styled.CtaButtons>}
+  </Styled.Container>
+);

package/src/components/PageHeader/index.ts

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

package/src/components/PageHeader/styles.ts

@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const Container = styled.section(
+  ({ theme }) => css`
+    display: flex;
+
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+
+    ${theme.breakpoints?.down?.('md')} {
+      flex-direction: column;
+
+      align-items: flex-start;
+    }
+  `,
+);
+
+export const CtaButtons = styled.section(
+  ({ theme }) => css`
+    display: flex;
+
+    flex: none;
+
+    column-gap: 0.5rem;
+    align-items: center;
+
+    ${theme.breakpoints?.down?.('md')} {
+      align-self: flex-end;
+    }
+  `,
+);

package/src/components/PageWithMenuLayout/AppSelect/index.tsx

@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+
+import { AvailableCompany } from '@smartbooks-ai/api-client';
+
+import * as Styled from './styles';
+
+import { UserProfile } from '../../../security/UserProfile';
+import { MenuSelect } from '../MenuSelect';
+import { MultiSubscriptionsMenuItems } from '../MultiSubscriptionsMenuItems';
+
+type Props = {
+  companyCode?: string;
+  tenantCode?: string;
+  isExpanded: boolean;
+  profile: UserProfile | null;
+  onCompanyClicked: (company: AvailableCompany) => Promise<void>;
+};
+
+export const AppSelect: React.FC<Props> = ({ companyCode, isExpanded, tenantCode, profile, onCompanyClicked }) => {
+  const tenants = profile?.allowedTenants;
+
+  const tenantsWithCompanies = useMemo(() => tenants?.filter(({ companies }) => companies.length > 0) ?? [], [tenants]);
+
+  const currentCompany = companyCode ? profile?.allowedCompanies.find(({ code }) => code === companyCode) : undefined;
+
+  const tenant = tenants?.find((t) =>
+    currentCompany ? t.companies.some(({ code }) => code === currentCompany.code) : t.code === tenantCode,
+  );
+
+  const onCompanySelected = (closeMenu: () => void) => (company: AvailableCompany) => {
+    closeMenu();
+
+    onCompanyClicked(company);
+  };
+
+  const avatarContent = currentCompany?.description
+    .split(' ')
+    .slice(0, 2)
+    .map((word) => word[0])
+    .join('');
+
+  return (
+    <MenuSelect
+      isExpanded={isExpanded}
+      startIcon={
+        <Styled.SelectorAvatar variant="rounded" isMenuExpanded={isExpanded}>
+          {avatarContent}
+        </Styled.SelectorAvatar>
+      }
+      selectedOptionText={currentCompany?.description}
+      renderMenuItems={({ closeMenu }) => [
+        ...(tenantsWithCompanies.length > 0
+          ? [
+              <MultiSubscriptionsMenuItems
+                key="multi-subscriptions-menu-items"
+                selectedTenant={tenant}
+                tenants={tenantsWithCompanies}
+                selectedCompanyCode={companyCode}
+                onCompanySelected={onCompanySelected(closeMenu)}
+              />,
+            ]
+          : []),
+      ]}
+    />
+  );
+};

package/src/components/PageWithMenuLayout/AppSelect/styles.ts

@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import Avatar from '@mui/material/Avatar';
+
+import { shouldNotForwardPropsWithKeys } from '../../../utils/shouldNotForwardPropsWithKeys';
+
+type Props = {
+  isMenuExpanded: boolean;
+};
+export const SelectorAvatar = styled(Avatar, shouldNotForwardPropsWithKeys<Props>(['isMenuExpanded']))<Props>`
+  width: 1.75rem;
+  height: 1.75rem;
+
+  color: ${({ theme }) => theme.my.colors.text.main};
+
+  background-color: ${({ theme }) => theme.my.colors.background.light};
+  border-radius: ${({ theme }) => theme.my.radius.sm};
+
+  && {
+    font: ${({ theme }) => theme.my.font.body2};
+  }
+
+  transition:
+    width 0.3s,
+    height 0.3s;
+
+  ${({ isMenuExpanded }) =>
+    isMenuExpanded &&
+    css`
+      width: 2rem;
+      height: 2rem;
+    `}
+`;

package/src/components/PageWithMenuLayout/LogoHeaderImage.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+const LogoHeaderImage = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 56.0617 56.0627" xmlns="http://www.w3.org/2000/svg" fill="#fff" {...props}>
+    <g transform="matrix(1, 0, 0, 1, -3.2658579349517822, -5.714171886444092)">
+      <g transform="matrix(1, 0, 0, 1, 65.689034, -123.853729)">
+        <g transform="matrix(0.35277777,0,0,-0.35277777,-228.38369,383.37697)">
+          <path transform="translate(496.3657,612.2275)" d="m 0,0 v -1.998 c -0.271,0.472 -0.53,0.948 -0.779,1.431 z" />
+          <path
+            transform="translate(555.2109,567.0908)"
+            d="m 0,0 c -1.76,-0.12 -3.53,-0.189 -5.32,-0.189 -3.51,0 -6.96,0.25 -10.34,0.729 V 68.681 L 0,80.07 Z M 0,87.94 -15.66,76.541 -22.02,71.92 V -4.779 c 2.09,-0.45 4.21,-0.821 6.36,-1.091 3.38,-0.449 6.84,-0.68 10.34,-0.68 1.79,0 3.56,0.061 5.32,0.18 2.15,0.141 4.27,0.37 6.36,0.681 v 98.25 z"
+          />
+          <path
+            transform="translate(612.5273,688.8418)"
+            d="m 0,0 c -1.309,1.68 -2.687,3.307 -4.124,4.871 -14.537,15.819 -35.386,25.746 -58.509,25.746 -43.814,0 -79.455,-35.641 -79.455,-79.455 0,-14.214 3.752,-27.569 10.318,-39.129 1.05,-1.854 2.173,-3.656 3.371,-5.411 3.514,-5.178 7.627,-9.921 12.237,-14.135 2.025,-1.849 4.15,-3.598 6.36,-5.23 4.834,-3.583 10.086,-6.625 15.672,-9.047 2.072,-0.896 4.197,-1.712 6.359,-2.433 v 68.257 l -6.359,-4.627 -15.672,-11.394 -6.36,-4.627 v -1.998 c -0.27,0.471 -0.53,0.948 -0.779,1.43 -4.446,8.48 -6.958,18.126 -6.958,28.344 0,33.781 27.484,61.266 61.266,61.266 7.043,0 13.811,-1.193 20.112,-3.397 4.012,-1.389 7.833,-3.196 11.417,-5.353 3.21,-1.936 6.225,-4.159 9.018,-6.631 l 0.635,0.463 4.61,3.354 c -3.807,3.513 -8.012,6.603 -12.552,9.174 -9.82,5.57 -21.168,8.75 -33.24,8.75 -37.29,0 -67.626,-30.342 -67.626,-67.626 0,-11.617 2.946,-22.561 8.124,-32.122 1.018,-1.876 2.12,-3.694 3.302,-5.459 0.848,-1.262 1.739,-2.496 2.671,-3.699 1.951,-2.528 4.076,-4.913 6.36,-7.139 v 17.404 l 15.672,11.4 V -114.8 c -5.666,2.719 -10.929,6.143 -15.672,10.16 -2.242,1.898 -4.362,3.922 -6.36,6.069 -2.591,2.787 -4.965,5.776 -7.096,8.935 -1.187,1.759 -2.3,3.572 -3.334,5.438 -5.819,10.482 -9.137,22.54 -9.137,35.36 0,40.305 32.791,73.095 73.096,73.095 16.18,0 31.147,-5.284 43.273,-14.219 1.807,-1.33 3.556,-2.746 5.231,-4.229 0.609,-0.543 1.2,-1.106 1.791,-1.668 L -9.89,5.923 V 1.707 c 0.194,-0.202 0.397,-0.395 0.589,-0.6 1.452,-1.552 2.841,-3.169 4.16,-4.843 9.773,-12.429 15.608,-28.095 15.608,-45.102 0,-21.714 -9.513,-41.249 -24.596,-54.652 -2.025,-1.796 -4.145,-3.482 -6.36,-5.051 -3.587,-2.535 -7.412,-4.757 -11.432,-6.627 v -6.955 c 3.986,1.677 7.807,3.668 11.432,5.945 2.194,1.378 4.314,2.863 6.36,4.442 18.814,14.543 30.956,37.332 30.956,62.898 C 16.827,-30.442 10.542,-13.483 0,0"
+          />
+          <path
+            transform="translate(598.3979,592.9258)"
+            d="m 0,0 c 11.829,12.184 19.122,28.794 19.122,47.078 0,15.799 -5.449,30.352 -14.569,41.879 -0.102,0.128 -0.211,0.25 -0.313,0.377 V 78.215 C 9.653,69.085 12.762,58.437 12.762,47.078 12.762,35.719 9.653,25.067 4.24,15.936 V 8.245 L 3.359,7.101 C 1.314,4.445 -0.974,1.911 -3.441,-0.431 L -6.36,-3.201 V -5.777 C -4.118,-3.986 -1.993,-2.057 0,0"
+          />
+          <path
+            transform="translate(602.6377,690.5483)"
+            d="M 0,0 V 4.216 L -2.448,2.435 C -1.613,1.642 -0.797,0.831 0,0"
+          />
+          <path
+            transform="translate(576.3667,571.8584)"
+            d="m 0,0 v -6.783 c 1.433,0.508 2.846,1.056 4.24,1.643 V 1.815 C 2.849,1.168 1.436,0.562 0,0"
+          />
+          <path transform="translate(597.8096,678.1411)" d="M 0,0 C 0.202,-0.249 0.397,-0.498 0.588,-0.752 V 0.43 Z" />
+          <path
+            transform="translate(601.7573,600.0264)"
+            d="m 0,0 0.88,1.145 v 7.69 C -0.407,6.663 -1.822,4.576 -3.359,2.587 -5.294,0.075 -7.424,-2.278 -9.719,-4.456 v -5.846 L -6.8,-7.531 C -4.333,-5.189 -2.045,-2.655 0,0"
+          />
+          <path
+            transform="translate(598.4009,678.5713)"
+            d="m 0,0 -0.59,-0.43 c 0.2,-0.25 0.4,-0.5 0.59,-0.75 v -74.78 c -1.94,-2.51 -4.07,-4.86 -6.36,-7.04 v 78.37 l -15.67,-11.4 v -97.47 c -2.09,-0.73 -4.21,-1.38 -6.36,-1.95 v 102.67 l 6.36,4.62 15.67,11.4 1.53,1.11 L 0,7.86 Z"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default LogoHeaderImage;

package/src/components/PageWithMenuLayout/LogoHeaderText.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+const LogoHeaderText = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 277.5198 28.2999" xmlns="http://www.w3.org/2000/svg" fill="#fff" {...props}>
+    <path
+      transform="matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 21.501811905092836, 16.848698628076818)"
+      d="m 0,0 c -1.02,2.42 -2.35,4.47 -4.01,6.119 -1.65,1.651 -3.53,3.01 -5.64,4.061 -2.11,1.06 -4.24,1.9 -6.39,2.54 -2.15,0.63 -4.22,1.119 -6.23,1.469 -2,0.361 -3.74,0.71 -5.22,1.061 -1.97,0.49 -4.01,0.979 -6.12,1.479 -2.12,0.491 -4.05,1.091 -5.81,1.791 -1.76,0.7 -3.2,1.58 -4.33,2.64 -1.12,1.06 -1.69,2.36 -1.69,3.91 0,1.539 0.48,2.86 1.43,3.95 0.95,1.089 2.14,1.99 3.59,2.7 1.44,0.699 2.97,1.21 4.59,1.53 1.62,0.31 3.06,0.47 4.33,0.47 3.73,0 7.28,-0.67 10.66,-2 3.38,-1.341 6.89,-3.281 10.55,-5.81 l 8.24,11.61 c -2.4,1.689 -4.63,3.149 -6.71,4.379 -2.07,1.23 -4.2,2.25 -6.38,3.06 -2.18,0.811 -4.54,1.431 -7.07,1.851 -2.54,0.419 -5.42,0.629 -8.66,0.629 -3.24,0 -6.6,-0.35 -10.08,-1.049 -3.48,-0.71 -6.65,-1.92 -9.5,-3.64 -2.85,-1.73 -5.19,-4.09 -7.02,-7.081 -1.83,-2.989 -2.74,-6.739 -2.74,-11.239 0,-3.091 0.51,-5.79 1.53,-8.071 1.02,-2.289 2.37,-4.259 4.06,-5.909 1.69,-1.66 3.59,-3.031 5.7,-4.121 2.11,-1.09 4.26,-1.97 6.44,-2.64 2.18,-0.669 4.29,-1.2 6.33,-1.58 2.04,-0.389 3.84,-0.719 5.39,-1 2.32,-0.429 4.55,-0.889 6.7,-1.38 2.14,-0.49 4.01,-1.089 5.59,-1.79 1.59,-0.71 2.85,-1.599 3.8,-2.689 0.95,-1.091 1.43,-2.41 1.43,-3.96 0,-1.2 -0.32,-2.41 -0.95,-3.641 -0.64,-1.229 -1.59,-2.32 -2.85,-3.269 -1.27,-0.95 -2.82,-1.731 -4.65,-2.33 -1.83,-0.601 -3.94,-0.891 -6.33,-0.891 -4.5,0 -8.81,0.96 -12.93,2.901 -4.12,1.929 -8.11,4.24 -11.98,6.91 l -8.02,-11.821 c 2.39,-1.689 4.71,-3.24 6.96,-4.639 2.26,-1.41 4.65,-2.63 7.18,-3.641 2.54,-1.029 5.33,-1.84 8.39,-2.43 3.06,-0.599 6.6,-0.899 10.61,-0.899 4.36,0 8.34,0.489 11.93,1.48 3.59,0.98 6.68,2.44 9.29,4.379 2.6,1.93 4.61,4.38 6.01,7.33 1.41,2.96 2.11,6.441 2.11,10.451 C 1.53,-5.37 1.02,-2.431 0,0"
+    />
+    <path
+      transform="matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 54.25382881612312, 0.5575740958811508)"
+      d="M 0,0 -38,-44.55 -75.9,0 h -0.95 v -77.16 h 14.78 v 39.05 L -38,-67.13 -13.83,-38.11 V -77.16 H 0.95 V 0 Z"
+    />
+    <path
+      transform="matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 68.36493998021616, 18.955030016193632)"
+      d="M 0,0 11.08,23.33 22.06,0 Z m 11.82,52.15 h -1.47 l -39.48,-77.16 h 16.04 l 5.91,12.14 h 36.42 l 6.02,-12.14 H 51.3 Z"
+    />
+    <path
+      transform="matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 102.79950923521027, 14.206504166930245)"
+      d="m 0,0 c -1.44,-0.53 -2.82,-0.79 -4.16,-0.79 h -20.3 V 25.7 h 20.3 c 2.6,0 4.67,-0.49 6.21,-1.47 1.54,-0.99 2.74,-2.19 3.58,-3.59 0.84,-1.41 1.4,-2.89 1.68,-4.44 0.28,-1.54 0.42,-2.88 0.42,-4.01 0,-2.18 -0.37,-4.08 -1.1,-5.7 C 5.89,4.87 4.96,3.52 3.84,2.43 2.72,1.34 1.44,0.53 0,0 m 6.44,-12.51 c 4.86,1.9 8.75,5.03 11.68,9.4 2.93,4.36 4.39,9.46 4.39,15.3 0,3.87 -0.65,7.44 -1.96,10.72 -1.3,3.27 -3.12,6.08 -5.44,8.44 -2.33,2.36 -5.13,4.19 -8.41,5.49 -3.28,1.3 -6.89,1.95 -10.84,1.95 h -35.1 v -77.26 h 14.78 v 24.59 h 14.62 c 2.95,-4.22 5.9,-8.37 8.84,-12.451 2.95,-4.089 5.96,-8.129 9.05,-12.139 h 17.63 c -6.34,8.72 -12.75,17.38 -19.24,25.96"
+    />
+    <path
+      transform="matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 113.71805040033725, 0.5222618670159136)"
+      d="m 0,0 v -13.09 h 22.17 v -64.17 h 14.78 v 64.17 H 59.01 V 0 Z"
+    />
+    <path
+      transform="matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 154.45664918610782, 20.796476624127536)"
+      d="M 0,0 C -0.5,-1.23 -1.17,-2.36 -2.01,-3.38 -2.85,-4.4 -3.84,-5.21 -4.97,-5.81 -6.09,-6.41 -7.29,-6.7 -8.55,-6.7 h -20.899 v 19.63 h 19.309 c 3.38,0 6.04,-0.88 7.97,-2.64 C -0.229,8.53 0.73,6.35 0.73,3.75 0.73,2.48 0.49,1.23 0,0 m -29.449,44.38 h 19.21 c 1.05,0 2.059,-0.25 3.01,-0.74 0.95,-0.5 1.769,-1.13 2.479,-1.91 0.7,-0.78 1.261,-1.7 1.681,-2.76 0.429,-1.06 0.639,-2.16 0.639,-3.29 0,-1.13 -0.2,-2.28 -0.58,-3.45 -0.389,-1.17 -0.95,-2.21 -1.689,-3.13 -0.74,-0.92 -1.66,-1.67 -2.75,-2.23 C -8.54,26.3 -9.819,26.02 -11.3,26.02 H -29.449 Z M 14.091,9.69 c -0.95,2.1 -2.171,3.96 -3.651,5.57 -1.469,1.62 -3.139,2.9 -5.009,3.85 -1.861,0.94 -3.75,1.49 -5.651,1.63 1.83,0.07 3.521,0.62 5.071,1.64 1.549,1.02 2.87,2.28 3.96,3.76 1.089,1.48 1.95,3.1 2.589,4.87 0.63,1.76 0.941,3.42 0.941,4.97 0,4.38 -0.591,7.96 -1.79,10.75 -1.2,2.78 -2.811,4.97 -4.851,6.56 -2.05,1.59 -4.439,2.68 -7.179,3.28 -2.75,0.6 -5.67,0.9 -8.76,0.9 h -33.99 V -19.79 H -8.55 c 3.3,0 6.42,0.38 9.34,1.16 2.92,0.77 5.471,2.05 7.65,3.84 2.18,1.79 3.901,4.14 5.17,7.05 1.27,2.91 1.901,6.48 1.901,10.69 0,2.38 -0.471,4.63 -1.42,6.74"
+    />
+    <path
+      transform="matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 186.44298285655168, 17.68863444259115)"
+      d="m 0,0 c -1.34,-3.159 -3.14,-5.96 -5.43,-8.39 -2.28,-2.429 -4.95,-4.36 -8,-5.799 -3.059,-1.451 -6.34,-2.17 -9.849,-2.17 -3.511,0 -6.8,0.719 -9.851,2.17 -3.05,1.439 -5.72,3.37 -8.01,5.799 -2.28,2.43 -4.089,5.231 -5.42,8.39 -1.33,3.171 -2,6.511 -2,10.03 0,3.45 0.67,6.77 2,9.97 1.331,3.21 3.14,6 5.42,8.4 2.29,2.391 4.96,4.31 8.01,5.75 3.051,1.44 6.34,2.161 9.851,2.161 3.509,0 6.79,-0.721 9.849,-2.161 3.05,-1.44 5.72,-3.359 8,-5.75 C -3.14,26 -1.34,23.21 0,20 1.33,16.8 2,13.48 2,10.03 2,6.511 1.33,3.171 0,0 M 13.61,25.601 C 11.5,30.49 8.631,34.75 5.011,38.371 1.381,41.99 -2.859,44.86 -7.71,46.97 c -4.859,2.111 -10.069,3.171 -15.619,3.171 -5.49,0 -10.66,-1.06 -15.521,-3.171 -4.849,-2.11 -9.089,-4.98 -12.719,-8.599 -3.62,-3.621 -6.491,-7.881 -8.601,-12.77 -2.109,-4.891 -3.17,-10.08 -3.17,-15.571 0,-5.559 1.061,-10.769 3.17,-15.62 2.11,-4.859 4.981,-9.099 8.601,-12.72 3.63,-3.629 7.87,-6.49 12.719,-8.599 4.861,-2.111 10.031,-3.17 15.521,-3.17 5.55,0 10.76,1.059 15.619,3.17 4.851,2.109 9.091,4.97 12.721,8.599 3.62,3.621 6.489,7.861 8.599,12.72 2.111,4.851 3.17,10.061 3.17,15.62 0,5.491 -1.059,10.68 -3.17,15.571"
+    />
+    <path
+      transform="matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 218.68700967032424, 17.68863444259115)"
+      d="m 0,0 c -1.33,-3.159 -3.14,-5.96 -5.42,-8.39 -2.28,-2.429 -4.95,-4.36 -8.01,-5.799 -3.049,-1.451 -6.33,-2.17 -9.84,-2.17 -3.51,0 -6.8,0.719 -9.85,2.17 -3.06,1.439 -5.73,3.37 -8.01,5.799 -2.28,2.43 -4.09,5.231 -5.42,8.39 -1.34,3.171 -2,6.511 -2,10.03 0,3.45 0.66,6.77 2,9.97 1.33,3.21 3.14,6 5.42,8.4 2.28,2.391 4.95,4.31 8.01,5.75 3.05,1.44 6.34,2.161 9.85,2.161 3.51,0 6.791,-0.721 9.84,-2.161 3.06,-1.44 5.73,-3.359 8.01,-5.75 C -3.14,26 -1.33,23.21 0,20 1.34,16.8 2.01,13.48 2.01,10.03 2.01,6.511 1.34,3.171 0,0 M 13.62,25.601 C 11.51,30.49 8.64,34.75 5.01,38.371 1.39,41.99 -2.85,44.86 -7.7,46.97 c -4.86,2.111 -10.07,3.171 -15.63,3.171 -5.48,0 -10.66,-1.06 -15.51,-3.171 -4.86,-2.11 -9.1,-4.98 -12.72,-8.599 -3.63,-3.621 -6.49,-7.881 -8.6,-12.77 -2.11,-4.891 -3.17,-10.08 -3.17,-15.571 0,-5.559 1.06,-10.769 3.17,-15.62 2.11,-4.859 4.97,-9.099 8.6,-12.72 3.62,-3.629 7.86,-6.49 12.72,-8.599 4.85,-2.111 10.03,-3.17 15.51,-3.17 5.56,0 10.77,1.059 15.63,3.17 4.85,2.109 9.09,4.97 12.71,8.599 3.63,3.621 6.5,7.861 8.61,12.72 2.11,4.851 3.16,10.061 3.16,15.62 0,5.491 -1.05,10.68 -3.16,15.571"
+    />
+    <path
+      d="M 0,0 31.77,39.9 H 13.62 L -17.101,0.74 V 40 H -31.88 v -77.26 h 14.779 V -2.109 L 15.3,-37.26 h 19.53 z"
+      transform="matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 241.21554419908352, 14.633502222190145)"
+    />
+    <path
+      transform="matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 276.9801141033313, 16.848698628076818)"
+      d="m 0,0 c -1.021,2.42 -2.36,4.47 -4.01,6.119 -1.65,1.651 -3.54,3.01 -5.65,4.061 -2.111,1.06 -4.24,1.9 -6.38,2.54 -2.15,0.63 -4.22,1.119 -6.231,1.469 -2.009,0.361 -3.75,0.71 -5.219,1.061 -1.98,0.49 -4.02,0.979 -6.13,1.479 -2.11,0.491 -4.04,1.091 -5.8,1.791 -1.761,0.7 -3.2,1.58 -4.33,2.64 -1.13,1.06 -1.69,2.36 -1.69,3.91 0,1.539 0.48,2.86 1.43,3.95 0.949,1.089 2.14,1.99 3.579,2.7 1.451,0.699 2.981,1.21 4.601,1.53 1.61,0.31 3.059,0.47 4.32,0.47 3.73,0 7.29,-0.67 10.659,-2 3.381,-1.341 6.901,-3.281 10.561,-5.81 l 8.229,11.61 c -2.389,1.689 -4.62,3.149 -6.699,4.379 -2.08,1.23 -4.2,2.25 -6.39,3.06 -2.18,0.811 -4.531,1.431 -7.07,1.851 -2.53,0.419 -5.421,0.629 -8.65,0.629 -3.24,0 -6.6,-0.35 -10.08,-1.049 -3.49,-0.71 -6.651,-1.92 -9.5,-3.64 -2.85,-1.73 -5.191,-4.09 -7.02,-7.081 -1.83,-2.989 -2.75,-6.739 -2.75,-11.239 0,-3.091 0.51,-5.79 1.53,-8.071 1.02,-2.289 2.379,-4.259 4.07,-5.909 1.689,-1.66 3.59,-3.031 5.7,-4.121 2.109,-1.09 4.26,-1.97 6.44,-2.64 2.18,-0.669 4.29,-1.2 6.33,-1.58 2.04,-0.389 3.83,-0.719 5.379,-1 2.331,-0.429 4.561,-0.889 6.71,-1.38 2.141,-0.49 4.011,-1.089 5.591,-1.79 1.579,-0.71 2.85,-1.599 3.8,-2.689 0.95,-1.091 1.42,-2.41 1.42,-3.96 0,-1.2 -0.311,-2.41 -0.95,-3.641 -0.63,-1.229 -1.58,-2.32 -2.85,-3.269 -1.261,-0.95 -2.81,-1.731 -4.64,-2.33 -1.831,-0.601 -3.94,-0.891 -6.331,-0.891 -4.509,0 -8.819,0.96 -12.929,2.901 -4.12,1.929 -8.111,4.24 -11.981,6.91 l -8.019,-11.821 c 2.389,-1.689 4.71,-3.24 6.96,-4.639 2.25,-1.41 4.65,-2.63 7.179,-3.641 2.531,-1.029 5.331,-1.84 8.391,-2.43 3.06,-0.599 6.6,-0.899 10.609,-0.899 4.361,0 8.341,0.489 11.931,1.48 3.58,0.98 6.68,2.44 9.279,4.379 2.611,1.93 4.611,4.38 6.021,7.33 1.41,2.96 2.11,6.441 2.11,10.451 C 1.53,-5.37 1.02,-2.431 0,0"
+    />
+  </svg>
+);
+
+export default LogoHeaderText;

package/src/components/PageWithMenuLayout/MenuItemWithChildren/MenuItemWithChildren.tsx

@@ -0,0 +1,149 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { useEventCallback } from '@mui/material';
+import Collapse from '@mui/material/Collapse';
+import Fade from '@mui/material/Fade';
+import { NavLink, useMatches } from 'react-router';
+
+import * as Styled from './styles';
+
+import { assertNever } from '../../../utils/assertNever';
+import { MenuItem } from '../types';
+
+const MenuItemLink = Styled.MenuItem.withComponent(NavLink);
+
+const isAbsoluteUrl = (url: string) => /^(?:[a-z+]+:)?\/\//i.test(url);
+
+const hasActiveChildren = (menuItem: MenuItem, pathnames: string[]): boolean =>
+  ('href' in menuItem && pathnames.includes(decodeURIComponent(menuItem.href))) ||
+  ('children' in menuItem && menuItem.children.some((child) => hasActiveChildren(child, pathnames)));
+
+type Props = {
+  menuItem: MenuItem;
+  elevation?: number;
+  isMenuOpen: boolean;
+  isExpanded?: boolean;
+  onExpand?: (menuItem: MenuItem) => void;
+  onCollapse?: () => void;
+  openMenu: () => void;
+};
+
+export const MenuItemWithChildren: React.FC<Props> = ({
+  menuItem,
+  elevation = 0,
+  isMenuOpen,
+  isExpanded = true,
+  onCollapse,
+  onExpand,
+  openMenu,
+}) => {
+  const [expandedChild, setExpandedChild] = useState<MenuItem>();
+  const onCollapseChild = useCallback(() => setExpandedChild(undefined), []);
+
+  const matches = useMatches();
+  const containsActiveChildren = useMemo(
+    () =>
+      hasActiveChildren(
+        menuItem,
+        matches.map(({ pathname }) => pathname),
+      ),
+    [menuItem, matches],
+  );
+
+  useEffect(() => {
+    if (containsActiveChildren && 'children' in menuItem) onExpand?.(menuItem);
+  }, [containsActiveChildren, onExpand, menuItem]);
+
+  const isTitle = 'children' in menuItem && !('href' in menuItem) && !('onClick' in menuItem) && elevation === 0;
+
+  const onMenuItemClick = useEventCallback(() => {
+    openMenu();
+
+    if (isTitle || 'href' in menuItem) return;
+
+    if ('children' in menuItem) {
+      if (isExpanded) {
+        onCollapse?.();
+      } else {
+        onExpand?.(menuItem);
+      }
+    } else if ('onClick' in menuItem) {
+      menuItem.onClick();
+    } else if ('disabled' in menuItem) {
+      // Do nothing
+    } else {
+      assertNever(menuItem);
+    }
+  });
+
+  const isHighlighted = containsActiveChildren && (!isExpanded || !isMenuOpen);
+
+  const menuItemContent = (
+    <>
+      {!isTitle && elevation > 0 && (
+        <Styled.ActiveMenuItemIndicator isMenuOpen={isMenuOpen} visible={containsActiveChildren && 'href' in menuItem}>
+          &nbsp;
+        </Styled.ActiveMenuItemIndicator>
+      )}
+
+      {menuItem.icon && <Styled.ListItemIcon>{menuItem.icon}</Styled.ListItemIcon>}
+
+      <Fade in={isMenuOpen || (isTitle && isExpanded)}>
+        <Styled.ListItem>
+          <Styled.ListItemText
+            elevation={elevation}
+            title={menuItem.title}
+            isHighlighted={isHighlighted}
+            isTitle={isTitle}
+          >
+            {menuItem.title}
+          </Styled.ListItemText>
+        </Styled.ListItem>
+      </Fade>
+
+      {'children' in menuItem && elevation !== 0 && (
+        <Styled.ArrowDownIcon isVisible={isMenuOpen} isExpanded={isExpanded} fontSize="small" />
+      )}
+    </>
+  );
+
+  const MenuItemComponent = 'href' in menuItem ? MenuItemLink : Styled.MenuItem;
+
+  return (
+    <section>
+      {!menuItem.skipHeader && (
+        <MenuItemComponent
+          isMenuOpen={isMenuOpen}
+          disabled={isTitle}
+          onClick={onMenuItemClick}
+          isHighlighted={isHighlighted}
+          elevation={elevation}
+          isTitle={isTitle}
+          to={'href' in menuItem ? menuItem.href : {}}
+          target={'href' in menuItem && isAbsoluteUrl(menuItem.href) ? '_blank' : undefined}
+        >
+          {menuItemContent}
+        </MenuItemComponent>
+      )}
+
+      {'children' in menuItem && (
+        <Collapse in={isExpanded && (isMenuOpen || elevation !== 0)}>
+          <Styled.MenuList elevation={elevation}>
+            {menuItem.children.map((secondLevelItem) => (
+              <MenuItemWithChildren
+                onCollapse={onCollapseChild}
+                onExpand={setExpandedChild}
+                key={secondLevelItem.title}
+                menuItem={secondLevelItem}
+                elevation={elevation + 1}
+                isMenuOpen={isMenuOpen}
+                isExpanded={expandedChild?.title === secondLevelItem.title}
+                openMenu={openMenu}
+              />
+            ))}
+          </Styled.MenuList>
+        </Collapse>
+      )}
+    </section>
+  );
+};

package/src/components/PageWithMenuLayout/MenuItemWithChildren/styles.ts

@@ -0,0 +1,179 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDownRounded';
+import MuiListItemIcon from '@mui/material/ListItemIcon';
+import MuiListItemText, { listItemTextClasses } from '@mui/material/ListItemText';
+import MuiMenuItem, { menuItemClasses } from '@mui/material/MenuItem';
+import MuiMenuList from '@mui/material/MenuList';
+import { rem } from 'polished';
+
+import { shouldNotForwardPropsWithKeys } from '../../../utils/shouldNotForwardPropsWithKeys';
+
+const iconMargin = rem(-2);
+
+type MenuItemProps = {
+  isHighlighted: boolean;
+  elevation?: number;
+  isMenuOpen: boolean;
+  isTitle: boolean;
+};
+export const MenuItem = styled(
+  MuiMenuItem,
+  shouldNotForwardPropsWithKeys<MenuItemProps>(['isHighlighted', 'elevation', 'isMenuOpen', 'isTitle']),
+)<MenuItemProps>(
+  ({ theme, elevation = 0, isHighlighted, isMenuOpen, isTitle, disabled }) => css`
+    display: flex;
+
+    align-items: center;
+
+    padding: ${theme.my.spacing.xxs};
+    padding-left: 0;
+    margin-top: ${elevation === 0 && isMenuOpen && isTitle && theme.my.spacing.sm};
+    margin-left: ${!isMenuOpen ? `calc(${theme.my.spacing.xxs} - ${iconMargin})` : 0};
+
+    font: ${isHighlighted ? theme.my.font.nav2 : theme.my.font.nav1};
+
+    color: ${theme.my.colors.text.white};
+
+    transition:
+      font-weight 0.3s,
+      margin 0.3s;
+
+    &:hover {
+      background-color: ${theme.my.colors.background.hover};
+    }
+
+    ${disabled &&
+    css`
+      &.${menuItemClasses.disabled} {
+        text-transform: uppercase;
+
+        pointer-events: initial;
+
+        background-color: initial;
+
+        opacity: 1;
+      }
+    `};
+  `,
+);
+
+export const ListItemIcon = styled(MuiListItemIcon)`
+  /* Icons from MUI have small paddings, so we need to artificially move them 2px ⬅︎ */
+  margin-left: ${iconMargin};
+
+  /* Increasing specificity */
+  &&& {
+    min-width: 1.75rem;
+  }
+
+  color: ${({ theme }) => theme.my.colors.text.white};
+`;
+
+type ListItemTextProps = {
+  isHighlighted: boolean;
+  isTitle: boolean;
+  elevation: number;
+};
+export const ListItemText = styled(
+  MuiListItemText,
+  shouldNotForwardPropsWithKeys<ListItemTextProps>(['isHighlighted', 'elevation', 'isTitle']),
+)<ListItemTextProps>(
+  ({ theme, isHighlighted, elevation, isTitle }) => css`
+    margin-top: 0;
+    margin-bottom: 0;
+
+    white-space: nowrap;
+
+    .${listItemTextClasses.primary} {
+      padding-left: calc(${Math.max(elevation - 1, 0)} * ${theme.my.spacing.xxs});
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      font: ${isHighlighted ? theme.my.font.nav2 : theme.my.font.nav1};
+
+      transition: font 0.3s;
+
+      ${isTitle &&
+      css`
+        font-weight: 800;
+      `};
+    }
+  `,
+);
+
+export const ListItem = styled.section`
+  display: flex;
+
+  width: 100%;
+
+  overflow: hidden;
+`;
+
+type ArrowDownIconProps = {
+  isExpanded: boolean;
+  isVisible: boolean;
+};
+export const ArrowDownIcon = styled(
+  ArrowDropDownIcon,
+  shouldNotForwardPropsWithKeys<ArrowDownIconProps>(['isExpanded', 'isVisible']),
+)<ArrowDownIconProps>(
+  ({ isExpanded, isVisible, theme }) => css`
+    color: ${isExpanded ? theme.my.colors.primitives.common.white : theme.my.colors.primitives.darkNavy[300]};
+
+    opacity: ${isVisible ? 1 : 0};
+
+    transform: rotate(${isExpanded ? 180 : 0}deg);
+
+    transition:
+      transform 0.3s,
+      color 0.3s,
+      opacity 0.3s;
+  `,
+);
+
+type MenuListProps = {
+  elevation: number;
+};
+export const MenuList = styled(MuiMenuList, shouldNotForwardPropsWithKeys<MenuListProps>(['elevation']))<MenuListProps>`
+  padding-top: 0;
+  padding-bottom: 0;
+
+  overflow: auto;
+
+  background-color: ${({ elevation, theme }) =>
+    [
+      theme.my.colors.primitives.darkNavy[900],
+      theme.my.colors.primitives.darkNavy[800],
+      theme.my.colors.primitives.darkNavy[700],
+    ][elevation]};
+  border-radius: ${({ elevation, theme }) => elevation === 1 && theme.my.radius.md};
+`;
+
+type ActiveMenuItemIndicatorProps = {
+  visible: boolean;
+  isMenuOpen: boolean;
+};
+export const ActiveMenuItemIndicator = styled(
+  'div',
+  shouldNotForwardPropsWithKeys<ActiveMenuItemIndicatorProps>(['visible', 'isMenuOpen']),
+)<ActiveMenuItemIndicatorProps>(
+  ({ theme, visible, isMenuOpen }) => css`
+    display: inline-block;
+
+    width: ${isMenuOpen ? theme.my.spacing.xxxs : 0};
+    height: 1rem;
+
+    margin-right: ${theme.my.spacing.xxs};
+
+    background-color: transparent;
+    border-radius: ${theme.my.radius.sm};
+
+    transition: 0.3s;
+    ${visible &&
+    css`
+      background-color: ${theme.my.colors.secondary.main};
+    `};
+  `,
+);