Add custom panel to Openlayers map

I've created a map with different Layers from OpenLayers, Openstreetmap and BingMaps.

Now I want to add a custom panel to the map. I was able to create a panel (dropdown menu), but I'm not able to put it onto the map. I've found several solutions to this online, however none of them worked so far.

enter image description here

For example: http://vasir.net/blog/openlayers/openlayers-tutorial-part-3-controls/ or http://jsfiddle.net/4zNH6/. Thank you for all the help. Here is the code from my main.js:

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import Stamen from 'ol/source/Stamen';
import VectorLayer from 'ol/layer/Vector';
import Vector from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Overlay from 'ol/Overlay';
import {fromLonLat, toLonLat} from 'ol/proj';
import sync from 'ol-hashed';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import {circular} from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import Control from 'ol/control/Control';
import * as olProj from 'ol/proj';
import XYZ from 'ol/source/XYZ';

// define the map
const map = new Map({
  target: 'map',
  view: new View({
    center: fromLonLat([16.37, 48.2]),
    zoom: 13
  })
});

sync(map);

//Adresssuche
const searchResultSource = new Vector();
const searchResultLayer = new VectorLayer({
  source: searchResultSource
});

searchResultLayer.setStyle(new Style({
  image: new Circle({
    fill: new Fill({
      color: 'rgba(0, 128, 0, 1)'
    }),
    stroke: new Stroke({
      color: '#000000',
      width: 1.25
    }),
    radius: 15
  })
}));

var element = document.getElementById('search');  
element.addEventListener('keydown', listenerFunction);

function listenerFunction(event) {
  console.log(event);
  console.log(event.keyCode);
  if (event.keyCode === 13) {

    const xhr = new XMLHttpRequest;
    xhr.open('GET', 'https://photon.komoot.de/api/?q=' + element.value + '&limit=3');
    xhr.onload = function() {
      const json = JSON.parse(xhr.responseText);
      const geoJsonReader = new GeoJSON({
        featureProjection: 'EPSG:3857'
      });  
      searchResultSource.clear(); 
      const features = geoJsonReader.readFeatures(json);
      console.log(features);
      searchResultSource.addFeatures(features);
        if (!searchResultSource.isEmpty()) {
    map.getView().fit(searchResultSource.getExtent(), {
      maxZoom: 18,
      duration: 500
    });
  }
    };
    xhr.send();


  }
}

//OpenStreetMap
const OSMbaseLayer = new TileLayer({
    type: 'base',
    source: new OSM()
}); 

