Blancer.com Tutorials and projects

So, I have this personal project that I’m trying to do more for studying purposes. It would be two timers to monitor two different events in a week, in which one would countdown the remain time of a occuring event (how much days/hours until the event ends) and the other would countdown the remaining time until the next event begins. then they would switch when it marks 0 (the current one would turn into the next and vice-versa).

Exemple: Event A would start on Friday 8PM and end on Monday 2PM, Event B would be Tuesday from 6PM until 7PM. Timer 1 (Current Event) would calculate the duration of Event A and show the countdown of the remaining time until it reaches the end in days and/or hours, while Timer 2 (Next Event) would do the same, but countingdown to show how long until it’s time for Event B to begin, on the same format (dd/hh:min:s). The moment Event A ends, Timer 1 should freeze at 00 00:00 and stays like that while Time 2 goes until the end, and only then the events would switch id’s so Event B is now Current Event and Event A is Next Event (they are weekly and will loop indefinitely).

My major struggle now is to figure how I could set the timers to start and end on given weekdays, with a specific time, and not static days, since the events have fixed weekdays to happen.

I’ve looked up the Date() method but couldn’t figure how to use it since it requests specific dates as parameters.

I’d like to keep the code as simple as possible, but any tips, suggestions, advices or possible solutions are very welcomed even if they involve more advanced ways. JavaScript is not my forte, but I think I can manage to do the loops and all the other stuff on my own – just need to figure this out to have a kickstart.

I am using Next.js with a component that is first skeleton-loaded while the website waits for the data (using tanstack react query):

if (isPending) {
    return <MyComponent
        name={"Loading...."}
        hobbies={[]}
    />
}

return <MyComponent name={data.name} hobbies={data.hobbies}

Inside of this component I have a state for the hobbies so that the user can mutate the hobbies list locally before sending it to the database.

function onSubmit() { // update to server }

function MyComponent(props) {
    const [hobbies, setHobbies] = useState(props.hobbies);
    
    return (
        <form>
           <h1 key={name}>{name}</h1>
           <MyList hobbies={hobbies} />
           <div>
               <input />
               <button type="button" onClick={() => {}}>add</button>
           </div>
           <button>submit</button>
        </form>
    )
}

However once the data loads, while the other data (the name) updates, the hobbies variable does not, and it stays as an empty list. This is because of the key argument I have on the h1, but when I add the key to MyList, it does not re-render. I have to go to another url then come back for it to reload the hobbies argument.

I assume this is because I am initially setting the state of the hobbies as empty, and then once the data loads, it doesn’t reupdate the state, but how do I fix this?

So I’m trying to build this page in a very barebones geocities style server.
It lets me use some JS, so I was trying to build some component to do this idea I had, I have built this “blog” page, and inside the directory there is a posts folder I created so I could put the posts inside as .txt files.
My idea was to save time by while building the posts component it would run through the files on this folder and inject the each text into a post:

    class Posts extends HTMLElement {
    constructor() {
      super();
    }
  
    connectedCallback() {

      this.innerHTML += `
        <div class="card">
          <h2>TEST POST</h2>
          <h5>Title description, Dec 7, 2017</h5>
          <object data="posts/test.txt">
        </div>
      `;
    }
  }
 
  customElements.define('posts-component', Posts);

Is that possible in more vanilla JS?
If so, how?

Before anyone asks, I’m just doing this for fun, for a little “challenge”.

I’ve installed a WordPress theme where the menu items of the headers go onto multiple lines when the screen size gets smaller. Only when the screen gets too small, it goes to the (mobile) hamburger menu (see image 3). Firstly it goes onto 2 lines and then 3 lines. Does someone know how to fix this issue? I only want it to stay onto 1 line or that the hamburger menu appears when it doesn’t fit on 1 line.

How it is on a big screen

How it gets on a smaller screen

How it gets on a smaller screen (hamburger menu)

Thanks in advance!

I don’t really know how to fix this.

I created an online form with several fields, and I want the ability to save the progress and load it again later.

When I save it, it seems to work okay (all the info is in the json file) but when I load the saved file, not all the data is added back into the online form. Specifically the values for “regions” and “borders” are not loaded.

Can anyone see what I’m missing? Thanks.

/**
 * Saves the progress of the form inputs to a JSON file.
 */
function saveProgress() {
    const settingsForm = document.getElementById('settingsForm');
    const regionsForm = document.getElementById('regionsForm');
    const bordersForm = document.getElementById('bordersForm');
    const commandsForm = document.getElementById('commandsForm');

    const settingsData = new FormData(settingsForm);
    const regionsData = new FormData(regionsForm);
    const bordersData = new FormData(bordersForm);
    const commandsData = new FormData(commandsForm);

    let jsonObject = {};
    settingsData.forEach((value, key) => {
        if (key === 'deployments') {
            jsonObject[key] = value;
        } else if (key === 'size' || key === 'difficulty') {
            jsonObject[key] = document.querySelector(`input[name="${key}"]:checked`).value;
        } else {
            jsonObject[key] = value;
        }
    });
    regionsData.forEach((value, key) => {
        jsonObject[key] = value;
    });
    bordersData.forEach((value, key) => {
        jsonObject[key] = value;
    });
    commandsData.forEach((value, key) => {
        jsonObject[key] = value;
    });

    jsonObject["regions"] = document.getElementById('regions').value;
    jsonObject["borders"] = document.getElementById('borders').value;

    const jsonString = JSON.stringify(jsonObject, null, 2);
    const blob = new Blob([jsonString], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = 'progress.json';
    downloadLink.click();
    URL.revokeObjectURL(url);
}

/**
 * Loads the progress from a JSON file and populates the form inputs.
 */
function loadProgress() {
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'application/json';
    fileInput.onchange = (event) => {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                const jsonObject = JSON.parse(e.target.result);
                document.getElementById('engine').value = jsonObject.engine || '1';
                document.getElementById('version').value = jsonObject.version || '1';
                document.getElementById('title').value = jsonObject.title || '';
                document.getElementById('key').value = jsonObject.key || '';
                document.querySelector(`input[name="size"][value="${jsonObject.size}"]`).checked = true;
                document.querySelector(`input[name="difficulty"][value="${jsonObject.difficulty}"]`).checked = true;
                document.getElementById('players').value = jsonObject.players || '2,3,4,5,6,7,8,9,10,12,14,15,16,18,20,21,22,24';
                document.getElementById('objectives').value = jsonObject.objectives || 'Standard, Assassin, Mercenary';
                document.getElementById('reserves').value = jsonObject.reserves || 'Escalate, Escalite, FlatRate(6)';
                document.getElementById('reinforcements').value = jsonObject.reinforcements || 'Border, Path, Anywhere';
                document.getElementById('initialTroops').value = jsonObject.initialTroops || '3';
                document.getElementById('kind').value = jsonObject.kind || '';
                document.getElementById('deployments').value = jsonObject.deployments || '';
                document.getElementById('regions').value = jsonObject.regions || '';
                document.getElementById('borders').value = jsonObject.borders || '';
                document.getElementById('command').value = jsonObject.command || '';
            };
            reader.readAsText(file);
        }
    };
    fileInput.click();
}

