I was wondering how to make my leaflet map displayed slightly to right with using css, so I won’t have to set setview or center values for that. After I fold the sidebar I want the map to come back to center of the site. I tried something with add left:10% to leaflet.css but it messes with the coords popup.

function setupMap() {
    let mapData; // Zmienna do przechowywania danych mapy

    // Pobranie bieżącej ścieżki URL
    const currentPath = window.location.pathname;

    // Sprawdzenie ścieżki i ustawienie odpowiednich wartości
    if (currentPath.includes('/white_orchard/')) {
        mapData = mapdata_wo; // Użyj danych z mapdata_wo
    } else if (currentPath.includes('/velen_novigrad/')) {
        mapData = mapdata_vn; // Użyj danych z mapdata_vn
    } else {
        console.error('Nieznana ścieżka mapy');
        return;
    }

    var bounds = L.latLngBounds(mapData.sWest, mapData.nEast);
    var map = L.map('mapid', {
        zoomControl: false,
        center: mapData.map_center, // Ustawienie poprawnych współrzędnych (lat, lng)
        zoom: mapData.map_zoom,
        maxZoom: mapData.max_zoom,
        minZoom: mapData.min_zoom,
        attributionControl: false,
        zoomSnap: 0.5,  // Umożliwia zoom co 0.5
        zoomDelta: 0.5,
        maxBounds: bounds,
        maxBoundsViscosity: 0,
        fullscreenControl: true
    });

    function addBoundaryLine() {
        var corners = [
            [mapData.sWest.lat, mapData.sWest.lng],  // Dolny lewy róg
            [mapData.nEast.lat, mapData.sWest.lng],  // Górny lewy róg
            [mapData.nEast.lat, mapData.nEast.lng],  // Górny prawy róg
            [mapData.sWest.lat, mapData.nEast.lng],  // Dolny prawy róg
            [mapData.sWest.lat, mapData.sWest.lng]   // Zamknięcie obwodu (powrót do dolnego lewego rogu)
        ];

        // Dodanie polilinii (linii wielokątnej) z czerwoną linią
        var boundaryLine = L.polyline(corners, {
            color: 'red',   // Kolor linii
            weight: 2,      // Grubość linii
            opacity: 1      // Przezroczystość
        }).addTo(map);
    }

    // Wywołanie funkcji po załadowaniu mapy
    addBoundaryLine();

    // Dodanie kontrolek zoomu
    L.control.zoom({
        position: 'bottomright',
        zoomInTitle: 'Przybliż',
        zoomOutTitle: 'Oddal'
    }).addTo(map);

    // Okienko z koordynatami
    map.on('click', function (e) {
        var coords = e.latlng;
        var lat = coords.lat.toFixed(5);
        var lng = coords.lng.toFixed(5);
        console.log('Map clicked at:', lat, lng);
        L.popup()
            .setLatLng(coords)
            .setContent("Koordynaty: " + lat + ", " + lng)
            .openOn(map);
    });

    // Dodanie warstwy kafelków z opcją TMS
    L.tileLayer(mapData.map_path + '.jpg', {
        tms: true, // Ustawienie odwrotnej numeracji kafelków
        noWrap: true,
        bounds: bounds,
        maxZoom: mapData.max_zoom,
        minZoom: mapData.min_zoom,
        continousWorld: true,
    }).addTo(map);
}


// Wywołanie funkcji po załadowaniu DOM
document.addEventListener('DOMContentLoaded', function () {
    setupMap();
});


document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('container');
    const button = document.getElementById('toggleButton');
    const image = document.getElementById('toggleImage');
    const hideableDiv = document.getElementById('hideableDiv');
    var mapElement = document.getElementById('mapid');

    button.addEventListener('click', () => {
        const isHidden = hideableDiv.style.display === 'none';
        if (isHidden) {
            hideableDiv.style.display = 'block'; // Pokazuje div
            image.src = '/resources/images/cc_greaterthan-left.png'; // Zmienia obrazek
        } else {
            hideableDiv.style.display = 'none'; // Ukrywa div
            image.src = '/resources/images/cc_greaterthan-right.png';
        }
        // if (mapElement.classList.contains('map-move-left')) {
        //     mapElement.classList.remove('map-move-left');
        // } else {
        //     mapElement.classList.add('map-move-left');
        // }
    });
});

function showCategory(category) {
    document.querySelectorAll('.text-box').forEach((cat) => {
        cat.style.display = (category === 'all' || cat.id === category) ? 'block' : 'none';
    });
}

document.addEventListener('DOMContentLoaded', () => {
    const rightToggleButton = document.getElementById('rightToggleButton');
    const rightContent = document.getElementById('rightContent');
    const secondRightToggleButton = document.getElementById('secondRightToggleButton');
    const secondRightContent = document.getElementById('secondRightContent');

    rightToggleButton.addEventListener('click', () => {
        const buttonRect = rightToggleButton.getBoundingClientRect();
        rightContent.style.top = (buttonRect.top - 10) + 'px';
        rightContent.style.display = rightContent.style.display === 'none' ? 'block' : 'none';
        secondRightContent.style.display = 'none'; // Ukryj drugie okienko
    });

    secondRightToggleButton.addEventListener('click', () => {
        const buttonRect = secondRightToggleButton.getBoundingClientRect();
        secondRightContent.style.top = (buttonRect.top - 10) + 'px';
        secondRightContent.style.display = secondRightContent.style.display === 'none' ? 'block' : 'none';
        rightContent.style.display = 'none'; // Ukryj pierwsze okienko
    });
});