From 296c7ecb1ba4ad92684e64816d55cc2863014152 Mon Sep 17 00:00:00 2001
From: Gervwyk <gervwyk@gmail.com>
Date: Mon, 3 May 2021 14:22:02 +0200
Subject: [PATCH] fix(blocksAntd): Add square logo for mobile menu. Closes #545

---
 .../demo/examples/PageHeaderMenu.yaml         |  80 ++-
 .../demo/examples/PageSiderMenu.yaml          | 102 ++-
 .../blocks/PageHeaderMenu/PageHeaderMenu.js   |  22 +-
 .../blocks/PageHeaderMenu/PageHeaderMenu.json |   8 +
 .../src/blocks/PageSiderMenu/PageSiderMenu.js |  21 +-
 .../blocks/PageSiderMenu/PageSiderMenu.json   |   8 +
 .../PageHeaderMenu.mock.test.js.snap          | 208 ++++++
 .../__snapshots__/PageHeaderMenu.test.js.snap |   8 +
 .../PageSiderMenu.mock.test.js.snap           | 180 ++++++
 .../__snapshots__/PageSiderMenu.test.js.snap  | 608 +++++++++++++++++-
 10 files changed, 1170 insertions(+), 75 deletions(-)

diff --git a/packages/blocks/blocksAntd/demo/examples/PageHeaderMenu.yaml b/packages/blocks/blocksAntd/demo/examples/PageHeaderMenu.yaml
index e8e2f0bf6..b3dd9293a 100644
--- a/packages/blocks/blocksAntd/demo/examples/PageHeaderMenu.yaml
+++ b/packages/blocks/blocksAntd/demo/examples/PageHeaderMenu.yaml
@@ -1,6 +1,6 @@
 - id: default
   type: PageHeaderMenu
-- id: "properties.menu"
+- id: 'properties.menu'
   type: PageHeaderMenu
   properties:
     menu:
@@ -17,11 +17,11 @@
           properties:
             icon: ExclamationCircleOutlined
             title: Alert
-- id: "properties.logo.src"
+- id: 'properties.logo.src'
   type: PageHeaderMenu
   properties:
     logo:
-      src: "https://lowdefy.com/logos/name_250.png"
+      src: 'https://lowdefy.com/logos/name_250.png'
     menu:
       links:
         - id: Introduction
@@ -36,11 +36,11 @@
           properties:
             icon: ExclamationCircleOutlined
             title: Alert
-- id: "properties.logo.alt"
+- id: 'properties.logo.alt'
   type: PageHeaderMenu
   properties:
     logo:
-      alt: "Header logo alt text"
+      alt: 'Header logo alt text'
     menu:
       links:
         - id: Introduction
@@ -55,17 +55,55 @@
           properties:
             icon: ExclamationCircleOutlined
             title: Alert
-- id: "properties.logo.style"
+- id: 'properties.logo.style'
   type: PageHeaderMenu
   properties:
     logo:
-      style: 
+      style:
         border: 5px solid blue
-- id: "properties.header.color"
+- id: 'properties.logo.srcset'
+  type: PageHeaderMenu
+  properties:
+    logo:
+      srcset: 'https://lowdefy.com/logos/name_250.png 250w, https://lowdefy.com/logos/name_450.png 450w'
+    menu:
+      links:
+        - id: Introduction
+          type: MenuLink
+          pageId: introduction
+          properties:
+            icon: RocketOutlined
+            title: Introduction
+        - id: alert
+          type: MenuLink
+          pageId: Alert
+          properties:
+            icon: ExclamationCircleOutlined
+            title: Alert
+- id: 'properties.logo.size'
+  type: PageHeaderMenu
+  properties:
+    logo:
+      srcset: '(max-width: 767px) 40px, 768px'
+    menu:
+      links:
+        - id: Introduction
+          type: MenuLink
+          pageId: introduction
+          properties:
+            icon: RocketOutlined
+            title: Introduction
+        - id: alert
+          type: MenuLink
+          pageId: Alert
+          properties:
+            icon: ExclamationCircleOutlined
+            title: Alert
+- id: 'properties.header.color'
   type: PageHeaderMenu
   properties:
     header:
-      color: "#3f51b5"
+      color: '#3f51b5'
     menu:
       links:
         - id: Introduction
@@ -80,7 +118,7 @@
           properties:
             icon: ExclamationCircleOutlined
             title: Alert
-- id: "properties.header.theme: light"
+- id: 'properties.header.theme: light'
   type: PageHeaderMenu
   properties:
     header:
@@ -99,42 +137,42 @@
           properties:
             icon: ExclamationCircleOutlined
             title: Alert
-- id: "properties.breadcrumb.list"
+- id: 'properties.breadcrumb.list'
   type: PageHeaderMenu
   properties:
     breadcrumb:
-      list: 
+      list:
         - Link one
         - Link two
-- id: "properties.footer.style"
+- id: 'properties.footer.style'
   type: PageHeaderMenu
   properties:
     footer:
-      style: 
+      style:
         border: 5px solid blue
   areas:
     footer:
       blocks: []
-- id: "properties.content.style"
+- id: 'properties.content.style'
   type: PageHeaderMenu
   properties:
     content:
-      style: 
+      style:
         border: 5px solid blue
   areas:
     content:
       blocks: []
-- id: "properties.header.style"
+- id: 'properties.header.style'
   type: PageHeaderMenu
   properties:
     header:
-      style: 
+      style:
         border: 5px solid blue
   areas:
     header:
       blocks: []
-- id: "properties.style"
+- id: 'properties.style'
   type: PageHeaderMenu
   properties:
