בקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש

[יום חדש מתחיל]

@cannon @עדלאידע
עשיתם דברים מדהימים!!!
אני רק מעדכן שכבר נפתחה ההזמנה במשנת יוסף, ואם תוכלו להמשיך את הקוד גם לגבי המלבן שבצד שמאל. כרגע של שניכם לא עובד על זה.

האתר של משנת יוסף

Spoiler

@cannon במה שאתה עשית, אחרי סגירת הסרגל הימני, נוצר סוג של פס אפור בתחתית המסך, ראה בצילום המצורף.

[a.y.f.]

@יום-חדש-מתחיל למה שלא תבקש ממשנת יוסף

[י. פל.]

@a.y.f. כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

@יום-חדש-מתחיל למה שלא תבקש ממשנת יוסף

כתבתי להם את זה עוד כשזה היה זמין רק למספר משתמשים מצומצם, ועלה בגורלי ליפול ברשת...
מאז הם הפכו את האתר לעוד יותר גרוע, עדיף כבר לשתוק...

[י. פל.]

@עדלאידע
אדיר!!!
רק תטפל כעת בסל הקניות... תודה עצומה!!!

[cannon]

@יום-חדש-מתחיל הפתרון של @עדלאידע מוצלח יותר פשוט תחכה שהוא ישדרג את הקוד שלו
(אלא א"כ יש לך העדפה לתוסף)

[עדלאידע]

@יום-חדש-מתחיל @י.-פל.

// ==UserScript==
// @name         כיווץ הסרגל כלים והסל קניות של משנת יוסף
// @namespace    http://tampermonkey.net/
// @version      v2
// @author       ShlomoH
// @description  הוספת כפתור כיווץ לסרגל כלים וסל הקניות באתר משנת יוסף
// @match        https://mishnatyosef.org/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
  section, .flex.flex-row.gap-\\[36px\\] {
     transition: width .3s ease-in-out, gap .3s ease-in-out, flex-basis .3s ease-in-out !important;
  }
  #cart.cart-collapsed {
    width: 100px !important;
  }

  #cart.cart-collapsed #cart-title,
  #cart.cart-collapsed div.bg-gray_semantic,
  #cart.cart-collapsed .item p:not(.font-bold.text-primary-900),
  #cart.cart-collapsed .item input,
  #cart.cart-collapsed > button,


  #cart.cart-collapsed .item button[data-v-f81940d1] {
    display: none !important;
  }

  #cart.cart-collapsed .item > div[data-v-986e9b24] {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0px 0 5px !important;
    position: relative;
  }
  #cart.cart-collapsed .item img {
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
  }
  #cart.cart-collapsed .item p.font-bold.text-primary-900 {
    display: block !important;
    font-size: 12px;
    text-align: center;
    margin-top: 4px;
  }

  #cart.cart-collapsed .item button.absolute {
    display: flex !important;
    position: absolute !important;
    top: auto !important;
    left: 50% !important;
    bottom: -45px;
    transform: translateX(-50%) scale(0.9);
  }

  #cart.cart-collapsed .custom-scroll-bar {
    padding-bottom: 100px;
  }
  #cart.cart-collapsed .text-grays-900,
  #cart.cart-collapsed .text-primary-700 {
    font-size: 12px !important;
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
`);
    const observer = new MutationObserver(() => {
        const el = document.querySelector(
            '#cart.cart-collapsed .hidden.xl\\:flex.flex-none.flex-row.items-center.justify-start.py-\\[16px\\].border-t.border-grays-400.px-\\[14px\\]'
        );
        if (el) {
            observer.disconnect();

            Object.assign(el.style, {
                position: 'absolute',
                bottom: '50px',
                left: '0',
                width: '100%',
                background: 'white',
                zIndex: '9999',
                borderTop: '1px solid #ccc',
                padding: '0px 0px',
                boxSizing: 'border-box'
            });
            const cartContainer = document.querySelector('#cart.cart-collapsed .relative.w-full.h-screen.flex.flex-col.justify-between.bg-white');
            if (cartContainer) {
                Object.assign(cartContainer.style, {
                    background: 'white',
                    paddingBottom: '100px'
                });
            }

            const totalSpan = el.querySelector('.text-primary-700');
            if (totalSpan) {
                totalSpan.innerHTML = totalSpan.innerHTML.replace('סך הכל', 'סה״כ');
            }

        }
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    const selectors = {
        sidebar: 'div.sidebar',
        container: 'div.md\\:flex.md\\:w-\\[196px\\]',
        main: '.md\\:pr-\\[196px\\]',
        topbar: 'div.fixed.z-30.bg-primary-900',
        cart: '#cart'
    };

    const classes = {
        expanded: 'md:w-[196px]',
        collapsed: 'md:w-20'
    };

    const widths = {
        expanded: '196px',
        collapsed: '69px'
    };

    const storageKey = 'sidebarIsCollapsed';

    const waitFor = (selector, callback) => {
        const interval = setInterval(() => {
            const el = document.querySelector(selector);
            if (el) {
                clearInterval(interval);
                callback(el);
            }
        }, 200);
    };


    function toggleRightSidebar(collapsed, elements) {
        const {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        } = elements;

        main.style.paddingRight = collapsed ? widths.collapsed : widths.expanded;
        container.classList.toggle(classes.expanded, !collapsed);
        container.classList.toggle(classes.collapsed, collapsed);
        topbar.style.right = `calc(${collapsed ? widths.collapsed : widths.expanded} - 1px)`;
        topbar.classList.remove('xl:w-[calc(100%-196px)]');
        nav?.querySelector('[style*="flex-grow: 1"]')?.style.setProperty('display', collapsed ? 'block' : 'none');
        if (logo) logo.style.width = collapsed ? '50px' : '';
        if (logoContainer) Object.assign(logoContainer.style, {
            marginTop: collapsed ? '8px' : '',
            marginBottom: collapsed ? '20px' : ''
        });
        badges.forEach(b => b.style.display = collapsed ? 'none' : '');
        headers.forEach(h => h.style.justifyContent = collapsed ? 'center' : '');
        navItems.forEach(el => {
            el.querySelector('.sidebar-text')?.style.setProperty('display', collapsed ? 'none' : 'inline');
            const icon = el.querySelector('.material-symbols-rounded');
            if (icon) icon.classList.toggle('ml-2', !collapsed);
            el.style.justifyContent = collapsed ? 'center' : '';
        });
        const icon = collapseBtn.querySelector('.material-symbols-rounded');
        const text = collapseBtn.querySelector('.sidebar-text');
        icon.textContent = collapsed ? 'chevron_left' : 'chevron_right';
        text.style.display = collapsed ? 'none' : 'inline';
        collapseBtn.style.justifyContent = collapsed ? 'center' : '';
    }

    function toggleLeftCart(collapsed, mainElement) {
        const cart = document.querySelector(selectors.cart);
        const cartContainer = cart ? cart.closest('section') : null;

        if (cart && cartContainer && mainElement) {
            cart.classList.toggle('cart-collapsed', collapsed);
            cartContainer.style.flex = collapsed ? '0 0 40px' : '0 0 300px';
        }
    }

    waitFor(selectors.sidebar, sidebar => {
        const container = document.querySelector(selectors.container);
        const main = document.querySelector(selectors.main);
        const topbar = document.querySelector(selectors.topbar);

        if (!container || !main || !topbar) return;

        container.style.transition = 'width .3s ease-in-out';
        main.style.transition = 'padding-right .3s ease-in-out, padding-left .3s ease-in-out';

        const logo = container.querySelector('img.logo');
        const logoContainer = logo?.closest('div.items-center');
        const badges = container.querySelectorAll('.bg-secondary-200');
        const headers = [...container.querySelectorAll('.text-slate-400')];
        const bottomSection = container.querySelector('.mb-\\[30px\\]');
        const nav = sidebar.querySelector('nav');
        if (nav) Object.assign(nav.style, {
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between'
        });
        const navItems = [...container.querySelectorAll('nav a, .pointer-events-none, button.h-10')];
        navItems.forEach(el => {
            if (!el.querySelector('.sidebar-text')) {
                const text = el.innerText.trim();
                const icon = el.querySelector('.material-symbols-rounded');
                el.innerHTML = icon ? icon.outerHTML + `<span class="sidebar-text">${text.replace(icon.innerText, '').trim()}</span>` : `<span class="sidebar-text">${text}</span>`;
            }
        });

        const collapseBtn = document.createElement('a');
        collapseBtn.style.cursor = 'pointer';
        collapseBtn.className = 'group flex items-center px-2 py-2 text-base font-medium rounded-[4px] text-primary-200 hover:text-primary-500 hover:bg-purple_semantic h-10';
        collapseBtn.innerHTML = `<span class="material-symbols-rounded">chevron_right</span><span class="sidebar-text"> כווץ סרגל</span>`;

        const rightSidebarElements = {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        };

        collapseBtn.onclick = e => {
            e.preventDefault();
            const isCollapsed = container.classList.contains(classes.collapsed);
            const shouldBeCollapsed = !isCollapsed;
            localStorage.setItem(storageKey, shouldBeCollapsed);
            toggleRightSidebar(shouldBeCollapsed, rightSidebarElements);
            toggleLeftCart(shouldBeCollapsed, main);
        };

        const wrap = document.createElement('div');
        wrap.className = 'flex flex-col px-2';
        wrap.append(collapseBtn);
        bottomSection?.before(wrap);

        toggleRightSidebar(localStorage.getItem(storageKey) === 'true', rightSidebarElements);
    });

    waitFor(selectors.cart, () => {
        const main = document.querySelector(selectors.main);
        toggleLeftCart(localStorage.getItem(storageKey) === 'true', main);
    });

})();

[יום חדש מתחיל]

@עדלאידע

ייש"כ גדול, זה נראה ממש מדהים!!

א. תוסיף את זה לתחילת הקוד [סתם ליופי]:

// @icon         https://www.google.com/s2/favicons?sz=64&domain=mishnatyosef.org

ב. יש בעורך של tampermonkey אזהרות של eslint על הקוד. תיקנתי את זה, מצורף הקוד המתוקן בספוילר.

Spoiler

// ==UserScript==
// @name         כיווץ הסרגל כלים והסל קניות של משנת יוסף
// @namespace    http://tampermonkey.net/
// @version      v2
// @author       ShlomoH
// @description  הוספת כפתור כיווץ לסרגל כלים וסל הקניות באתר משנת יוסף
// @match        https://mishnatyosef.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=mishnatyosef.org
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
  section, .flex.flex-row.gap-\\[36px\\] {
     transition: width .3s ease-in-out, gap .3s ease-in-out, flex-basis .3s ease-in-out !important;
  }
  #cart.cart-collapsed {
    width: 100px !important;
  }

  #cart.cart-collapsed #cart-title,
  #cart.cart-collapsed div.bg-gray_semantic,
  #cart.cart-collapsed .item p:not(.font-bold.text-primary-900),
  #cart.cart-collapsed .item input,
  #cart.cart-collapsed > button,


  #cart.cart-collapsed .item button[data-v-f81940d1] {
    display: none !important;
  }

  #cart.cart-collapsed .item > div[data-v-986e9b24] {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0px 0 5px !important;
    position: relative;
  }
  #cart.cart-collapsed .item img {
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
  }
  #cart.cart-collapsed .item p.font-bold.text-primary-900 {
    display: block !important;
    font-size: 12px;
    text-align: center;
    margin-top: 4px;
  }

  #cart.cart-collapsed .item button.absolute {
    display: flex !important;
    position: absolute !important;
    top: auto !important;
    left: 50% !important;
    bottom: -45px;
    transform: translateX(-50%) scale(0.9);
  }

  #cart.cart-collapsed .custom-scroll-bar {
    padding-bottom: 100px;
  }
  #cart.cart-collapsed .text-grays-900,
  #cart.cart-collapsed .text-primary-700 {
    font-size: 12px !important;
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
`);
    const observer = new MutationObserver(() => {
        const el = document.querySelector(
            '#cart.cart-collapsed .hidden.xl\\:flex.flex-none.flex-row.items-center.justify-start.py-\\[16px\\].border-t.border-grays-400.px-\\[14px\\]'
        );
        if (el) {
            observer.disconnect();

            Object.assign(el.style, {
                position: 'absolute',
                bottom: '50px',
                left: '0',
                width: '100%',
                background: 'white',
                zIndex: '9999',
                borderTop: '1px solid #ccc',
                padding: '0px 0px',
                boxSizing: 'border-box'
            });
            const cartContainer = document.querySelector('#cart.cart-collapsed .relative.w-full.h-screen.flex.flex-col.justify-between.bg-white');
            if (cartContainer) {
                Object.assign(cartContainer.style, {
                    background: 'white',
                    paddingBottom: '100px'
                });
            }

            const totalSpan = el.querySelector('.text-primary-700');
            if (totalSpan) {
                totalSpan.innerHTML = totalSpan.innerHTML.replace('סך הכל', 'סה״כ');
            }

        }
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    const selectors = {
        sidebar: 'div.sidebar',
        container: 'div.md\\:flex.md\\:w-\\[196px\\]',
        main: '.md\\:pr-\\[196px\\]',
        topbar: 'div.fixed.z-30.bg-primary-900',
        cart: '#cart'
    };

    const classes = {
        expanded: 'md:w-[196px]',
        collapsed: 'md:w-20'
    };

    const widths = {
        expanded: '196px',
        collapsed: '69px'
    };

    const storageKey = 'sidebarIsCollapsed';

    const waitFor = (selector, callback) => {
        const interval = setInterval(() => {
            const el = document.querySelector(selector);
            if (el) {
                clearInterval(interval);
                callback(el);
            }
        }, 200);
    };


    function toggleRightSidebar(collapsed, elements) {
        const {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        } = elements;

        main.style.paddingRight = collapsed ? widths.collapsed : widths.expanded;
        container.classList.toggle(classes.expanded, !collapsed);
        container.classList.toggle(classes.collapsed, collapsed);
        topbar.style.right = `calc(${collapsed ? widths.collapsed : widths.expanded} - 1px)`;
        topbar.classList.remove('xl:w-[calc(100%-196px)]');
        nav?.querySelector('[style*="flex-grow: 1"]')?.style.setProperty('display', collapsed ? 'block' : 'none');
        if (logo) {
            logo.style.width = collapsed ? '50px' : '';
        }
        if (logoContainer) {
            Object.assign(logoContainer.style, {
                marginTop: collapsed ? '8px' : '',
                marginBottom: collapsed ? '20px' : ''
            });
        }
        badges.forEach(b => {
            b.style.display = collapsed ? 'none' : '';
        });
        headers.forEach(h => {
            h.style.justifyContent = collapsed ? 'center' : '';
        });
        navItems.forEach(el => {
            el.querySelector('.sidebar-text')?.style.setProperty('display', collapsed ? 'none' : 'inline');
            const icon = el.querySelector('.material-symbols-rounded');
            if (icon) {
                icon.classList.toggle('ml-2', !collapsed);
            }
            el.style.justifyContent = collapsed ? 'center' : '';
        });
        const icon = collapseBtn.querySelector('.material-symbols-rounded');
        const text = collapseBtn.querySelector('.sidebar-text');
        icon.textContent = collapsed ? 'chevron_left' : 'chevron_right';
        text.style.display = collapsed ? 'none' : 'inline';
        collapseBtn.style.justifyContent = collapsed ? 'center' : '';
    }

    function toggleLeftCart(collapsed, mainElement) {
        const cart = document.querySelector(selectors.cart);
        const cartContainer = cart ? cart.closest('section') : null;

        if (cart && cartContainer && mainElement) {
            cart.classList.toggle('cart-collapsed', collapsed);
            cartContainer.style.flex = collapsed ? '0 0 40px' : '0 0 300px';
        }
    }

    waitFor(selectors.sidebar, sidebar => {
        const container = document.querySelector(selectors.container);
        const main = document.querySelector(selectors.main);
        const topbar = document.querySelector(selectors.topbar);

        if (!container || !main || !topbar) return;

        container.style.transition = 'width .3s ease-in-out';
        main.style.transition = 'padding-right .3s ease-in-out, padding-left .3s ease-in-out';

        const logo = container.querySelector('img.logo');
        const logoContainer = logo?.closest('div.items-center');
        const badges = container.querySelectorAll('.bg-secondary-200');
        const headers = [...container.querySelectorAll('.text-slate-400')];
        const bottomSection = container.querySelector('.mb-\\[30px\\]');
        const nav = sidebar.querySelector('nav');
        if (nav) {
            Object.assign(nav.style, {
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between'
            });
        }
        const navItems = [...container.querySelectorAll('nav a, .pointer-events-none, button.h-10')];
        navItems.forEach(el => {
            if (!el.querySelector('.sidebar-text')) {
                const text = el.innerText.trim();
                const icon = el.querySelector('.material-symbols-rounded');
                el.innerHTML = icon ? icon.outerHTML + `<span class="sidebar-text">${text.replace(icon.innerText, '').trim()}</span>` : `<span class="sidebar-text">${text}</span>`;
            }
        });

        const collapseBtn = document.createElement('a');
        collapseBtn.style.cursor = 'pointer';
        collapseBtn.className = 'group flex items-center px-2 py-2 text-base font-medium rounded-[4px] text-primary-200 hover:text-primary-500 hover:bg-purple_semantic h-10';
        collapseBtn.innerHTML = `<span class="material-symbols-rounded">chevron_right</span><span class="sidebar-text"> כווץ סרגל</span>`;

        const rightSidebarElements = {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        };

        collapseBtn.onclick = e => {
            e.preventDefault();
            const isCollapsed = container.classList.contains(classes.collapsed);
            const shouldBeCollapsed = !isCollapsed;
            localStorage.setItem(storageKey, shouldBeCollapsed);
            toggleRightSidebar(shouldBeCollapsed, rightSidebarElements);
            toggleLeftCart(shouldBeCollapsed, main);
        };

        const wrap = document.createElement('div');
        wrap.className = 'flex flex-col px-2';
        wrap.append(collapseBtn);
        bottomSection?.before(wrap);

        toggleRightSidebar(localStorage.getItem(storageKey) === 'true', rightSidebarElements);
    });

    waitFor(selectors.cart, () => {
        const main = document.querySelector(selectors.main);
        toggleLeftCart(localStorage.getItem(storageKey) === 'true', main);
    });

})();