This is what the saved json file looks like

{
  "engine": "1",
  "version": "1",
  "title": "test-new",
  "key": "test-new",
  "size": "Medium",
  "difficulty": "Intermediate",
  "players": "2,3,4,5,6,7,8,9,10,12,14,15,16,18,20,21,22,24",
  "objectives": "Standard, Assassin, Mercenary",
  "reserves": "Escalate, Escalite, FlatRate(6)",
  "reinforcements": "Border, Path, Anywhere",
  "initialTroops": "3",
  "regions": "region1nr2",
  "borders": "r1,r2nr2,r3",
  "command": ""
}

But the regions and borders won’t load into the form again.

I am making a quiz that times out after 90 mins. I used display logic on each question (if blockTimeFlag = 0) to skip to the end after the 90 mins is up but now the scores aren’t displaying at the end. It was displaying before I added the display logic. How do I get the scores to show up again without removing the display logic. I have embedded data set as blockTimeFlag = 0
Here is the code.

var headerCont = document.createElement("div");  
 headerCont.className = "header-cont";  
 headerCont.id = "header_container";  
 var header = document.createElement("div");  
 header.className = "header"  
 header.id = "header_1";  
 var timer = document.createElement("div");  
 timer.className = "timer";  
 timer.id = "timer_1";  
 timer.innerHTML =  "<span id='time'>90:00</span>";  
 headerCont.appendChild(header);  
 header.appendChild(timer);  
 document.body.insertBefore(headerCont, document.body.firstChild);
function startTimer(duration, display) {  
  var timer = duration, minutes, seconds;  
  var myTimer = setInterval(function() {  
   minutes = parseInt(timer / 60, 10)  
   seconds = parseInt(timer % 60, 10);  
   minutes = minutes < 10 ? "0" + minutes : minutes;  
   seconds = seconds < 10 ? "0" + seconds : seconds;  
   var text = ('innerText' in display)? 'innerText' : 'textContent';
   display[text] = minutes + ":" + seconds;  
   if (--timer < 0) {  
    clearInterval(myTimer);  
    timeOver();  
   }  
  }, 1000);  
 }  
 var timerSeconds = 5400,  
 display = document.querySelector('#time');  
 startTimer(timerSeconds, display);  
 var timeOver = function() {  
     document.getElementById("timer_1").innerHTML = "Time is up!";
Qualtrics.SurveyEngine.setEmbeddedData("blockTimeFlag", "1");    
$('NextButton').click();
}

I’m writing a suite of Jest tests, and the following question came up. How can I test that a function simply returns if it receives an invalid argument? For example, I would like to test that the function changeAge below returns immediately if it receives a newAge or id that is not a whole number.

function changeAge (id, newAge) {
  const isWholeNumber = num => Number.isInteger(newAge) && newAge >= 0
  if (!isWholeNumber(id) || !isWholeNumber(newAge)) {
    return
  } 

  const person = getPerson(id)
  person.age = newAge
}

In this example, there’s no way in the test to retrieve the person data to verify whether the age property was changed.

I am attempting to get a customer logo to load when a user signs into my app. To do that I am using the views function below to generate the logo url:

Views:

def view_company_logo(request):

print("GETTING LOGO")

client = Client.objects.get(user=request.user)
logo = ""
try:
    logo = client.customer.first().logo.logo.url
    print("GOT LOGO")
    return JsonResponse({"logo": logo, "media_url": settings.MEDIA_URL}, safe=False)

except Exception as e:
    print(e)
    print(f'ERROR FOR LOGO {e}')

    return JsonResponse({"logo": logo}, safe=False)

The function is attached the url below:

url(r"^get/company_logo/$", views.view_company_logo),

