JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="map-legend" id="legend">
  <div class="map-legend-head" id="legendHead">Legend</div>
  <div class="map-legend-body">
    <div class="map-legend-list">

			<!-- this is one child -->
      <li class="map-legend-list-item">
        <span class="item-symbol"></span> <!-- item symbol is for colouring -->
        <span class="item-name">The legend will scale itself</span>
      </li>
			<!-- legend child end -->

      <li class="map-legend-list-item">
        <span class="item-symbol"></span>
        <span class="item-name">Never to be less than 170px in width, but never more than 300px</span>
      </li>

      <li class="map-legend-list-item">
        <span class="item-symbol"></span>
        <span class="item-name">We can set a fixed width, but if all items are short strings, will look odd</span>
      </li>

      <li class="map-legend-list-item">
        <span class="item-symbol"></span>
        <span class="item-name">osm</span>
      </li>
    </div>
  </div>
</div>

<div class="drawing-area-poligon"></div>
<div id="actionButtons" class="action-buttons">
        <button role="button" id="actionButtonsYes" class="action-buttons-yes">Apply selection</button>
        <button role="button" id="actionButtonsNo" class="action-buttons-no">Clear selection</button>
    </div>


<button class="share-region">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="31.5" viewBox="0 0 36 31.5">
  <path id="Icon_open-share-boxed" data-name="Icon open-share-boxed" d="M3.375,0A3.4,3.4,0,0,0,0,3.375v24.75A3.4,3.4,0,0,0,3.375,31.5h20.25A3.4,3.4,0,0,0,27,28.125V22.5H22.5V27H4.5V4.5h9V0ZM27,0V4.5A17.875,17.875,0,0,0,9.27,20.385,8.937,8.937,0,0,1,18,13.5h9V18l9-9Z" fill="#fff"/>
</svg>



</button>


<script>
  let legend = document.getElementById('legend');
	let legendHead = document.getElementById('legendHead');


  legendHead.addEventListener('click', event => {
    legend.classList.toggle('collapsed');
  });
</script>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Raleway:wght@400;500;600;700;900&display=swap');


$brand-dark: #0e0727;
$brand-dark-medium: #221c3a;
$brand-light: #a59fb8;
$brand-accent: #42B98B;

$animation: cubic-bezier(.71, -0.26, .29, 1.27);

$brand-title: 'Raleway',
sans-serif;
$brand-text: 'Lato',
sans-serif;


.map-legend {
  position: fixed;
  top: 30px;
  right: 30px;
  background: $brand-dark;
  color: $brand-light;
  width: auto;
  min-width: 170px;
  max-width: 300px;
  border-radius: 20px;
  box-shadow: 3px 5px 15px 0px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: opacity 0.3s ease-in;

  &-head {
    padding: 30px 30px;
    text-transform: uppercase;
    color: #fff;
    font-family: $brand-title;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 1px;
    text-align: center;
    user-select: none;
    cursor: pointer;
  }

  &-body {
    padding: 30px 30px;
    background: $brand-dark-medium;
    height: auto;
    min-height: 1px;
    overflow: hidden;
    transition: transform 0.15s cubic-bezier(.71, -0.26, .29, 1.27);
  }

  &-list {
    list-style-type: none;

    &-item {
      display: flex;
      align-items: flex-start;
      font-family: $brand-text;
      font-size: 18px;
      line-height: 22px;

      .item-symbol {
        width: 18px;
        height: 18px;
        border-radius: 24px;
        background: $brand-accent;
        margin-right: 12px;
        flex-shrink: 0;
        flex-grow: 0;
        margin-top: 3px;
      }

      .item-name {
        flex-grow: 1;
      }

      &:not(:last-child) {
        margin-bottom: 20px;
      }
    }
  }
}

.map-legend.collapsed:not(:hover) {
  opacity: 0.2;
}

.map-legend.collapsed .map-legend-body {
  height: 0;
  padding: 0 30px;
}



/* ACTION BUTTONS */

.action-buttons {
  background-color: #0e0727;
  border-radius: 5px;
  box-shadow: 3px 5px 15px 0 rgba(0, 0, 0, .5);
  height: 40px;
  margin-right: 16px;
  overflow: hidden;
  position: fixed;
 ...

JavaScript

let drawingArea = $(".drawing-area-poligon");
let drawingAreaWidth = $(".drawing-area-poligon").width();
let drawingAreaHeight = $(".drawing-area-poligon").height();
let drawingAreaPosX = $(".drawing-area-poligon").position().left;
let drawingAreaPosY = $(".drawing-area-poligon").position().top;


let drawingActions = $(".action-buttons");
let drawingActionsWidth = $(".action-buttons").width();
let drawingActionsHeight = $(".action-buttons").height();

let drawingActionsPosX = drawingAreaPosX + drawingAreaWidth / 2 - drawingActionsWidth / 2;
let drawingActionsPosY = drawingAreaPosY + drawingAreaHeight + drawingActionsHeight / 2;

if (drawingArea.length) {
	drawingActions.css({
			"left": drawingActionsPosX + "px",
			"top": drawingActionsPosY + "px"
			});
}