-    style: 
-      border: 5px solid blue
\ No newline at end of file
+    style:
+      border: 5px solid blue
diff --git a/packages/blocks/blocksAntd/demo/examples/PageSiderMenu.yaml b/packages/blocks/blocksAntd/demo/examples/PageSiderMenu.yaml
index e0e1c9f31..2af669be2 100644
--- a/packages/blocks/blocksAntd/demo/examples/PageSiderMenu.yaml
+++ b/packages/blocks/blocksAntd/demo/examples/PageSiderMenu.yaml
@@ -1,6 +1,6 @@
 - id: default
   type: PageSiderMenu
-- id: "properties.menu"
+- id: 'properties.menu'
   type: PageSiderMenu
   properties:
     menu:
@@ -17,11 +17,11 @@
           properties:
             icon: ExclamationCircleOutlined
             title: Alert
-- id: "properties.logo.src"
+- id: 'properties.logo.src'
   type: PageHeaderMenu
   properties:
     logo:
-      src: "https://lowdefy.com/logos/name_250.png"
+      src: 'https://lowdefy.com/logos/name_250.png'
     menu:
       links:
         - id: Introduction
@@ -36,11 +36,11 @@
           properties:
             icon: ExclamationCircleOutlined
             title: Alert
-- id: "properties.logo.alt"
+- id: 'properties.logo.alt'
   type: PageHeaderMenu
   properties:
     logo:
-      alt: "Header logo alt text"
+      alt: 'Header logo alt text'
     menu:
       links:
         - id: Introduction
@@ -55,17 +55,55 @@
           properties:
             icon: ExclamationCircleOutlined
             title: Alert
-- id: "properties.logo.style"
+- id: 'properties.logo.style'
   type: PageHeaderMenu
   properties:
     logo:
-      style: 
+      style:
         border: 5px solid blue
-- id: "properties.header.color"
+- id: 'properties.logo.srcset'
+  type: PageHeaderMenu
+  properties:
+    logo:
+      srcset: 'https://lowdefy.com/logos/name_250.png 250w, https://lowdefy.com/logos/name_450.png 450w'
+    menu:
+      links:
+        - id: Introduction
+          type: MenuLink
+          pageId: introduction
+          properties:
+            icon: RocketOutlined
+            title: Introduction
+        - id: alert
+          type: MenuLink
+          pageId: Alert
+          properties:
+            icon: ExclamationCircleOutlined
+            title: Alert
+- id: 'properties.logo.size'
+  type: PageHeaderMenu
+  properties:
+    logo:
+      srcset: '(max-width: 767px) 40px, 768px'
+    menu:
+      links:
+        - id: Introduction
+          type: MenuLink
+          pageId: introduction
+          properties:
+            icon: RocketOutlined
+            title: Introduction
+        - id: alert
+          type: MenuLink
+          pageId: Alert
+          properties:
+            icon: ExclamationCircleOutlined
+            title: Alert
+- id: 'properties.header.color'
   type: PageSiderMenu
   properties:
     header:
-      color: "#3f51b5"
+      color: '#3f51b5'
     menu:
       links:
         - id: Introduction
@@ -80,11 +118,11 @@
           properties:
             icon: ExclamationCircleOutlined
             title: Alert
-- id: "properties.sider.color"
+- id: 'properties.sider.color'
   type: PageSiderMenu
   properties:
     sider:
-      color: "#faf7a5"
+      color: '#faf7a5'
     menu:
       links:
         - id: Introduction
@@ -99,13 +137,13 @@
           properties:
             icon: ExclamationCircleOutlined
             title: Alert
-- id: "properties.menu.selectedColor"
+- id: 'properties.menu.selectedColor'
   type: PageSiderMenu
   properties:
     sider:
-      color: "#faf7a5"
+      color: '#faf7a5'
     menu:
-      selectedColor: "#a30331"
+      selectedColor: '#a30331'
       links:
         - id: Introduction
           type: MenuLink
@@ -119,7 +157,7 @@
           properties:
             icon: ExclamationCircleOutlined
             title: Alert
-- id: "properties.header.theme: light"
+- id: 'properties.header.theme: light'
   type: PageSiderMenu
   properties:
     header:
@@ -138,41 +176,41 @@
           properties:
             icon: ExclamationCircleOutlined
             title: Alert
-- id: "properties.breadcrumb.list"
+- id: 'properties.breadcrumb.list'
   type: PageHeaderMenu
   properties:
     breadcrumb:
-      list: 
+      list:
         - Link one
         - Link two
-- id: "properties.footer.style"
+- id: 'properties.footer.style'
   type: PageHeaderMenu
   properties:
     footer:
-      style: 
+      style:
         border: 5px solid blue
   areas:
     footer:
       blocks: []
-- id: "properties.content.style"
+- id: 'properties.content.style'
   type: PageHeaderMenu
   properties:
     content:
-      style: 
+      style:
         border: 5px solid blue
   areas:
     content:
       blocks: []
-- id: "properties.sider.style"
+- id: 'properties.sider.style'
   type: PageHeaderMenu
   properties:
     sider:
-      style: 
+      style:
         border: 5px solid blue
   areas:
     sider:
       blocks: []
-- id: "properties.sider.initialCollapsed"
+- id: 'properties.sider.initialCollapsed'
   type: PageHeaderMenu
   properties:
     sider:
@@ -180,12 +218,12 @@
   areas:
     sider:
       blocks: []
-- id: "properties.sider.theme: dark"
+- id: 'properties.sider.theme: dark'
   type: PageHeaderMenu
   properties:
     sider:
       theme: dark
-- id: "properties.toggleSiderButton.type"
+- id: 'properties.toggleSiderButton.type'
   type: PageHeaderMenu
   properties:
     toggleSiderButton:
@@ -193,7 +231,7 @@
   areas:
     sider:
       blocks: []