This is called in the base.html file in order to show the

  $(document).ready(function () {
  function get_company_logo() {
    console.log('HERE SEAN!!!!!!!');
    log('TEST');

    $.ajax({
      url: '/get/company_logo/',
      method: 'GET',
      success: function (data) {
        return create_image(data['logo'])





      },
      error: function () {
        console.log('HERE IS THE ERROR!!!')
        log('HERE IS THE ERROR!!!')
      },
    
    })
  }

  function create_image(logo) {
    document.getElementById("logo").src = logo;

  }


  get_company_logo()

Which connects to the source of this image that gets generated when the pages loads:

      <img class="img-square center" id="logo" alt="logo" style="opacity: 1" height="45" width="125">

Could someone tell me why the image is not loading? It seems like the function is never called and I am not sure why.

Good afternoon everyone. I am working to embed reports in our application with the report service provider of Domo. I have created the following component.

import React from 'react';

const generateFormHtml = (actionUrl, embedToken) => (
    `
    <!DOCTYPE html>
    <html>
        <body>
            <form id="embedForm" action="${actionUrl}" method="post">
                <input type="hidden" name="embedToken" value="${embedToken}" />
            </form>
            <script>
                        document.getElementById("embedForm").submit();
            </script>
        </body>
    </html>
    `
);

const generateDataUri = (html) => `data:text/html;charset=utf-8,${encodeURI(html)}`;

const ReportEmbedder = ({ actionUrl, embedToken }) => {
    const htmlContent = generateFormHtml(actionUrl, embedToken);
    const formDataUri = generateDataUri(htmlContent);

    return (
        <iframe
            className="panel embed-panel"
            src={formDataUri}
            title="Embedded Form"
            allowtransparency="false"
        />
    );
};

export default ReportEmbedder;

That component is being called inside the main page inside the html

        /// actionUrl = 'https://public.domo.com/embed/pages/XXXXX'
        /// embedToken = 'full_length_embed_token'

            <div className="panel-container">
                    <ReportEmbedder
                            actionUrl={actionUrl}
                            embedToken={embedToken}
                        />
            </div>

My problem is that when the form renders, it seems to be converting the https url to http with a port associated.

HTTP ERROR 403 Access Denied
URI: http://public.domo.com:443/embed/pages/XXXXXX
STATUS: 403
MESSAGE: Access Denied

Does anyone have any idea how this could be happening or where to look? I have a feeling it is just a configuration issue that I have overlooked but I have yet to find it.

I have worked with debugging to ensure that the URI states https through the entire process. I have confirmed that in the generateDataUri step, the encoding is not over-riding the https setting. I have had a few other engineers peer review but they have been just as confused as myself.

I am expecting the https link to continue so that the iframe loads the report from the endpoint.

I’m fairly new to coding and have been learning and building a personal archival database using SQL over the past few months. However, I would also like to develop a simple (at first) UI to use for viewing and interacting with the stored data. Think along the lines of a library or museum’s digital catalogue where you have a list of entries you can scroll through, each showing basic info, but then can click on any one entry to see more in-depth (linked) data.

What language would you suggest using for this? In preliminary searching, it seems like either JavaScript or a C language would be good options, but I don’t have enough experience to feel confident in fully deciding without additional input. What would you say are the benefits and drawbacks of different possibilities?

For greater detail:

• I’m planning on using PostgresSQL because (afaik) it’s better at handling complex data relations and large data sets, which is ideal for my goals.

• Most of my experience is in data collection, table creation, data manipulation/interpretation, and similar areas. While this is a personal project, I am hoping to learn some functional skills that could be applicable to a career in archival work (such as with a library, archive, museum, historical records, etc) and anthropology/archaeology, which is what I’m going to school for.

• I have basic background knowledge of general programming principles, as well as previous beginner courses in JavaScript and Python, so no matter what I’ll be learning a language (or two) from a beginner level.

please am having issue creating a rounded custom image indicator around album image, the dot indicator is breaking out on page load but when i press play it move back to the circle , html, i want to create custom music player, any suggestion we do

const img = document.querySelector("#img");
const playPause = document.querySelector("#playpause");
const playPauseBtn = document.querySelector("#playpause-btn");
const audio = document.querySelector("#audio");
const title = document.querySelector("#title");
const prevBtn = document.querySelector("#prevbtn");
const nextBtn = document.querySelector("#nextbtn");
const progress = document.querySelector("#progress");
const progressIndicator = document.querySelector(".progress-indicator");
const repeatBtn = document.querySelector("#repeat");

const songs = [{
    path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/1.mp3',
    displayName: 'Yıldız Tozu',
    artist: 'Ozbi',
    cover: "https://images.genius.com/ee202c6f724ffd4cf61bd01a205eeb47.1000x1000x1.jpg",
  },
  {
    path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/2.mp3',
    displayName: 'You're Somebody Else',
    artist: 'flora cash',
    cover: "https://pbs.twimg.com/media/D2NZH-2U4AAL9Xs.jpg",
  },

];

let songIndex = 2;
let isPlaying = false;

function playSong() {
  isPlaying = true;
  playPauseBtn.classList.replace("fa-play", "fa-pause");
  audio.play();
}

function pauseSong() {
  isPlaying = false;
  playPauseBtn.classList.replace("fa-pause", "fa-play");
  audio.pause();
}

function loadSong(song) {
  img.src = song.cover;
  title.textContent = song.displayName;
  audio.src = song.path;
}

function prevSong() {
  songIndex--;
  if (songIndex < 0) {
    songIndex = songs.length - 1;
  }
  loadSong(songs[songIndex]);
  playSong();
}

function nextSong() {
  songIndex++;
  if (songIndex > songs.length - 1) {
    songIndex = 0;
  }
  loadSong(songs[songIndex]);
  playSong();
}

function updateProgress(e) {
  if (isPlaying) {
    const {
      duration,
      currentTime
    } = e.target;
    const progressPercent = (currentTime / duration) * 100;
    progress.value = progressPercent;
    const indicatorAngle = (progressPercent / 100) * 360;
    const indicatorX = Math.cos((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
    const indicatorY = Math.sin((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
    progressIndicator.style.transform = `translate(${indicatorX}px, ${indicatorY}px)`;
  }
}

function progressSlide(e) {
  const {
    value
  } = e.target;
  const progressTime = Math.ceil((audio.duration / 100) * value);
  audio.currentTime = progressTime;
  if (!isPlaying) {
    const indicatorAngle = (value / 100) * 360;
    const indicatorX = Math.cos((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
    const indicatorY = Math.sin((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
    progressIndicator.style.transform = `translate(${indicatorX}px, ${indicatorY}px)`;
  }
}

function repeat() {
  repeatBtn.classList.toggle('color');
  if (repeatBtn.classList.contains("color")) {
    audio.loop = true;
  } else {
    audio.loop = false;
  }
}

playPause.addEventListener("click", () => (isPlaying ? pauseSong() : playSong()));
prevBtn.addEventListener("click", prevSong);
nextBtn.addEventListener("click", nextSong);
audio.addEventListener("timeupdate", updateProgress);
progress.addEventListener("input", progressSlide);
repeatBtn.addEventListener("click", repeat);

loadSong(songs[songIndex]);

.music-player-unique {
  max-width: 350px;
  margin: auto;
}

.disc-container-unique {
  position: relative;
  width: 300px;
  height: 300px;
  margin: auto;
}

.disc-image-unique {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #343a40;
}

.progress-container-unique {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid black;
  box-shadow: 0 17px 33px rgb(189 190 193 / 1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-unique {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  cursor: pointer;
}

.progress-indicator {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #007bff;
  border-radius: 50%;
  top: -8px;
  left: -8px;
  transform: translateX(0);
}

.song-title-unique {
  font-size: 18px;
  font-weight: bold;
  color: #343a40;
}

.controls-unique {
  display: flex;
  justify-content: center;
  align-items: center;
}

.controls-unique .btn-unique {
  background-color: transparent;
  border: none;
  font-size: 32px;
  color: #343a40;
  margin: 0 10px;
}

.controls-unique .btn-unique:hover {
  color: #007bff;
}

<div class="container text-center mt-5">
  <div class="music-player-unique">
    <div class="disc-container-unique">
      <img id="img" src="/src/images/music-1.jpg" alt="Music Disc" class="disc-image-unique">
      <div class="progress-container-unique">
        <input type="range" id="progress" value="0" class="progress-unique">
        <div class="progress-indicator"></div>
      </div>
    </div>
    <div class="song-title-unique mt-3" id="title">Song Title</div>
    <div class="controls-unique mt-4">
      <button id="repeat" class="btn-unique"><i class="fa-regular fa-repeat"></i></button>
      <button id="prevbtn" class="btn-unique"><i class="fa-regular fa-backward"></i></button>
      <button id="playpause" class="btn-unique"><i id="playpause-btn" class="fa-regular fa-play"></i></button>
      <button id="nextbtn" class="btn-unique"><i class="fa-regular fa-forward"></i></button>
      <button id="list" class="btn-unique"><i class="fa-regular fa-list"></i></button>
    </div>
    <audio id="audio"></audio>
  </div>
</div>

i have tried my best to make it work but seem not working, the dot not working well

I’m curious about the feasibility of using the browser extension’s API directly from a standard website. Specifically, I want to understand if there’s a way to interact with the browser API from my web page’s JavaScript while complying with all security measures. I have some background in developing extensions, so I’m familiar with content scripts, background scripts, and message passing. Still, I’m unsure if it’s possible and how to apply these concepts in this context. It should be impossible, but asking is better than giving up.

Here are some aspects I’m curious about:

1. Is it possible for a web page to call a browser API?
2. Ensure that such interaction complies with browser security policies and respects user privacy. In extensions, this is the role of the manifest.json. Is there any other similar tool for websites?

From my understanding, content scripts might play a role, but I am unclear on how to set this up securely. Can anyone provide insights, examples or prototypes? I’m super curious about them.

To be clear, I’m currently developing an extension, not a website, but I want to explore, go crazy, and see all the possibilities and constraints. Any pointers to relevant, meaningful documentation or information would be greatly appreciated! They should be related to websites, not extensions.

Enabled WPRocket Delay JavaScript execution in WordPress and it works everywhere EXCEPT home page for some reason? Checking it by going to network tab and for every page scripts are delayed just fine but not on the home page.

Followed these instructions: https://docs.wp-rocket.me/article/1349-delay-javascript-execution

Thoughts?

When i am going to clicking print button print dialog box is working fine with my side, but some users are complaining they are not getting print dailog after clicking print button into production site, i have check from my side locally and production but both side working fine not able to find any issue from my side, please suggest.

Below is my html

below is my angular component methods on button click

  public downloadPDF() {
    var printContents = document.getElementById('contentToConvert').innerHTML;
    debugger;
    if (this.Popup(printContents)) {
    }
  }

 Popup(data) {
    debugger;
    var mywindow = window;
    if (this.islogo)
    mywindow.document.write('<!DOCTYPE html><html><head><link rel="stylesheet" href="style.css" /><style>.container-fluid {width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto}div {box-sizing: border-box}.label {font-weight: 600 !important;margin-right: 5px !important;}label {display: inline-block;margin-bottom: .5rem}.items-group {border-style: solid;border-color: #000;border-width: 1pt 1pt 1pt 1pt;border-radius: 5pt;padding: 3pt 3pt 3pt 3pt;margin: 9pt 0 9pt 0}.logotipo {width: 6cm;height: 4cm;margin: -.5cm}.label {font-weight: 500}.address p, .disclaimer {font-size: 10pt}.signature-ield {padding-bottom: 24pt;border-bottom: solid #000 1pt}.align-r {text-align: right}.align-l {text-align: left}.align-c {text-align: center}.border-none {border: none !important}.col-1 {flex: 0 0 .33333333%;max-width: 8.33333333%}.col-12 {flex: 0 0 100%;max-width: 100%;}.col-4 {flex: 0 0 33.33333333%;max-width: 33.33333333%;}.no-gutters > .col, .no-gutters > [class*=col-] {padding-right: 0;padding-left: 0}.col-5 {flex: 0 0 41.66666667%;max-width: 41.66666667%}.col-3 {flex: 0 0 25%;max-width: 25%}.no-gutters > .col, .no-gutters > [class*=col-] {padding-right: 0;padding-left: 0}.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {width: 100%;position: relative;min-height: 1px;display: inline-block}.float-left {float: left !important}.col-10 {flex: 0 0 83.33333333%;max-width: 83.33333333%}.col-2 {flex: 0 0 16.66666667%;max-width: 16.66666667%;}.col-6 {flex: 0 0 50%;max-width: 50%}.no-gutters > .col, .no-gutters > [class*=col-] {padding-right: 0;padding-left: 0}h1 {font-size: 18pt;font-weight: 500;margin-bottom: .5cm}.card-title, .text-title, h1, h2, h3, h4, h5, h6 {color: #332e38}.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family: inherit;font-weight: 500;line-height: 1.2}.h4, h4 {font-size: 1.2195rem}header {font-size: 10px}@page {size: A4;margin-top: 11mm;margin-bottom: 5mm;margin-left: 11.98mm;margin-right: 11.98mm}.page-header, .page-header-space {height: 100px;}.page-footer, .page-footer-pace{height: 80px;}.page-footer {position: fixed;bottom: 0;width: 100%;padding-left: 20px;/*border-top: 1px solid black; for demo *//*background: yellow; for demo */}.page-header {position: fixed;top: 0mm;width: 100%;/*border-bottom: 1px solid black; for demo *//*background: yellow; for demo */padding-left: 20px;}.page {page-break-after: always;}@page {margin: 20mm}@media print {thead {display: table-header-group;}tfoot {display: table-footer-group;}button {display: none;}body {margin: 0;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;letter-spacing: .3px;line-height: 1.6;}}</style></head><body><div class="page-header" style="z-index:1000;background: white">');
    else
    mywindow.document.write('<!DOCTYPE html><html><head><link rel="stylesheet" href="style.css" /><style>.container-fluid {width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto}div {box-sizing: border-box}.label {font-weight: 600 !important;margin-right: 5px !important;}label {display: inline-block;margin-bottom: .5rem}.items-group {border-style: solid;border-color: #000;border-width: 1pt 1pt 1pt 1pt;border-radius: 5pt;padding: 3pt 3pt 3pt 3pt;margin: 9pt 0 9pt 0}.logotipo {width: 6cm;height: 4cm;margin: -.5cm}.label {font-weight: 500}.address p, .disclaimer {font-size: 10pt}.signature-ield {padding-bottom: 24pt;border-bottom: solid #000 1pt}.align-r {text-align: right}.align-l {text-align: left}.align-c {text-align: center}.border-none {border: none !important}.col-1 {flex: 0 0 .33333333%;max-width: 8.33333333%}.col-12 {flex: 0 0 100%;max-width: 100%;}.col-4 {flex: 0 0 33.33333333%;max-width: 33.33333333%;}.no-gutters > .col, .no-gutters > [class*=col-] {padding-right: 0;padding-left: 0}.col-5 {flex: 0 0 41.66666667%;max-width: 41.66666667%}.col-3 {flex: 0 0 25%;max-width: 25%}.no-gutters > .col, .no-gutters > [class*=col-] {padding-right: 0;padding-left: 0}.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {width: 100%;position: relative;min-height: 1px;display: inline-block}.float-left {float: left !important}.col-10 {flex: 0 0 83.33333333%;max-width: 83.33333333%}.col-2 {flex: 0 0 16.66666667%;max-width: 16.66666667%;}.col-6 {flex: 0 0 50%;max-width: 50%}.no-gutters > .col, .no-gutters > [class*=col-] {padding-right: 0;padding-left: 0}h1 {font-size: 18pt;font-weight: 500;margin-bottom: .5cm}.card-title, .text-title, h1, h2, h3, h4, h5, h6 {color: #332e38}.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family: inherit;font-weight: 500;line-height: 1.2}.h4, h4 {font-size: 1.2195rem}header {font-size: 10px}@page {size: A4;margin-top: 11mm;margin-bottom: 5mm;margin-left: 11.98mm;margin-right: 11.98mm}.page-header, .page-header-space {height: 10px;}.page-footer, .page-footer-pace{height: 10px;}.page-footer {position: fixed;bottom: 0;width: 100%;padding-left: 20px;/*border-top: 1px solid black; for demo *//*background: yellow; for demo */}.page-header {position: fixed;top: 0mm;width: 100%;/*border-bottom: 1px solid black; for demo *//*background: yellow; for demo */padding-left: 20px;}.page {page-break-after: always;}@page {margin: 5mm}@media print {thead {display: table-header-group;}tfoot {display: table-footer-group;}button {display: none;}body {margin: 0;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;letter-spacing: .3px;line-height: 1.6;}}</style></head><body><div class="page-header" style="z-index:1000;background: white">');

    if (this.islogo)
    mywindow.document.write('<img src="/assets/images/logo.png" width="200" height="68" alt=""  />');

    mywindow.document.write('</div><div class="page-footer" style="padding: 70px 0px 0px 0px;" >');
    if(this.islogo)
      mywindow.document.write('<div style="border-top: 1px solid black; font-size: 8px; z-index:1000;background: white">hi how are you</div>');
    mywindow.document.write('</div><table><thead><tr><td><!--place holder for the fixed-position header--><div class="page-header-space"></div></td></tr></thead><tbody><tr><td><!--*** CONTENT GOES HERE ***--><div class="page">');
    mywindow.document.write(data);
    debugger;
    mywindow.document.write('</div></td></tr></tbody><tfoot><tr><td><!--place holder for the fixed-position footer--><div class="page-footer-space"></div></td></tr></tfoot></table></body></html>');
    mywindow.print();
    mywindow.close();

    return true;
  }

I can’t manage to change my code to form where I will obtain switch off of the entire menu everytime I will click on the background outside this menu. For now only orange background part has this option and I want to switch off the entire menu including part with black background when I will click outside.

I was trying to add another addEventListener and I have experimented with code inside if… then… statements but it wasn’t work as I want.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="hamburger" title="Open menu">
        <span class="cross-line"></span>
        <span class="cross-line"></span>
        <span class="cross-line"></span>
    </div>
    <ul class="sidebar">
        <li class="menu"><i class="fas fa-dove"></i>News from SH-Lab
        <div class="item">
      <a href="news.html">News</a>
      <a href="projekty.html">Projects</a>
      <a href="goals.html">Main goals</a>
       <a href="pasja.html">Pasja elektroniki</a>
       <a href="pasjainfo.html">Informatyka i programowanie</a>
       <a href="machining.html">Machining</a></div>
      <li class="menu"><i class="fas fa-lightbulb"></i>Energy
        <div class="item">
          <a href="plazma.html">Plasma</a>
          <a href="source.html">Źródła energii</a>
          <a href="hydrogen.html">Energia z wodoru</a>
          <a href="water.html">Water power</a>
          <a href="reaktoranihilacyjny.html">Reaktor anihilacyjny</a>
          <a href="piezo.html">Pola i piezoelektryczność</a>
          <a href="bezw.html">Prąd z bezwładności</a>
          <a href="teg.html">Prąd z efektu Seebecka</a>
          <a href="nap2.html">Various inertial propulsion types</a>
          <a href="fg.html">Fale grawitacyjne</a>
              <a href="spring.html">Spring motor</a>
        <a href="powerplant.html">Power plant</a>
        <a href="magrotor.html">Spring magnetic rotor</a>
         <a href="several.html">Several maglev techniques</a>
         <a href="thermal.html">Thermal precise propulsion</a>
         <a href="inertialrail.html">Inertial technics</a>
         <a href="train.html">Autonomous motion train</a>
         <a href="elektromagnetyzm.html">Elektromagnetyzm</a>
         <a href="wszech.html">Wszechświat i technologia</a>
         <a href="genst.html">Generator tarczowy</a>
         <a href="gravitypowerplant.html">Elektrownia</a></div></li>
         <li class="menu"><i class="fas fa-atom"></i>New physic
        <div class="item">
        <a href="fusion.html">Fuzja</a>
        <a href="grawitacja.html">Grawitacja</a>
        <a href="magneticacc.html">Magnetic accelerator</a>
        <a href="gravitycontrol.html">Gravity control</a>
        <a href="pole.html">Pole magnetyczne</a>
        <a href="inertial.html">Inertial fields, tachion vortexes</a>
        <a href="neutrino.html">Neutrino</a>
        <a href="neznane.html">Nieznane siły kosmosu</a>
        <a href="polesilowe.html">Pole siłowe</a>
        <a href="tbpm.html">3-poles magnetic field</a>
        <a href="cm.html">Ciemna materia</a>
        <a href="antym.html">Antymateria</a>
        <a href="antyg.html">Antygrawitacja czy inercja</a>
        <a href="kawit.html">Kawitacja i implozja</a>
        <a href="tel.html">Teleportacja i superkomputery</a>
        <a href="czas.html">Zjawisko czasu</a>
         <a href="napb.html">Napęd bezwładnościowy</a>
         <a href="nap1.html">Napęd 4-rolkowy</a>
         <a href="thesituation.html">The Situation</a>
         <a href="geopropulsion.html">Geopropulsion</a></div></li>
        <li class="menu"><i class="fas fa-dna"></i>Genetics and chemistry
        <div class="item">
        <a href="modyfikacje.html">Modyfikacje wirusów</a>
        <a href="chemia.html">Chemia w przyrodzie</a>
        <a href="genetyka.html">Genetyka</a>
        <a href="reactions.html">Odmienne reakcje chemiczne</a>
        <a href="fuels.html">Paliwa</a>
        <a href="arvir.html">Replikatory</a>
        <a href="bioinformatyka.html">Bioinformatyka</a>
        <a href="gmo.html">GMO</a>
        <a href="telomery.html">Telomery</a>
        <a href="af.html">Sztuczna fotosynteza</a>
        <a href="tg.html">Terapie genowe</a>
        <a href="klon.html">Klonowanie</a>
        <a href="komorki.html">Komórki macierzyste</a>
        <a href="plastik.html">Plastik i bakterie</a>
        <a href="paliwo.html">Biopaliwo i algi</a></div>
        <li class="menu"><i class="fas fa-globe-africa"></i>Civilization problems
        <div class="item">
        <a href="kardaszew.html">Skala Kardaszewa</a>
        <a href="elektronika.html">Przyszłość elektroniki</a>
        <a href="iiws.html">Tajemnice II WŚ</a>
        <a href="nowewyzwania.html">Nowe wyzwania</a>
        <a href="swiatodpodszewki.html">Świat od podszewki</a>
        <a href="kregi.html">Kręgi zbożowe</a>
        <a href="wszechswiat.html">Wszechświat wczoraj i dziś</a>
        <a href="przeszlosc.html">Przeszłość i teraźniejszość</a>
        <a href="coanda.html">Efekt Coandy</a>
        <a href="podroze.html">Podróże międzyplanetarne</a>
        <a href="urzadzenia.html">Urządzenia i generatory napędu</a>
        <a href="cywilizacja.html">Cywilizacja a religia</a>
        <a href="pleiadians.html">Pleiadians and the others</a>
        <a href="medycyna.html">Medycyna</a>
        <a href="system.html">System</a>
        <a href="kata.html">Katastrofy-dzień sądu</a>
        <a href="cyborg.html">Cyborgizacja, a robotyzacja</a>
        <a href="ziemia.html">Ziemia</a>
        <a href="inertialmag.html">Napęd magnetyczno-inercyjny</a></div></li>
        <li class="menu"><i class="fas fa-rocket"></i>Space exploration
        <div class="item">
        <a href="robotics.html">Robotics</a>
        <a href="device.html">The device</a>
        <a href="exoplanets.html">Planety pozasłoneczne</a>
        <a href="gk.html">Górnictwo kosmiczne</a>
        <a href="naprak.html">Napęd rakietowy</a>
        <a href="nrem.html">Eksploracja Marsa</a>
        <a href="seti.html">SETI</a>
        <a href="ftl.html">FTL Travel</a>
        <a href="gwiazdy.html">Gwiazdy</a>
        <a href="galaktyki.html">Galaktyki</a>
        <a href="solarsys.html">System słoneczny</a>
        <a href="planety.html">Planety</a>
        <a href="gyro.html">Gyro-propulsion</a>
        <a href="mar.html">Rotor</a>
         <a href="thepropulsion.html">The Propulsion</a>
         <a href="inertia.html">Inertialess propulsion</a>
         <a href="gravityprop.html">Gravity propulsion engine</a>
         <a href="wobble.html">A wobbling drive</a>
         <a href="nap.html">Napęd inercyjny typ 2</a>
         <a href="spacestations.html">Stacje kosmiczne</a>
         <a href="jolt.html">Jolt drives</a></div></li>
        <li class="menu"><i class="fas fa-microchip"></i>Nanotechnology
        <div class="item">
        <a href="nanorobotics.html">Nanorobots</a>
        <a href="nanotechnics.html">Nano-technics</a>
        <a href="zapis.html">Zapis danych w skali atomowej</a>
        <a href="super.html">Supermateriały</a></div></li>
        <li class="menu"><i class="fas fa-donate"></i>Donations, contact &amp; support
        <div class="item">
        <a href="donation.html">Make donation</a>
        <a href="contact.html">Contact</a>
        <a href="support.html">Other support</a>
        <a href="questions.html">Questions or comments</a>
        <a href="get.html">Get involved</a>
        <a href="faq.html">FAQ</a></div></li>

@import url('https://fonts.googleapis.com/css2?family=Madimi+One&display=swap');
* {
  padding:0;
  margin:0;
  }
body{
  background-color:rgb(10,10,10);
}
button, li, h3, p, div, a {font-family: "Madimi One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:15px;
}
a {
text-decoration: none;
}

.sidebar{
  transform-origin: left top;
  user-select:none;border:4px solid rgb(255, 94, 0);
  width:300px;height:fit-content;display:none;padding-top:130px;border-radius:25px;padding-bottom:100px;
position:fixed;z-index:11;top:10px;left:10px;
background-color:rgb(30,30,30);
text-align:center;font-size:17px;
}
.sidebar:hover{
  animation: chcolored 1.3s linear infinite;
  border-color:orangered;
}
@keyframes chcolored{
  0%{filter:drop-shadow(0 0 1px rgb(255, 0, 0))}
  50%{filter:drop-shadow(0 0 20px rgb(255,0,0))}
  100%{filter:drop-shadow(0 0 1px rgb(255,0,0))}
}

.hidethis{
  overflow:hidden;
}
.sidebar::before{
  position:absolute;
  content: '';
  width:100%;
  height:3px;
  top:90px;
  left:0;
  background:rgb(255, 94, 0);
 }
 .sidebar:hover::before{
  background:orangered;
 }
 .sidebar::after{
  position:absolute;
  content: '';
  width:100%;
  height:3px;
  bottom:60px;
  left:0;
  background:rgb(255, 94, 0);
 }
 .sidebar:hover::after{
  background:orangered;
 }
@media(max-width:480px){
  .sidebar{
    position:relative;
    width:100%;
    border:none;
    border-radius:0 0 0 0;
    top:0;left:0;
  }
}
    #logg{
      width:27%;
      top:3px;left:110px;
      position:absolute;
    }
    @media(max-width:500px){
      #logg{
        position:absolute;
        top:-20px;left:37%;
        transform:scale(0.6);
        
      }
    }
    .hamburger{
      transform-origin: left top;
      transform:scale(0.85);
      border:4px solid rgb(255, 94, 0);
      border-radius:50%;
      position:fixed;
      top:10px; left:10px;
      background-color:rgb(30,30,30);
      width:50px; height:50px;
      justify-content:center;
      display:flex;
      align-items:center;
      gap:7px;
      flex-direction:column;
      z-index:12;
      cursor:pointer; 

    }
 .hamburger.active{
  border-color:transparent;
  background-color:transparent;
  
  
 }
     
    .hamburger.active .cross-line:nth-child(2){
      opacity:0;
    }
    .hamburger.active .cross-line:nth-child(1){
      transform:translateY(10px) rotate(45deg);
    }
    .hamburger.active .cross-line:nth-child(3){
      transform:translateY(-10px) rotate(-45deg);
    }
    
    .cross-line{
      width:25px;
      height:3px;
      background-color:white;
      z-index:12;
      
      
    }
    @media(max-width:1200px){
      .sidebar{
        position:absolute;
      }
      .hamburger{
        position:absolute;
      }
    }
    .expanded{
      display:block;
      
    }
  


  /* new content */


.menu{
  padding:15px;
  color:white;
  display:flex;
  justify-content: flex-start;
  margin-left:25px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
.item{
  display:none;
  
}
.menu:hover{
  background-color:rgb(50,50,50);
}






.menu .fas{
  padding-top:2px;margin-right: 15px;
  
}


.item a{
  color:white;padding:5px;
}
.item a:hover{
background-color:rgb(50,50,50);
z-index:3;
}
.item a:last-child{
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
.item a:first-child{
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
.present{display:block;}
.menu.darkgrey{
    
  background-color:orangered;
 
}

.menu:nth-of-type(1) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:70px;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(1) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 35px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2;
}
.menu:nth-of-type(1) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 110px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}
.menu:nth-of-type(2) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:0;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(2) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 155px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(2) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 230px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}






.menu:nth-of-type(3) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:0;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(3) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 205px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(3) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 280px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}




.menu:nth-of-type(4) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:0;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(4) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 255px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(4) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 330px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}




.menu:nth-of-type(5) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:0;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(5) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 305px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(5) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 380px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}



.menu:nth-of-type(6) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:0;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(6) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 355px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(6) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 430px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}



.menu:nth-of-type(7) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:390px;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(7) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 15px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(7) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 90px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}



.menu:nth-of-type(8) .item.show{
  position:absolute;
  display:flex;
  justify-content: center;
  flex-direction:column;
  background-color:orangered;
  z-index:2;
  top:390px;
  left:100%; 
  border-radius: 20px 20px 20px 20px;
  width:300px;
}
.menu:nth-of-type(8) .item.show::after{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: 10px -10px 0px orangered;
  top: 65px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(90deg);
  z-index:2; 
}
.menu:nth-of-type(8) .item.show::before{
  position:absolute;
  content:'';
  width:25px;
  height:25px;
  background-color:transparent;
  box-shadow: -10px -10px 0px orangered;
  top: 140px;
  left:-25px;
  border-radius:30px;
  transform:rotateZ(-270deg);
  z-index:2;
}

@media(max-width:480px){.menu:nth-of-type(1) .item.show, .menu:nth-of-type(2) .item.show, .menu:nth-of-type(3) .item.show, .menu:nth-of-type(4) .item.show,.menu:nth-of-type(5) .item.show, .menu:nth-of-type(6) .item.show, .menu:nth-of-type(7) .item.show, .menu:nth-of-type(8) .item.show {
display:flex;position:relative;
flex-direction:column;left:0;
justify-content: center;
align-items: center;
top:0;margin-top:10px;

width:100%;
}
.menu:nth-of-type(1) .item.show::after, .menu:nth-of-type(1) .item.show::before,.menu:nth-of-type(2) .item.show::after, .menu:nth-of-type(2) .item.show::before,.menu:nth-of-type(3) .item.show::after, .menu:nth-of-type(3) .item.show::before, .menu:nth-of-type(4) .item.show::after, .menu:nth-of-type(4) .item.show::before, .menu:nth-of-type(5) .item.show::after, .menu:nth-of-type(5) .item.show::before, .menu:nth-of-type(6) .item.show::after, .menu:nth-of-type(6) .item.show::before, .menu:nth-of-type(7) .item.show::after, .menu:nth-of-type(7) .item.show::before, .menu:nth-of-type(8) .item.show::after, .menu:nth-of-type(8) .item.show::before{
display:none;
}
.menu{
  display:flex;
  flex-direction:column;margin-left:0px;border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;justify-content: center;
}
.menu .fas{display:flex;justify-content: center;margin-right:0px;padding:0px;}
}

const menu = document.getElementsByClassName('menu');
const menucontent = document.getElementsByClassName('item');
const sidebar = document.getElementsByClassName('sidebar');
let openIndex = -1; // Variable to keep track of the currently open dropdown
const hamburger = document.querySelector(".hamburger");
const crossline = document.querySelector(".cross-line");

hamburger.addEventListener("click", function () {
 
  hamburger.classList.toggle("active");
  sidebar[0].classList.toggle("expanded");
});

  
  for (let i = 0; i < menu.length; i++) {

    menu[i].addEventListener('click', (e) => {
     
        if (openIndex !== -1 && openIndex !== i) {
          menucontent[openIndex].classList.remove('show');
          menu[openIndex].classList.remove('darkgrey');
        }

        menucontent[i].classList.toggle('show');
        menu[i].classList.toggle('darkgrey');
        openIndex = (openIndex === i) ? -1 : i;
      
    });
  
    window.addEventListener('click', function (e) {
      if (
        !e.target.matches('.menu') &&
        !e.target.matches('.item') &&
        !e.target.matches('.sidebar') &&
        !e.target.matches('.fas')) 
        {
          if (openIndex !== -1) {
          menucontent[openIndex].classList.remove('show');
          menu[openIndex].classList.remove('darkgrey');
          openIndex = -1;
        }
      
      }
      
      });
      
    }

Codepen