https://cleanerssunderland.co.uk/wp-content/themes/extendable/assets/js/navigation-customization.js

1(function () {
2    'use strict';
3
4    function injectSiteLogoTitle() {
5        const container = document.querySelector('.wp-block-navigation__responsive-dialog');
6        if (!container) return;
7
8        if (container.querySelector('.site-logo-title')) return;
9
10        if (!window.ExtendableNavData) return;
11
12        const { logoUrl, siteTitle } = window.ExtendableNavData;
13        const hasSiteTitle = !!document.querySelector('header.wp-block-template-part .wp-block-site-title');
14
15        const wrapper = document.createElement('div');
16        wrapper.className = 'site-logo-title wp-block-site-logo cloned-for-mobile';
17        wrapper.innerHTML = `
18            ${logoUrl ? `<img src="${logoUrl}" alt="Site Logo" class="mobile-logo" />` : ''}
19            ${hasSiteTitle ? `<span class="site-title">${siteTitle || ''}</span>` : ''}
20        `;
21        container.prepend(wrapper);
22    }
23
24    function injectNavExtras() {
25        const dialog = document.querySelector('.wp-block-navigation__responsive-dialog');
26        if (!dialog) return;
27        if (dialog.querySelector('.ext-nav-extras-mobile')) return;
28
29        const header = document.querySelector('header.wp-block-template-part');
30        if (!header) return;
31
32        // Only clone the specific extras (phone / CTA / social). Avoid cloning
33        // .ext-nav-extras as a wrapper because some header parts use that class
34        // around the navigation block itself — cloning it would duplicate the
35        // entire nav.
36        const extras = header.querySelectorAll(
37            '.ext-nav-extras-phone, .ext-nav-extras-btn, .ext-nav-extras-social'
38        );
39        if (extras.length === 0) return;
40
41        const container = document.createElement('div');
42        container.className = 'ext-nav-extras-mobile cloned-for-mobile';
43
44        extras.forEach((el) => {
45            const clone = el.cloneNode(true);
46            // Strip identifiers that should be unique per document so the clone
47            // doesn't collide with the original (id targets, agent-tracked blocks).
48            clone
49                .querySelectorAll('[id], [data-extendify-part-block-id], [data-extendify-part-slug], [data-extendify-part]')
50                .forEach((node) => {
51                    node.removeAttribute('id');
52                    node.removeAttribute('data-extendify-part-block-id');
53                    node.removeAttribute('data-extendify-part-slug');
54                    node.removeAttribute('data-extendify-part');
55                });
56            // Force left alignment via inline style: WP generates a
57            // wp-container-* class for each layout block with its own
58            // justify-content rule, which has higher specificity than
59            // swapping .is-content-justification-right/left classes can fight.
60            [clone, ...clone.querySelectorAll('*')]
61                .filter((node) => node.classList?.contains('is-content-justification-right')
62                    || node.classList?.contains('is-content-justification-center'))
63                .forEach((node) => {
64                    node.style.justifyContent = 'flex-start';
65                });
66            container.appendChild(clone);
67        });
68
69        dialog.appendChild(container);
70    }
71
72    function hasNewNavOverlay() {
73        return !!document.querySelector('.wp-block-navigation__responsive-container.disable-default-overlay');
74    }
75
76    function init() {
77        if (hasNewNavOverlay()) return;
78
79        injectSiteLogoTitle();
80        injectNavExtras();
81    }
82
83    if (document.readyState === 'loading') {
84        document.addEventListener('DOMContentLoaded', init);
85    } else {
86        init();
87    }
88})();