ג. מה זה החיצים הכחולים הקטנים, וכן הפסים לרוחב הכחולים הקטנים שיש בצד [סתם, לא באמת חשוב...]

Spoiler

[עדלאידע]

@יום-חדש-מתחיל כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

ג. מה זה החיצים הכחולים הקטנים, וכן הפסים לרוחב הכחולים הקטנים שיש בצד [סתם לא באמת חשוב...]

זה חלק של הטולטיפ שמוצג כשמרפים על מוצר, אני עובד על זה.

[אוריי]

לא הצלחתי להבין איפה אני שם את הקוד הזה?
בטמפרמונקי מה זה?? או יותר נכון איפה זה??

@עדלאידע אתה מתכוננן להוציא סידור לחיצים לי זה מאד יעזור.. יש לי מחשב עם מסך 12 אינצ'.

[עדלאידע]

@אוריי כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

לא הצלחתי להבין איפה אני שם את הקוד הזה?
בטמפרמונקי מה זה?? או יותר נכון איפה זה??

https://mitmachim.top/post/898325

[עדלאידע]

@יום-חדש-מתחיל כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

מה זה החיצים הכחולים הקטנים, וכן הפסים לרוחב הכחולים הקטנים שיש בצד [סתם, לא באמת חשוב...]

