This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Full Screen Control with extended source element

full-screen 3 source 2 fullScreenSource 1 osm 6 osm-maps 1

#####

Side Panel

Example of a full screen control with a source option definition.

Click the control in the top right corner to go full screen. Click it again to exit full screen.

If there is no button on the map, your browser does not support the Full Screen API.

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import FullScreen from 'ol/control/FullScreen.js';
    import {defaults as defaultControls} from 'ol/control/defaults.js';
    import TileLayer from 'ol/layer/Tile.js';
    import OSM from 'ol/source/OSM.js';

    const view = new View({
      center: [-9101767, 2822912],
      zoom: 14,
    });

    const map = new Map({
      controls: defaultControls().extend([
        new FullScreen({
          source: 'fullscreen',
        }),
      ]),
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: 'map',
      view: view,
    });

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Full Screen Control with extended source element</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
          .fullscreen:-webkit-full-screen {
            height: 100%;
            margin: 0;
          }

          .fullscreen:fullscreen {
            height: 100%;
          }

          .fullscreen {
            margin-bottom: 10px;
            width: 100%;
            height: 400px;
          }

          .map .ol-rotate {
            top: 3em;
          }

          .map {
            width: 80%;
            height: 100%;
            float: left;
          }

          .sidepanel {
            background: #1F6B75;
            width: 20%;
            height: 100%;
            float: left;
          }

          .sidepanel-title {
            width: 100%;
            font-size: 3em;
            color: #ffffff;
            display: block;
            text-align: center;
          }
        </style>
      </head>
      <body>
        <div id="fullscreen" class="fullscreen">
          <div id="map" class="map"></div>
          <div class="sidepanel">
            <span class="sidepanel-title">Side Panel</span>
          </div>
        </div>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "full-screen-source",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }