QGIS- Leaflet (Customizing OnClick event)

One way of doing this might be to create an array that will hold all of your polygon features. You can add all of your polygons to this array, then loop over the elements in the array to attach an event handler and add it to the map. You can attach the event handler using polygon.on().

Here's an example where I add a circle and triangle to the map. I give both of these shapes a description. I then add them to the polygons array, and once they're initialized, I loop over the array to attach the event handler and add them to the map. Click "Run Snippet" to give it a try (it will probably be easier to see on the full screen view).

You can style the sidebar however you'd like, and modify the event handler and/or CSS to create an animation effect if desired.

Hope this gets your on the right track.

let map = new L.Map('map');
// polygons array to hold all polygons
let polygons = [];

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
  maxZoom: 18
}).addTo(map);

// Location to center the map
let london = new L.LatLng(51.505, -0.09);
map.setView(london, 13);

// Create a circle around a point
let circleLocation = new L.LatLng(51.508, -0.11),
  circleOptions = {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
  };

let circle = new L.Circle(circleLocation, 500, circleOptions);
// This is what will be displayed in the sidebar on click
circle.desc = "You clicked a circle!";
// Add the circle to the polygons array
polygons.push(circle);

// Create a triangle with vertices below
let p1 = new L.LatLng(51.509, -0.08),
  p2 = new L.LatLng(51.503, -0.06),
  p3 = new L.LatLng(51.51, -0.047),
  polygonPoints = [p1, p2, p3];

let polygon = new L.Polygon(polygonPoints);
// This is what will be displayed in the sidebar on click
polygon.desc = "You clicked a triangle!";
// Add the triangle to the polygons array
polygons.push(polygon);

// Loop over all elements in the polygons array and attach the event handler and add the element to the map
polygons.forEach(function (i) {
 i.on("click", changeSidebar);
  map.addLayer(i);
});

// Basic event handler that just changes the sidebar innerHTML to the element's `desc` property defined above.
function changeSidebar (event) {
 sidebar.innerHTML = event.target.desc;
}

#sidebar {
  width: 30%;
  height: 500px;
  position: absolute;
  right: 0;
  background-color: #c3c3c3;
}

#map {
  width: 70%;
  height: 500px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<div id="sidebar"></div>
<div id="map"></div>

Actually, later I also found out we can insert and pass on a function instead of passing in a popupContent (html).

Where to change it:

layer.bindPopup(popupContent, {maxHeight: 400});

instead of original variable as html insertion:

 var popupContent = '<table>\
            <tr>\
                <td colspan="2"><strong>Lot</strong><br />' + (feature.properties['Lot'] !== null ? Autolinker.link(String(feature.properties['Lot'])) : '') + '</td>\
            </tr>\
            <tr>\
                <th scope="row">Design</th>\
                <td>' + (feature.properties['Design'] !== null ? Autolinker.link(String(feature.properties['Design'])) : '') + '</td>\
            </tr>\
            <tr>\
                <th scope="row">Area (sqm)</th>\
                <td>' + (feature.properties['Area (sqm)'] !== null ? Autolinker.link(String(feature.properties['Area (sqm)'])) : '') + '</td>\
            </tr>\
        </table>';

we can replace it with a function to change front-end effect: e.g.

function popup(){
                //do whatever here
            }

layer.bindPopup(popup, {maxHeight: 400});

Idea inspired also by the Answer and its documentation: https://leafletjs.com/reference-1.5.0.html#popup

setContent

( htmlContent) Sets the HTML content of the popup. If a function is passed the source layer will be passed to the function. The function should return a String or HTMLElement to be used in the popup.

Hope everyone enjoy this :)