// Statellit
const satellitLayer = new TileLayer({
    source: new XYZ ({
    attributions: ['Powered by Esri', 'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
    attributionsCollapsible: false,
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    maxZoom: 30
    })
});

//shape
const parkLayer = new VectorLayer({
    source: new Vector({ 
        url: 'data/park1.geojson',
        format: new GeoJSON()
    })
});

parkLayer.setStyle(new Style({
      fill: new Fill({
      color: 'green'
    }),
    stroke: new Stroke({
      color: 'green',
      width: 1.25
    }),
}));


// Layer hinzufügen
map.addLayer(OSMbaseLayer);
map.addLayer(searchResultLayer);   
 map.addLayer(parkLayer);   

const OSMbase = document.getElementById('OSMbase');
OSMbase.addEventListener('click', function(event) {
  //contr.style.color = 'ffffff';
  //Andere Layer entfernen
  map.removeLayer(satellitLayer);
  map.removeLayer(searchResultLayer);
   //OSM Layer hinzufügen
  map.addLayer(OSMbaseLayer);
  map.addLayer(searchResultLayer);
});

// Get the satellit Base-Button
const satellit = document.getElementById('satellit');
satellit.addEventListener('click', function(event) {
  //Andere Layer entfernen
  map.removeLayer(OSMbaseLayer);
  map.removeLayer(searchResultLayer);
  //Satelliten Layer hinzufügen
  map.addLayer(satellitLayer);
  map.addLayer(searchResultLayer);  
 });

//GPS Location
const GPSsource = new Vector();
const GPSlayer = new VectorLayer({
  source: GPSsource
});
map.addLayer(GPSlayer);


navigator.geolocation.watchPosition(function(pos) {
  const coords = [pos.coords.longitude, pos.coords.latitude];
  const accuracy = circular(coords, pos.coords.accuracy);
  GPSsource.clear(true);
  GPSsource.addFeatures([
    new Feature(accuracy.transform('EPSG:4326', map.getView().getProjection())),
    new Feature(new Point(fromLonLat(coords)))
  ]);
}, function(error) {
  alert(`ERROR: ${error.message}`);
}, {
  enableHighAccuracy: true
});

const locate = document.createElement('div');
locate.className = 'ol-control ol-unselectable locate';
locate.innerHTML = '<button title="Locate me">◎</button>';
locate.addEventListener('click', function() {
  if (!GPSsource.isEmpty()) {
    map.getView().fit(GPSsource.getExtent(), {
      maxZoom: 18,
      duration: 500
    });
  }
});

map.addControl(new Control({
  element: locate
}));

Here is the code from the index.html:

<!DOCTYPE html>
<html>
  <head>
  <link href="../stylesheet.css" rel="stylesheet">
    <title>Feedback</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>OpenLayers</title>
    <style>
      html, body, .fullscreen {
        width: 100%;
        height: 100%;
        margin: 0;
      }
      .arrow_box {
          position: relative;
          background: #000;
          border: 1px solid #003c88;
      }
      .arrow_box:after, .arrow_box:before {
          top: 100%;
          left: 50%;
          border: solid transparent;
          content: " ";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none;
      }
      .arrow_box:after {
          border-color: rgba(0, 0, 0, 0);
          border-top-color: #000;
          border-width: 10px;
          margin-left: -10px;
      }
      .arrow_box:before {
          border-color: rgba(0, 60, 136, 0);
          border-top-color: #003c88;
          border-width: 11px;
          margin-left: -11px;
      }
      .arrow_box {
        border-radius: 5px;
        padding: 10px;
        opacity: 0.8;
        background-color: black;
        color: white;
      }
      #popup-content {
        max-height: 200px;
        overflow: scroll;
      }
      #popup-content th {
        text-align: left;
        width: 125px;
      }

      .locate {
        top: 90px;
        left: 8px;
    }

    </style>
  </head>
  <body>
  <div class="header">
    </div>
            <div class="title">
            <h1>Karte</h1>
    </div>
    <ul id="homebar">
    <li>
    <a href="../home/start_content_grp.htm"> Home </a>
    </li>
    <li> 
    <a href="../projekt/projekt.htm"> Projekt </a>
    </li>
    <li> 
    <a href="../team/team.htm"> Team </a>
    </li>
    <li> 
    <a href="map.htm"> Karte </a>
    </li>
    <li> 
    <a href="../uebungsbeispiele/beispiele.htm"> &Uumlbungsbeispiele </a>
    </li>
    <li>
    <a href="../kontaktformular/formular.htm"> Kontaktformular </a>
    </li>
    <li>
    <a href="../impressum/impressum.htm"> Impressum </a>
    </li>
    <li>
    <a href="../intranet/start_content_grp_intranet.htm"> Intranet </a>
    </li>
    </ul>
    <input type="text" id="search"  placeholder="Adresssuche..."></input>
      <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    <div style="margin:20px; margin-top:5px;" class="codebox">
    <dt style="height:25px; text-align: left;">
    <input type="button" value="Layeroptionen" style="width:100px; font-size:12px; margin:5px; padding:5px;" onclick="var spoiler = $(this).parents('.codebox').find('.content').toggle('slow');
    if ( this.value == 'Layeroptionen' ) { this.value = 'Layeroptionen'; } else { this.value = 'Layeroptionen'; };
    return false;"></dt>
    <dd><div class="content" name="spoiler" style="display: none;">
    <div id="control">
    <label class="radio">
        <br><input class="rb" id="OSMbase" type="radio" name="foobar" checked>
        Base-Layer OSM
        </label><br>
        <label class="radio">
         <input class="rb" id="satellit" type="radio" name="foobar">
         Sattelite
        </label>
      </div>
    </div></dd></div>
    <script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script> 
    <div id="map" class="fullscreen">
        <select id="combo">
        <option value="baselayer-osm">Base-Layer OSM</option>
        <option value="sattelite">Sattelite</option>
    </select>
</div>
    <!-- <div class="arrow_box" id="popup-container">
      <div id="popup-content"></div> -->
    </div>
  </body>
</html>