תוקן:

// ==UserScript==
// @name         כיווץ הסרגל כלים והסל קניות של משנת יוסף
// @namespace    http://tampermonkey.net/
// @version      v2
// @author       ShlomoH
// @description  הוספת כפתור כיווץ לסרגל כלים וסל הקניות באתר משנת יוסף
// @match        https://mishnatyosef.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=mishnatyosef.org
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        section, .flex.flex-row.gap-\\[36px\\] {
            transition: width .3s ease-in-out, gap .3s ease-in-out, flex-basis .3s ease-in-out !important;
        }

        #cart.cart-collapsed {
            width: 100px !important;
        }

        #cart.cart-collapsed #cart-title,
        #cart.cart-collapsed div.bg-gray_semantic,
        #cart.cart-collapsed .item p:not(.font-bold.text-primary-900),
        #cart.cart-collapsed .item input,
        #cart.cart-collapsed > button,


        #cart.cart-collapsed .item button[data-v-f81940d1] {
            display: none !important;
        }

        #cart.cart-collapsed .item > div[data-v-986e9b24] {
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 0px 0 5px !important;
            position: relative;
        }

        #cart.cart-collapsed .item img {
            width: 80px !important;
            height: 80px !important;
            margin: 0 !important;
        }

        #cart.cart-collapsed .item p.font-bold.text-primary-900 {
            display: block !important;
            font-size: 12px;
            text-align: center;
            margin-top: 4px;
        }

        #cart.cart-collapsed .item button.absolute {
            display: flex !important;
            position: absolute !important;
            top: auto !important;
            left: 50% !important;
            bottom: -45px;
            transform: translateX(-50%) scale(0.9);
        }

        #cart.cart-collapsed .custom-scroll-bar {
            padding-bottom: 100px;
        }

        #cart.cart-collapsed .tooltip {
            display: none !important;
        }

        #cart.cart-collapsed .text-grays-900,
        #cart.cart-collapsed .text-primary-700 {
            font-size: 12px !important;
            display: block !important;
            text-align: center !important;
            white-space: nowrap !important;
            overflow: hidden !important;
        }


        .min-h-\\[400px\\] {
            min-height: 100px !important;
        }

        .h-\\[100px\\] {
            height: 50px !important;
        }

        .min-h-\\[400px\\] .text-lg {
            font-size: 16px !important;
            line-height: 1.2 !important;
        }

        .min-h-\\[400px\\] .text-base {
            font-size: 14px !important;
        }

        .min-h-\\[400px\\] button.py-1\\.5.px-4 {
            padding: 4px 10px !important;
            font-size: 14px !important;
        }

        .min-h-\\[400px\\] .h-\\[40px\\] {
            height: 34px !important;
        }

        .min-h-\\[400px\\] input.w-\\[73px\\] {
            width: 45px !important;
        }

        .min-h-\\[400px\\] .my-\\[4px\\] {
            margin-top: 2px !important;
            margin-bottom: 2px !important;
        }

        .min-h-\\[400px\\] .my-\\[8px\\] {
            margin-top: 6px !important;
            margin-bottom: 6px !important;
        }

        `);

    const observer = new MutationObserver(() => {
        const el = document.querySelector(
            '#cart.cart-collapsed .hidden.xl\\:flex.flex-none.flex-row.items-center.justify-start.py-\\[16px\\].border-t.border-grays-400.px-\\[14px\\]'
        );
        if (el) {
            observer.disconnect();

            Object.assign(el.style, {
                position: 'absolute',
                bottom: '50px',
                left: '0',
                width: '100%',
                background: 'white',
                zIndex: '9999',
                borderTop: '1px solid #ccc',
                padding: '0px 0px',
                boxSizing: 'border-box'
            });
            const cartContainer = document.querySelector('#cart.cart-collapsed .relative.w-full.h-screen.flex.flex-col.justify-between.bg-white');
            if (cartContainer) {
                Object.assign(cartContainer.style, {
                    background: 'white',
                    paddingBottom: '100px'
                });
            }

            const totalSpan = el.querySelector('.text-primary-700');
            if (totalSpan) {
                totalSpan.innerHTML = totalSpan.innerHTML.replace('סך הכל', 'סה״כ');
            }

        }
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    const selectors = {
        sidebar: 'div.sidebar',
        container: 'div.md\\:flex.md\\:w-\\[196px\\]',
        main: '.md\\:pr-\\[196px\\]',
        topbar: 'div.fixed.z-30.bg-primary-900',
        cart: '#cart'
    };

    const classes = {
        expanded: 'md:w-[196px]',
        collapsed: 'md:w-20'
    };

    const widths = {
        expanded: '196px',
        collapsed: '69px'
    };

    const storageKey = 'sidebarIsCollapsed';

    const waitFor = (selector, callback) => {
        const interval = setInterval(() => {
            const el = document.querySelector(selector);
            if (el) {
                clearInterval(interval);
                callback(el);
            }
        }, 200);
    };


    function toggleRightSidebar(collapsed, elements) {
        const {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        } = elements;

        main.style.paddingRight = collapsed ? widths.collapsed : widths.expanded;
        container.classList.toggle(classes.expanded, !collapsed);
        container.classList.toggle(classes.collapsed, collapsed);
        topbar.style.right = `calc(${collapsed ? widths.collapsed : widths.expanded} - 1px)`;
        topbar.classList.remove('xl:w-[calc(100%-196px)]');
        nav?.querySelector('[style*="flex-grow: 1"]')?.style.setProperty('display', collapsed ? 'block' : 'none');
        if (logo) {
            logo.style.width = collapsed ? '50px' : '';
        }
        if (logoContainer) {
            Object.assign(logoContainer.style, {
                marginTop: collapsed ? '8px' : '',
                marginBottom: collapsed ? '20px' : ''
            });
        }
        badges.forEach(b => {
            b.style.display = collapsed ? 'none' : '';
        });
        headers.forEach(h => {
            h.style.justifyContent = collapsed ? 'center' : '';
        });
        navItems.forEach(el => {
            el.querySelector('.sidebar-text')?.style.setProperty('display', collapsed ? 'none' : 'inline');
            const icon = el.querySelector('.material-symbols-rounded');
            if (icon) {
                icon.classList.toggle('ml-2', !collapsed);
            }
            el.style.justifyContent = collapsed ? 'center' : '';
        });
        const icon = collapseBtn.querySelector('.material-symbols-rounded');
        const text = collapseBtn.querySelector('.sidebar-text');
        icon.textContent = collapsed ? 'chevron_left' : 'chevron_right';
        text.style.display = collapsed ? 'none' : 'inline';
        collapseBtn.style.justifyContent = collapsed ? 'center' : '';
    }

    function toggleLeftCart(collapsed, mainElement) {
        const cart = document.querySelector(selectors.cart);
        const cartContainer = cart ? cart.closest('section') : null;

        if (cart && cartContainer && mainElement) {
            cart.classList.toggle('cart-collapsed', collapsed);
            cartContainer.style.flex = collapsed ? '0 0 40px' : '0 0 300px';
        }
    }

    waitFor(selectors.sidebar, sidebar => {
        const container = document.querySelector(selectors.container);
        const main = document.querySelector(selectors.main);
        const topbar = document.querySelector(selectors.topbar);

        if (!container || !main || !topbar) return;

        container.style.transition = 'width .3s ease-in-out';
        main.style.transition = 'padding-right .3s ease-in-out, padding-left .3s ease-in-out';

        const logo = container.querySelector('img.logo');
        const logoContainer = logo?.closest('div.items-center');
        const badges = container.querySelectorAll('.bg-secondary-200');
        const headers = [...container.querySelectorAll('.text-slate-400')];
        const bottomSection = container.querySelector('.mb-\\[30px\\]');
        const nav = sidebar.querySelector('nav');
        if (nav) {
            Object.assign(nav.style, {
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between'
            });
        }
        const navItems = [...container.querySelectorAll('nav a, .pointer-events-none, button.h-10')];
        navItems.forEach(el => {
            if (!el.querySelector('.sidebar-text')) {
                const text = el.innerText.trim();
                const icon = el.querySelector('.material-symbols-rounded');
                el.innerHTML = icon ? icon.outerHTML + `<span class="sidebar-text">${text.replace(icon.innerText, '').trim()}</span>` : `<span class="sidebar-text">${text}</span>`;
            }
        });

        const collapseBtn = document.createElement('a');
        collapseBtn.style.cursor = 'pointer';
        collapseBtn.className = 'group flex items-center px-2 py-2 text-base font-medium rounded-[4px] text-primary-200 hover:text-primary-500 hover:bg-purple_semantic h-10';
        collapseBtn.innerHTML = `<span class="material-symbols-rounded">chevron_right</span><span class="sidebar-text"> כווץ סרגל</span>`;

        const rightSidebarElements = {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        };

        collapseBtn.onclick = e => {
            e.preventDefault();
            const isCollapsed = container.classList.contains(classes.collapsed);
            const shouldBeCollapsed = !isCollapsed;
            localStorage.setItem(storageKey, shouldBeCollapsed);
            toggleRightSidebar(shouldBeCollapsed, rightSidebarElements);
            toggleLeftCart(shouldBeCollapsed, main);
        };

        const wrap = document.createElement('div');
        wrap.className = 'flex flex-col px-2';
        wrap.append(collapseBtn);
        bottomSection?.before(wrap);

        toggleRightSidebar(localStorage.getItem(storageKey) === 'true', rightSidebarElements);
    });

    waitFor(selectors.cart, () => {
        const main = document.querySelector(selectors.main);
        toggleLeftCart(localStorage.getItem(storageKey) === 'true', main);
    });

})();