-- id: "properties.toggleSiderButton.hide"
+- id: 'properties.toggleSiderButton.hide'
   type: PageHeaderMenu
   properties:
     toggleSiderButton:
@@ -201,17 +239,17 @@
   areas:
     sider:
       blocks: []
-- id: "properties.header.style"
+- id: 'properties.header.style'
   type: PageHeaderMenu
   properties:
     header:
-      style: 
+      style:
         border: 5px solid blue
   areas:
     header:
       blocks: []
-- id: "properties.style"
+- id: 'properties.style'
   type: PageHeaderMenu
   properties:
-    style: 
-      border: 5px solid blue
\ No newline at end of file
+    style:
+      border: 5px solid blue
diff --git a/packages/blocks/blocksAntd/src/blocks/PageHeaderMenu/PageHeaderMenu.js b/packages/blocks/blocksAntd/src/blocks/PageHeaderMenu/PageHeaderMenu.js
index 05aa927d0..0bccbe047 100644
--- a/packages/blocks/blocksAntd/src/blocks/PageHeaderMenu/PageHeaderMenu.js
+++ b/packages/blocks/blocksAntd/src/blocks/PageHeaderMenu/PageHeaderMenu.js
@@ -56,12 +56,10 @@ const PageHeaderMenu = ({
       justifyContent: 'flex-end',
     },
     logo: {
-      width: 130,
       margin: '0px 30px',
       flex: '0 1 auto',
       sm: { margin: '0 10px' },
       md: { margin: '0 15px' },
-      lg: { margin: '0 30px' },
     },
     lgMenu: {
       flex: '1 1 auto',
@@ -124,8 +122,28 @@ const PageHeaderMenu = ({
                             ? '/public/logo-light-theme.png'
                             : '/public/logo-dark-theme.png')
                         }
+                        srcset={
+                          (properties.logo && (properties.logo.srcset || properties.logo.src)) ||
+                          (get(properties, 'header.theme') === 'light'
+                            ? '/public/logo-square-light-theme.png 40w, /public/logo-light-theme.png 768w'
+                            : '/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w')
+                        }
+                        sizes={
+                          (properties.logo && properties.logo.sizes) ||
+                          '(max-width: 767px) 40px, 768px'
+                        }
                         alt={(properties.logo && properties.logo.alt) || 'Lowdefy'}
                         className={methods.makeCssClass([
+                          {
+                            width: 130,
+                            sm: {
+                              width:
+                                properties.logo && properties.logo.src && !properties.logo.srcset
+                                  ? 130
+                                  : 40,
+                            },
+                            md: { width: 130 },
+                          },
                           styles.logo,
                           properties.logo && properties.logo.style,
                         ])}
diff --git a/packages/blocks/blocksAntd/src/blocks/PageHeaderMenu/PageHeaderMenu.json b/packages/blocks/blocksAntd/src/blocks/PageHeaderMenu/PageHeaderMenu.json
index 136253261..9b7781ac2 100644
--- a/packages/blocks/blocksAntd/src/blocks/PageHeaderMenu/PageHeaderMenu.json
+++ b/packages/blocks/blocksAntd/src/blocks/PageHeaderMenu/PageHeaderMenu.json
@@ -34,6 +34,14 @@
               "type": "string",
               "description": "Header logo source url."
             },
+            "srcset": {
+              "type": "string",
+              "description": "Header logo srcset for logo img element."
+            },
+            "size": {
+              "type": "string",
+              "description": "Header logo size for logo img element."
+            },
             "alt": {
               "type": "string",
               "default": "Lowdefy",
diff --git a/packages/blocks/blocksAntd/src/blocks/PageSiderMenu/PageSiderMenu.js b/packages/blocks/blocksAntd/src/blocks/PageSiderMenu/PageSiderMenu.js
index 171161b80..5c359296e 100644
--- a/packages/blocks/blocksAntd/src/blocks/PageSiderMenu/PageSiderMenu.js
+++ b/packages/blocks/blocksAntd/src/blocks/PageSiderMenu/PageSiderMenu.js
@@ -71,7 +71,6 @@ const PageSiderMenu = ({
       justifyContent: 'flex-end',
     },
     logo: {
-      width: 130,
       margin: '0 30px 0 0',
       flex: '0 1 auto',
       sm: { margin: '0 10px 0 0' },
@@ -169,8 +168,28 @@ const PageSiderMenu = ({
                             ? '/public/logo-light-theme.png'
                             : '/public/logo-dark-theme.png')
                         }
+                        srcset={
+                          (properties.logo && (properties.logo.srcset || properties.logo.src)) ||
+                          (get(properties, 'header.theme') === 'light'
+                            ? '/public/logo-square-light-theme.png 40w, /public/logo-light-theme.png 768w'
+                            : '/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w')
+                        }
+                        sizes={
+                          (properties.logo && properties.logo.sizes) ||
+                          '(max-width: 767px) 40px, 768px'
+                        }
                         alt={(properties.logo && properties.logo.alt) || 'Lowdefy'}
                         className={methods.makeCssClass([
+                          {
+                            width: 130,
+                            sm: {
+                              width:
+                                properties.logo && properties.logo.src && !properties.logo.srcset
+                                  ? 130
+                                  : 40,
+                            },
+                            md: { width: 130 },
+                          },
                           styles.logo,
                           properties.logo && properties.logo.style,
                         ])}
diff --git a/packages/blocks/blocksAntd/src/blocks/PageSiderMenu/PageSiderMenu.json b/packages/blocks/blocksAntd/src/blocks/PageSiderMenu/PageSiderMenu.json
index 0872bdad1..6d3fa8e17 100644
--- a/packages/blocks/blocksAntd/src/blocks/PageSiderMenu/PageSiderMenu.json
+++ b/packages/blocks/blocksAntd/src/blocks/PageSiderMenu/PageSiderMenu.json
@@ -44,6 +44,14 @@
               "type": "string",
               "description": "Header logo source url."
             },
+            "srcset": {
+              "type": "string",
+              "description": "Header logo srcset for logo img element."
+            },
+            "size": {
+              "type": "string",
+              "description": "Header logo size for logo img element."
+            },
             "alt": {
               "type": "string",
               "default": "Lowdefy",
diff --git a/packages/blocks/blocksAntd/tests/__snapshots__/PageHeaderMenu.mock.test.js.snap b/packages/blocks/blocksAntd/tests/__snapshots__/PageHeaderMenu.mock.test.js.snap
index 74ccffaf7..9d41e0cba 100644
--- a/packages/blocks/blocksAntd/tests/__snapshots__/PageHeaderMenu.mock.test.js.snap
+++ b/packages/blocks/blocksAntd/tests/__snapshots__/PageHeaderMenu.mock.test.js.snap
@@ -871,6 +871,110 @@ Array [
 ]
 `;
 
+exports[`Mock render - properties.logo.size - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "children": <React.Fragment>
+        <HeaderBlock
+          blockId="properties.logo.size_header"
+          content={
+            Object {
+              "content": [Function],
+            }
+          }
+          events={Object {}}
+          list={Array []}
+          menus={Array []}
+          methods={
+            Object {
+              "makeCssClass": [Function],
+              "registerEvent": [Function],
+              "registerMethod": [Function],
+              "triggerEvent": [Function],
+            }
+          }
+          properties={
+            Object {
+              "style": Object {
+                "alignItems": "center",
+                "display": "flex",
+                "lg": Object {
+                  "padding": "0 46px",
+                },
+                "md": Object {
+                  "padding": "0 30px",
+                },
+                "padding": "0 46px",
+                "sm": Object {
+                  "padding": "0 15px",
+                },
+              },
+            }
+          }
+          required={false}
+          user={Object {}}
+          validation={
+            Object {
+              "errors": Array [],
+              "status": null,
+              "warnings": Array [],
+            }
+          }
+        />
+        <ContentBlock
+          blockId="properties.logo.size_content"
+          content={
+            Object {
+              "content": [Function],
+            }
+          }
+          events={Object {}}
+          list={Array []}
+          menus={Array []}
+          methods={
+            Object {
+              "makeCssClass": [Function],
+              "registerEvent": [Function],
+              "registerMethod": [Function],
+              "triggerEvent": [Function],
+            }
+          }
+          properties={
+            Object {
+              "style": Object {
+                "lg": Object {
+                  "padding": "0 40px 40px 40px",
+                },
+                "md": Object {
+                  "padding": "0 20px 20px 20px",
+                },
+                "padding": "0 40px 40px 40px",
+                "sm": Object {
+                  "padding": "0 10px 10px 10px",
+                },
+              },
+            }
+          }
+          required={false}
+          user={Object {}}
+          validation={
+            Object {
+              "errors": Array [],
+              "status": null,
+              "warnings": Array [],
+            }
+          }
+        />
+      </React.Fragment>,
+      "className": "css-vooagt",
+      "id": "properties.logo.size",
+    },
+    Object {},
+  ],
+]
+`;
+
 exports[`Mock render - properties.logo.src - value[0] - default 1`] = `
 Array [
   Array [
@@ -975,6 +1079,110 @@ Array [
 ]
 `;
 
+exports[`Mock render - properties.logo.srcset - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "children": <React.Fragment>
+        <HeaderBlock
+          blockId="properties.logo.srcset_header"
+          content={
+            Object {
+              "content": [Function],
+            }
+          }
+          events={Object {}}
+          list={Array []}
+          menus={Array []}
+          methods={
+            Object {
+              "makeCssClass": [Function],
+              "registerEvent": [Function],
+              "registerMethod": [Function],
+              "triggerEvent": [Function],
+            }
+          }
+          properties={
+            Object {
+              "style": Object {
+                "alignItems": "center",
+                "display": "flex",
+                "lg": Object {
+                  "padding": "0 46px",
+                },
+                "md": Object {
+                  "padding": "0 30px",
+                },
+                "padding": "0 46px",
+                "sm": Object {
+                  "padding": "0 15px",
+                },
+              },
+            }
+          }
+          required={false}
+          user={Object {}}
+          validation={
+            Object {
+              "errors": Array [],
+              "status": null,
+              "warnings": Array [],
+            }
+          }
+        />
+        <ContentBlock
+          blockId="properties.logo.srcset_content"
+          content={
+            Object {
+              "content": [Function],
+            }
+          }
+          events={Object {}}
+          list={Array []}
+          menus={Array []}
+          methods={
+            Object {
+              "makeCssClass": [Function],
+              "registerEvent": [Function],
+              "registerMethod": [Function],
+              "triggerEvent": [Function],
+            }
+          }
+          properties={
+            Object {
+              "style": Object {
+                "lg": Object {
+                  "padding": "0 40px 40px 40px",
+                },
+                "md": Object {
+                  "padding": "0 20px 20px 20px",
+                },
+                "padding": "0 40px 40px 40px",
+                "sm": Object {
+                  "padding": "0 10px 10px 10px",
+                },
+              },
+            }
+          }
+          required={false}
+          user={Object {}}
+          validation={
+            Object {
+              "errors": Array [],
+              "status": null,
+              "warnings": Array [],
+            }
+          }
+        />
+      </React.Fragment>,
+      "className": "css-vooagt",
+      "id": "properties.logo.srcset",
+    },
+    Object {},
+  ],
+]
+`;
+
 exports[`Mock render - properties.logo.style - value[0] - default 1`] = `
 Array [
   Array [
diff --git a/packages/blocks/blocksAntd/tests/__snapshots__/PageHeaderMenu.test.js.snap b/packages/blocks/blocksAntd/tests/__snapshots__/PageHeaderMenu.test.js.snap
index 49ab7884c..e2d969a3b 100644
--- a/packages/blocks/blocksAntd/tests/__snapshots__/PageHeaderMenu.test.js.snap
+++ b/packages/blocks/blocksAntd/tests/__snapshots__/PageHeaderMenu.test.js.snap
@@ -32,10 +32,18 @@ exports[`Test Schema properties.logo.alt 1`] = `true`;
 
 exports[`Test Schema properties.logo.alt 2`] = `null`;
 
+exports[`Test Schema properties.logo.size 1`] = `true`;
+
+exports[`Test Schema properties.logo.size 2`] = `null`;
+
 exports[`Test Schema properties.logo.src 1`] = `true`;
 
 exports[`Test Schema properties.logo.src 2`] = `null`;
 
+exports[`Test Schema properties.logo.srcset 1`] = `true`;
+
+exports[`Test Schema properties.logo.srcset 2`] = `null`;
+
 exports[`Test Schema properties.logo.style 1`] = `true`;
 
 exports[`Test Schema properties.logo.style 2`] = `null`;
diff --git a/packages/blocks/blocksAntd/tests/__snapshots__/PageSiderMenu.mock.test.js.snap b/packages/blocks/blocksAntd/tests/__snapshots__/PageSiderMenu.mock.test.js.snap
index 19f69071c..893dc130d 100644
--- a/packages/blocks/blocksAntd/tests/__snapshots__/PageSiderMenu.mock.test.js.snap
+++ b/packages/blocks/blocksAntd/tests/__snapshots__/PageSiderMenu.mock.test.js.snap
@@ -723,6 +723,96 @@ Array [
 ]
 `;
 
+exports[`Mock render - properties.logo.size - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "children": <React.Fragment>
+        <HeaderBlock
+          blockId="properties.logo.size_header"
+          content={
+            Object {
+              "content": [Function],
+            }
+          }
+          events={Object {}}
+          list={Array []}
+          menus={Array []}
+          methods={
+            Object {
+              "makeCssClass": [Function],
+              "registerEvent": [Function],
+              "registerMethod": [Function],
+              "triggerEvent": [Function],
+            }
+          }
+          properties={
+            Object {
+              "style": Object {
+                "alignItems": "center",
+                "display": "flex",
+                "flexDirection": "row-reverse",
+                "lg": Object {
+                  "padding": "0 46px",
+                },
+                "md": Object {
+                  "padding": "0 30px",
+                },
+                "padding": "0 46px",
+                "sm": Object {
+                  "padding": "0 15px",
+                },
+              },
+            }
+          }
+          required={false}
+          user={Object {}}
+          validation={
+            Object {
+              "errors": Array [],
+              "status": null,
+              "warnings": Array [],
+            }
+          }
+        />
+        <LayoutBlock
+          blockId="properties.logo.size_layout"
+          content={
+            Object {
+              "content": [Function],
+            }
+          }
+          events={Object {}}
+          list={Array []}
+          menus={Array []}
+          methods={
+            Object {
+              "makeCssClass": [Function],
+              "registerEvent": [Function],
+              "registerMethod": [Function],
+              "triggerEvent": [Function],
+            }
+          }
+          properties={Object {}}
+          required={false}
+          user={Object {}}
+          validation={
+            Object {
+              "errors": Array [],
+              "status": null,
+              "warnings": Array [],
+            }
+          }
+        />
+      </React.Fragment>,
+      "className": "css-vooagt",
+      "id": "properties.logo.size",
+    },
+    Object {},
+  ],
+]
+`;
+
 exports[`Mock render - properties.logo.src - value[0] - default 1`] = `
 Array [
   Array [
@@ -813,6 +903,96 @@ Array [
 ]
 `;
 
+exports[`Mock render - properties.logo.srcset - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "children": <React.Fragment>
+        <HeaderBlock
+          blockId="properties.logo.srcset_header"
+          content={
+            Object {
+              "content": [Function],
+            }
+          }
+          events={Object {}}
+          list={Array []}
+          menus={Array []}
+          methods={
+            Object {
+              "makeCssClass": [Function],
+              "registerEvent": [Function],
+              "registerMethod": [Function],
+              "triggerEvent": [Function],
+            }
+          }
+          properties={
+            Object {
+              "style": Object {
+                "alignItems": "center",
+                "display": "flex",
+                "flexDirection": "row-reverse",
+                "lg": Object {
+                  "padding": "0 46px",
+                },
+                "md": Object {
+                  "padding": "0 30px",
+                },
+                "padding": "0 46px",
+                "sm": Object {
+                  "padding": "0 15px",
+                },
+              },
+            }
+          }
+          required={false}
+          user={Object {}}
+          validation={
+            Object {
+              "errors": Array [],
+              "status": null,
+              "warnings": Array [],
+            }
+          }
+        />
+        <LayoutBlock
+          blockId="properties.logo.srcset_layout"
+          content={
+            Object {
+              "content": [Function],
+            }
+          }
+          events={Object {}}
+          list={Array []}
+          menus={Array []}
+          methods={
+            Object {
+              "makeCssClass": [Function],
+              "registerEvent": [Function],
+              "registerMethod": [Function],
+              "triggerEvent": [Function],
+            }
+          }
+          properties={Object {}}
+          required={false}
+          user={Object {}}
+          validation={
+            Object {
+              "errors": Array [],
+              "status": null,
+              "warnings": Array [],
+            }
+          }
+        />
+      </React.Fragment>,
+      "className": "css-vooagt",
+      "id": "properties.logo.srcset",
+    },
+    Object {},
+  ],
+]
+`;
+
 exports[`Mock render - properties.logo.style - value[0] - default 1`] = `
 Array [
   Array [
diff --git a/packages/blocks/blocksAntd/tests/__snapshots__/PageSiderMenu.test.js.snap b/packages/blocks/blocksAntd/tests/__snapshots__/PageSiderMenu.test.js.snap
index bf1c6bd54..2bc09c58b 100644
--- a/packages/blocks/blocksAntd/tests/__snapshots__/PageSiderMenu.test.js.snap
+++ b/packages/blocks/blocksAntd/tests/__snapshots__/PageSiderMenu.test.js.snap
@@ -55,8 +55,10 @@ exports[`Render default - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -228,8 +230,10 @@ exports[`Render properties.breadcrumb.list - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -435,8 +439,10 @@ exports[`Render properties.content.style - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -608,8 +614,10 @@ exports[`Render properties.footer.style - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -796,8 +804,10 @@ exports[`Render properties.header.color - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -1066,8 +1076,10 @@ exports[`Render properties.header.style - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -1239,8 +1251,10 @@ exports[`Render properties.header.theme: light - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-light-theme.png"
+        srcset="/public/logo-square-light-theme.png 40w, /public/logo-light-theme.png 768w"
       />
     </a>
   </header>
@@ -1499,8 +1513,10 @@ exports[`Render properties.logo.alt - value[0] 1`] = `
     >
       <img
         alt="Header logo alt text"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -1704,6 +1720,268 @@ exports[`Render properties.logo.alt - value[0] 1`] = `
 </section>
 `;
 
+exports[`Render properties.logo.size - value[0] 1`] = `
+<section
+  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
+  id="properties.logo.size"
+>
+  <header
+    className="ant-layout-header {\\"style\\":[{\\"backgroundColor\\":false},null,{\\"display\\":\\"flex\\",\\"alignItems\\":\\"center\\",\\"padding\\":\\"0 46px\\",\\"sm\\":{\\"padding\\":\\"0 15px\\"},\\"md\\":{\\"padding\\":\\"0 30px\\"},\\"lg\\":{\\"padding\\":\\"0 46px\\"},\\"flexDirection\\":\\"row-reverse\\"}]} hide-on-print"
+    id="properties.logo.size_header"
+  >
+    <div
+      className="{\\"style\\":{\\"alignItems\\":\\"center\\",\\"flex\\":\\"1 1 auto\\",\\"display\\":\\"flex\\",\\"justifyContent\\":\\"flex-end\\"}}"
+    >
+      <div
+        className="{\\"style\\":[{\\"display\\":\\"block\\",\\"lg\\":{\\"display\\":\\"none\\"}},{\\"paddingLeft\\":\\"1rem\\"}]}"
+      >
+        <div
+          id="properties.logo.size_mobile_menu"
+        >
+          <button
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
+            id="properties.logo.size_mobile_menu_button"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              aria-label="loading-3-quarters"
+              className="anticon anticon-loading-3-quarters anticon-spin {\\"style\\":[{},null]}"
+              id="properties.logo.size_mobile_menu_button_icon"
+              required={false}
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="loading-3-quarters"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <a
+      href="/undefined"
+      onClick={[Function]}
+    >
+      <img
+        alt="Lowdefy"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
+        src="/public/logo-dark-theme.png"
+        srcset="(max-width: 767px) 40px, 768px"
+      />
+    </a>
+  </header>
+  <section
+    className="ant-layout ant-layout-has-sider {}"
+    id="properties.logo.size_layout"
+  >
+    <aside
+      className="{\\"style\\":[{\\"overflow\\":\\"auto\\"},{\\"display\\":\\"none\\",\\"lg\\":{\\"display\\":\\"block\\"}}]} hide-on-print ant-layout-sider ant-layout-sider-light"
+      id="properties.logo.size_sider"
+      style={
+        Object {
+          "flex": "0 0 200px",
+          "maxWidth": "200px",
+          "minWidth": "200px",
+          "width": "200px",
+        }
+      }
+    >
+      <div
+        className="ant-layout-sider-children"
+      >
+        <div
+          style={
+            Object {
+              "display": "flex",
+              "flexDirection": "column",
+              "height": "100%",
+            }
+          }
+        >
+          <ul
+            className="ant-menu {\\"style\\":[{\\"lineHeight\\":\\"64px\\",\\"display\\":false},null,null,null,{\\"display\\":\\"none\\",\\"lg\\":{\\"display\\":\\"block\\"}}]} ant-menu-light ant-menu-root ant-menu-inline"
+            id="properties.logo.size_menu"
+            onMouseEnter={[Function]}
+            onTransitionEnd={[Function]}
+            role="menu"
+            style={Object {}}
+          >
+            <li
+              className="ant-menu-item"
+              onClick={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              role="menuitem"
+              style={
+                Object {
+                  "paddingLeft": 24,
+                }
+              }
+            >
+              <span
+                aria-label="loading-3-quarters"
+                className="anticon anticon-loading-3-quarters anticon-spin {\\"style\\":[{},null]}"
+                id="Introduction_icon"
+                required={false}
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="loading-3-quarters"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                >
+                  <path
+                    d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+                  />
+                </svg>
+              </span>
+              <span>
+                <a
+                  className="{\\"style\\":[null]}"
+                  href="/introduction"
+                  onClick={[Function]}
+                >
+                  Introduction
+                </a>
+              </span>
+            </li>
+            <li
+              className="ant-menu-item"
+              onClick={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              role="menuitem"
+              style={
+                Object {
+                  "paddingLeft": 24,
+                }
+              }
+            >
+              <span
+                aria-label="loading-3-quarters"
+                className="anticon anticon-loading-3-quarters anticon-spin {\\"style\\":[{},null]}"
+                id="alert_icon"
+                required={false}
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="loading-3-quarters"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                >
+                  <path
+                    d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+                  />
+                </svg>
+              </span>
+              <span>
+                <a
+                  className="{\\"style\\":[null]}"
+                  href="/Alert"
+                  onClick={[Function]}
+                >
+                  Alert
+                </a>
+              </span>
+            </li>
+          </ul>
+          <div
+            style={
+              Object {
+                "flex": "1 0 auto",
+              }
+            }
+          />
+          <div
+            className="{}"
+            id="properties.logo.size_toggle_sider_affix"
+          >
+            <div
+              className=""
+            >
+              <div
+                style={
+                  Object {
+                    "background": "white",
+                  }
+                }
+              >
+                <button
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
+                  id="properties.logo.size_toggle_sider"
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span
+                    aria-label="loading-3-quarters"
+                    className="anticon anticon-loading-3-quarters anticon-spin {\\"style\\":[{},null]}"
+                    id="properties.logo.size_toggle_sider_icon"
+                    required={false}
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="loading-3-quarters"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="0 0 1024 1024"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </aside>
+    <main
+      className="ant-layout-content {\\"style\\":{\\"padding\\":\\"0 40px 40px 40px\\",\\"sm\\":{\\"padding\\":\\"0 10px 10px 10px\\"},\\"md\\":{\\"padding\\":\\"0 20px 20px 20px\\"},\\"lg\\":{\\"padding\\":\\"0 40px 40px 40px\\"}}}"
+      id="properties.logo.size_content"
+    >
+      <div
+        className="{\\"style\\":{\\"padding\\":\\"20px 0\\",\\"sm\\":{\\"padding\\":\\"5px 0\\"},\\"md\\":{\\"padding\\":\\"10px 0\\"}}}"
+      />
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>
+    </main>
+  </section>
+</section>
+`;
+
 exports[`Render properties.logo.src - value[0] 1`] = `
 <section
   className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
@@ -1759,8 +2037,10 @@ exports[`Render properties.logo.src - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":130},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="https://lowdefy.com/logos/name_250.png"
+        srcset="https://lowdefy.com/logos/name_250.png"
       />
     </a>
   </header>
@@ -1964,6 +2244,268 @@ exports[`Render properties.logo.src - value[0] 1`] = `
 </section>
 `;
 
+exports[`Render properties.logo.srcset - value[0] 1`] = `
+<section
+  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
+  id="properties.logo.srcset"
+>
+  <header
+    className="ant-layout-header {\\"style\\":[{\\"backgroundColor\\":false},null,{\\"display\\":\\"flex\\",\\"alignItems\\":\\"center\\",\\"padding\\":\\"0 46px\\",\\"sm\\":{\\"padding\\":\\"0 15px\\"},\\"md\\":{\\"padding\\":\\"0 30px\\"},\\"lg\\":{\\"padding\\":\\"0 46px\\"},\\"flexDirection\\":\\"row-reverse\\"}]} hide-on-print"
+    id="properties.logo.srcset_header"
+  >
+    <div
+      className="{\\"style\\":{\\"alignItems\\":\\"center\\",\\"flex\\":\\"1 1 auto\\",\\"display\\":\\"flex\\",\\"justifyContent\\":\\"flex-end\\"}}"
+    >
+      <div
+        className="{\\"style\\":[{\\"display\\":\\"block\\",\\"lg\\":{\\"display\\":\\"none\\"}},{\\"paddingLeft\\":\\"1rem\\"}]}"
+      >
+        <div
+          id="properties.logo.srcset_mobile_menu"
+        >
+          <button
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
+            id="properties.logo.srcset_mobile_menu_button"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              aria-label="loading-3-quarters"
+              className="anticon anticon-loading-3-quarters anticon-spin {\\"style\\":[{},null]}"
+              id="properties.logo.srcset_mobile_menu_button_icon"
+              required={false}
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="loading-3-quarters"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <a
+      href="/undefined"
+      onClick={[Function]}
+    >
+      <img
+        alt="Lowdefy"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
+        src="/public/logo-dark-theme.png"
+        srcset="https://lowdefy.com/logos/name_250.png 250w, https://lowdefy.com/logos/name_450.png 450w"
+      />
+    </a>
+  </header>
+  <section
+    className="ant-layout ant-layout-has-sider {}"
+    id="properties.logo.srcset_layout"
+  >
+    <aside
+      className="{\\"style\\":[{\\"overflow\\":\\"auto\\"},{\\"display\\":\\"none\\",\\"lg\\":{\\"display\\":\\"block\\"}}]} hide-on-print ant-layout-sider ant-layout-sider-light"
+      id="properties.logo.srcset_sider"
+      style={
+        Object {
+          "flex": "0 0 200px",
+          "maxWidth": "200px",
+          "minWidth": "200px",
+          "width": "200px",
+        }
+      }
+    >
+      <div
+        className="ant-layout-sider-children"
+      >
+        <div
+          style={
+            Object {
+              "display": "flex",
+              "flexDirection": "column",
+              "height": "100%",
+            }
+          }
+        >
+          <ul
+            className="ant-menu {\\"style\\":[{\\"lineHeight\\":\\"64px\\",\\"display\\":false},null,null,null,{\\"display\\":\\"none\\",\\"lg\\":{\\"display\\":\\"block\\"}}]} ant-menu-light ant-menu-root ant-menu-inline"
+            id="properties.logo.srcset_menu"
+            onMouseEnter={[Function]}
+            onTransitionEnd={[Function]}
+            role="menu"
+            style={Object {}}
+          >
+            <li
+              className="ant-menu-item"
+              onClick={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              role="menuitem"
+              style={
+                Object {
+                  "paddingLeft": 24,
+                }
+              }
+            >
+              <span
+                aria-label="loading-3-quarters"
+                className="anticon anticon-loading-3-quarters anticon-spin {\\"style\\":[{},null]}"
+                id="Introduction_icon"
+                required={false}
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="loading-3-quarters"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                >
+                  <path
+                    d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+                  />
+                </svg>
+              </span>
+              <span>
+                <a
+                  className="{\\"style\\":[null]}"
+                  href="/introduction"
+                  onClick={[Function]}
+                >
+                  Introduction
+                </a>
+              </span>
+            </li>
+            <li
+              className="ant-menu-item"
+              onClick={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              role="menuitem"
+              style={
+                Object {
+                  "paddingLeft": 24,
+                }
+              }
+            >
+              <span
+                aria-label="loading-3-quarters"
+                className="anticon anticon-loading-3-quarters anticon-spin {\\"style\\":[{},null]}"
+                id="alert_icon"
+                required={false}
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="loading-3-quarters"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                >
+                  <path
+                    d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+                  />
+                </svg>
+              </span>
+              <span>
+                <a
+                  className="{\\"style\\":[null]}"
+                  href="/Alert"
+                  onClick={[Function]}
+                >
+                  Alert
+                </a>
+              </span>
+            </li>
+          </ul>
+          <div
+            style={
+              Object {
+                "flex": "1 0 auto",
+              }
+            }
+          />
+          <div
+            className="{}"
+            id="properties.logo.srcset_toggle_sider_affix"
+          >
+            <div
+              className=""
+            >
+              <div
+                style={
+                  Object {
+                    "background": "white",
+                  }
+                }
+              >
+                <button
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
+                  id="properties.logo.srcset_toggle_sider"
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span
+                    aria-label="loading-3-quarters"
+                    className="anticon anticon-loading-3-quarters anticon-spin {\\"style\\":[{},null]}"
+                    id="properties.logo.srcset_toggle_sider_icon"
+                    required={false}
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="loading-3-quarters"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="0 0 1024 1024"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </aside>
+    <main
+      className="ant-layout-content {\\"style\\":{\\"padding\\":\\"0 40px 40px 40px\\",\\"sm\\":{\\"padding\\":\\"0 10px 10px 10px\\"},\\"md\\":{\\"padding\\":\\"0 20px 20px 20px\\"},\\"lg\\":{\\"padding\\":\\"0 40px 40px 40px\\"}}}"
+      id="properties.logo.srcset_content"
+    >
+      <div
+        className="{\\"style\\":{\\"padding\\":\\"20px 0\\",\\"sm\\":{\\"padding\\":\\"5px 0\\"},\\"md\\":{\\"padding\\":\\"10px 0\\"}}}"
+      />
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>
+    </main>
+  </section>
+</section>
+`;
+
 exports[`Render properties.logo.style - value[0] 1`] = `
 <section
   className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
@@ -2019,8 +2561,10 @@ exports[`Render properties.logo.style - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},{\\"border\\":\\"5px solid blue\\"}]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},{\\"border\\":\\"5px solid blue\\"}]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -2192,8 +2736,10 @@ exports[`Render properties.menu - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -2452,8 +2998,10 @@ exports[`Render properties.menu.selectedColor - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -2712,8 +3260,10 @@ exports[`Render properties.sider.color - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -2972,8 +3522,10 @@ exports[`Render properties.sider.initialCollapsed - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -3156,8 +3708,10 @@ exports[`Render properties.sider.style - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -3340,8 +3894,10 @@ exports[`Render properties.sider.theme: dark - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -3513,8 +4069,10 @@ exports[`Render properties.style - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -3686,8 +4244,10 @@ exports[`Render properties.toggleSiderButton.hide - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -3870,8 +4430,10 @@ exports[`Render properties.toggleSiderButton.type - value[0] 1`] = `
     >
       <img
         alt="Lowdefy"
-        className="{\\"style\\":[{\\"width\\":130,\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        className="{\\"style\\":[{\\"width\\":130,\\"sm\\":{\\"width\\":40},\\"md\\":{\\"width\\":130}},{\\"margin\\":\\"0 30px 0 0\\",\\"flex\\":\\"0 1 auto\\",\\"sm\\":{\\"margin\\":\\"0 10px 0 0\\"},\\"md\\":{\\"margin\\":\\"0 15px 0 0\\"}},null]}"
+        sizes="(max-width: 767px) 40px, 768px"
         src="/public/logo-dark-theme.png"
+        srcset="/public/logo-square-dark-theme.png 40w, /public/logo-dark-theme.png 768w"
       />
     </a>
   </header>
@@ -4031,10 +4593,18 @@ exports[`Test Schema properties.logo.alt 1`] = `true`;
 
 exports[`Test Schema properties.logo.alt 2`] = `null`;
 
+exports[`Test Schema properties.logo.size 1`] = `true`;
+
+exports[`Test Schema properties.logo.size 2`] = `null`;
+
 exports[`Test Schema properties.logo.src 1`] = `true`;
 
 exports[`Test Schema properties.logo.src 2`] = `null`;
 
+exports[`Test Schema properties.logo.srcset 1`] = `true`;
+
+exports[`Test Schema properties.logo.srcset 2`] = `null`;
+
 exports[`Test Schema properties.logo.style 1`] = `true`;
 
 exports[`Test Schema properties.logo.style 2`] = `null`;