Category: javascript

Category Added in a WPeMatico Campaign

playing audio on image click: how do i make it play and pause?

im trying to make it so that audio plays when you click an image, but all i figured out is how to make it play until the end, unable to pause. is it possible to have a pause function on the second click?

heres what im working with. i really cant do complicated code, i need it as simple and bare-bones as possible. as is, the audio file plays on click, but it plays until completion and cant be paused

<audio id="audio" src="MyAudio.mp3"></audio>
<img src="MyImage.gif" onclick="document.getElementById('audio').play()">

jsBarcode svg image not displaying on every printable page HTML Javascript and PHP

I have barcodes of items in a box, I want to print these barcodes on paper two column format, but at the end of of every page I want to print the box barcode. I am using HTML, PHP, Javascript, CSS and jsBarcode library. Everything is working great but I am unable to get the box barcode to print at the bottom of every page.

See below HTML, Javascript and PHP code.

<html>
<script type="text/javascript" src="/js/JsBarcode.all.min.js"></script>
<link rel="stylesheet" href="paperprint.css">

<?php

//Serial of items on a box, these serials will be printed in two column format on a white paper.

$serials = "PF16ESE8|PF1E0BK0|PF15WQ5X|PF15XRVF|PF16DT72|PF0WXFYE|PF0WKT6C|PF0WY3QL|PF0WJXYE|PF15WP74|PF15TRQ2|PF0MKW31|PF0WXE6Y|PF0MPP6W|PF0KU1SC|PF0MKXME|PF0A61TR|PF0M0Q28|PF0MPMMG|PF0MKW3Y|PF0M0R9R|PF0M0RDY|PF160JM4|PF08SPWH|PF15W1WY|PF15RJHA|PF0VECS0|PF0AX7AA|PF0WY619|PF0M2RZA|PF0VETD4|PF0MH82G|PF0910GF|PF16ESC1|PF0A07S6|PF0MZ3BN";

//A box with serial number that contains several barcoded items, this box barcode will be printed at the bottom of every page.

$box = "100000002";

$serialarray = explode('|', $serials);
echo '    <div class="container">';
echo '  <div class="content">';

foreach ($serialarray as $bar) {
        echo "<svg id="$bar"></svg><br>";
}

echo "<script>";
foreach ($serialarray as $sbar) {
echo "JsBarcode("#$sbar", "$sbar", { height:30 });";
}
echo '</script>        </div></div>';

echo "
    <div class="footer">
<svg id="box"></svg> <p> This is a footer</p> 
<img id="image"></img>  

<script>
JsBarcode("#box", "$box", { height:60 });
</script>

    </div>";

?>

</body>

</html>

As you can see above, I am using footer class to make sure footer’s svg barcode image and text is printed at the bottom of every page (I am printing the pages from web browser CTRL+P. I can see footer text on every printed page, but for some reasons svg only prints on the last page and is missing from every other page.
See below the CSS I am using.

/* Global Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: 20px auto;
}

/* Two Column Layout */
.content {
    column-count: 2;  /* This creates two columns */
    column-gap: 30px; /* Space between columns */
    padding: 20px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Optional: Make sure to handle any breaks properly */
.content p {
    break-inside: avoid;  /* Prevents paragraphs from breaking between columns */
    margin-bottom: 15px;
}

/* Footer Styles */
.footer {
    text-align: center;
    font-size: 12px;
    background-color: #333;
    color: white;
    padding: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 999;
}

/* Print Styles */
@media print {
    body {
        margin: 0;
    }

    /* Container styles for print */
    .container {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Content styles for print */
    .content {
        column-count: 2;
        column-gap: 30px;
    /*    break-inside: avoid; */
    }

    /* Footer should appear at the bottom of every page */
    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
        color: black;
        text-align: center;
        font-size: 12px;
        padding: 10px;
        page-break-before: always; /* Ensures footer appears on each page */
    }

    /* Add page margins */
    @page {
        margin: 20mm;
    }

    /* Ensure content and footer are handled properly in printing */
    .content p {
        page-break-inside: avoid;
    }
}

/* Responsive design for screen view: One column for small screens */
@media (max-width: 768px) {
    .content {
        column-count: 1;  /* One column for smaller screens */
    }
}

I have spent 6 hours trying various methods, but I have not had success. I just want to print the box barcode label at the bottom of every printed page. I am printing the pages by using CTRL+P from web browser. Thanks in advance.

can’t access the property but after 1 second i can access it (async&await)

hello to everybody whose is reading this article
i want to make my own game in vanilla js to practice my skills with canvas and vanilla js
i have a problem with async and await in my code and i can’t understand what is it
so i need to get the file map from browser with fetch like this:let getMap = fetch('./public/maps/map1.txt')
so i wrote a async function like this :

 async loadMap () {
            try{
                let response = await fetch(this.filePath)
                return await response.text();
            }catch(e) {
                throw new Error(e)
            }         
            
    }

and after that i’m going to grab it and write some code to make a n*y matric to render it on browser
this is all the code of the Map class that has loadMap() function and another function that do logic works

class Map {
    constructor(filePath , col , row) {
        this.filePath = filePath
        this.map = null ;
        this._initMap(col , row)
    } 

   async _initMap(col , row) {
    this.map = await this._getMap(col , row);
    console.log("map is inited" , this.map)
   } 

    async loadMap () {
            try{
                let response = await fetch(this.filePath)
                return await response.text();
            }catch(e) {
                throw new Error(e)
            }         
            
    } 

    async _getMap(mapCol , mapRow) {
        let array = [...new Array(mapRow)].map(() => new Array(mapCol).fill('#'))
        let stringMap = await this.loadMap();
        let arrayMap = stringMap.split('').filter(s => !(s == ' ') && !(s == "r"))
        let col = 0 ;
        let row = 0 ;
        let index = 0 ;
        while(row < array.length) {
            array[row][col] = arrayMap[index]
            col++ ; index ++ ;
            if(arrayMap[index] == 'n') {
                arrayMap.splice(index , 1);
                col = 0 ;row++ ; 
            }
        }
        return array
    } 

    

}

as you can see after initializing it’s going to set the this.map to the matric
but this is my problem !
when i want to access it after initializing it says null but when i use setTimeOut for a second it showing the map !
how should i fix it ?

When hovering over a tooltip, overlay incorrectly calculates position relative to tooltip

Currently when the info icon is hovered over, the overlay unexpectedly appears out of the page at the bottom (can be seen by scrolling down on the page). I want the overlay to appear at the info icon’s location.

Link to sandbox: https://codesandbox.io/p/sandbox/react-typescript-forked-5zs5h8

In this sandbox, I understand that the overlay will appear in the correct position if in TheOverlayTrigger.tsx the “customTransform” is set from “true” to “false”. However, in my real codebase Popper is having strange issues calculating the position using transform: translate within TheOverlayTrigger.tsx. Instead of using the Popper in the OverlayTrigger.tsx, is it possible to only make code changes to Tooltip.tsx in order to position the overlay at the icon’s position?

Any advice on how to fix this would be greatly appreciated.

Prevent WordPress Link Editor from Automatically Adding “http://”

I’m working on a WordPress site that uses Gutenberg blocks, and I have a custom article page where I want to allow users to add links to certain text via the WordPress text editor. The issue I’m encountering is that when I use the Link option in the editor, it automatically prepends “http://” to any URL, even if it’s already a complete URL in a custom ACF field.

For example, I have a variable %%cta%% coming from an ACF field that contains link. When I use the WordPress link editor and highlight text to add a link, it automatically adds “http://”, resulting in http://https://example.com—which is incorrect.

Is there a way to prevent WordPress from automatically adding “http://” when linking text, especially when the URL already has a protocol (like https://)? I’ve tried to find a setting in the editor, but I couldn’t find anything related to this behavior. Any help would be appreciated!

Where should I look in the WordPress code to modify or disable this behavior, or is there a plugin or workaround that can solve this problem?

Gutenberg block screenshot

Iterate through an array and copy certain values

I am working with the Toggl API and it is returning a JSON object containing data like so (edited to simplify)

{
    "user_id": 12345,
    "username": "JohnSmith",
    "description": "foo",
    "time_entries": [
      {
        "id": 3778920070,
        "seconds": 10800,
        "start": "2025-01-27T11:00:00+00:00",
        "stop": "2025-01-27T14:00:00+00:00",
        "at": "2025-01-27T16:17:24+00:00",
        "at_tz": "2025-01-27T16:17:24+00:00"
      }
    ],
    "row_number": 1
  },
{
    "user_id": 6789,
    "username": "JaneSmith",
    "description": "bar",
    "time_entries": [
      {
        "id": 3778684944,
        "seconds": 5977,
        "start": "2025-01-27T14:35:31+00:00",
        "stop": "2025-01-27T16:15:08+00:00",
        "at": "2025-01-27T16:15:09+00:00",
        "at_tz": "2025-01-27T16:15:09+00:00"
      }
    ],
    "row_number": 2
  },
{
    "user_id": 12345,
    "username": "JohnSmith",
    "description": "bar",
    "time_entries": [
      {
        "id": 3780521038,
        "seconds": 3600,
        "start": "2025-01-27T09:00:00+00:00",
        "stop": "2025-01-27T10:00:00+00:00",
        "at": "2025-01-28T13:34:31+00:00",
        "at_tz": "2025-01-28T13:34:31+00:00"
      }
    ],
    "row_number": 3
  },

I would like to read the array and copy a subsection of the data into a new array. Ideally the output would group matching usernames, for example

{
    "username": "JohnSmith",
    "description": "foo",
    "time_entries": [
      {
        "id": 3778920070,
        "seconds": 10800,
        "start": "2025-01-27T11:00:00+00:00",
        "stop": "2025-01-27T14:00:00+00:00",
        "at": "2025-01-27T16:17:24+00:00",
        "at_tz": "2025-01-27T16:17:24+00:00"
      },
      {
        "id": 3780521038,
        "seconds": 3600,
        "start": "2025-01-27T09:00:00+00:00",
        "stop": "2025-01-27T10:00:00+00:00",
        "at": "2025-01-28T13:34:31+00:00",
        "at_tz": "2025-01-28T13:34:31+00:00"
      }
    ],
    ],
    "row_number": 1
  },
{
    "user_id": 6789,
    "username": "JaneSmith",
    "description": "bar",
    "time_entries": [
      {
        "id": 3778684944,
        "seconds": 5977,
        "start": "2025-01-27T14:35:31+00:00",
        "stop": "2025-01-27T16:15:08+00:00",
        "at": "2025-01-27T16:15:09+00:00",
        "at_tz": "2025-01-27T16:15:09+00:00"
      }
    ],
    "row_number": 2
  },
{

In pseudo-code, I am thinking I should do something like

foreach element in array if key = username , push to new array
if already exist only copy the time_entries key/value under that username

Is there a more elegant approach ?

How to consistently get beforeunload navigation type

I need to clean some data (sessionRelevantData) in IndexedDB when users leaves the last tab of my React app. To do so, I implemented a counter on localStorage to get the number of opened tabs and when beforeunload (or pagehide for iOS) event is triggered on the last tab, I check if it’s an actual navigation out of the app to clean the data in IndexedDB; if it’s a reload instead of a navigation, the data is kept.

Current code is below:

useEffect(() => {
  localStorage.setItem(
    'tabsCount',
    Number(localStorage.getItem('tabsCount') || 0) + 1,
  );

  const cleanupFn = e => {
    const isReload =
      _.get(
        e.currentTarget.performance.getEntriesByType('navigation'),
        '0.type',
      ) === 'reload';
    const tabsCount = Number(localStorage.getItem('tabsCount'));
    localStorage.setItem('tabsCount', tabsCount - 1);

    if (!isReload && tabsCount < 2) {
      indexedDB.deleteDatabase('sessionRelevantData');
    }
  };
  const eventType = isIOS() ? 'pagehide' : 'beforeunload';
  window.addEventListener(eventType, cleanupFn);
  return () => {
    window.removeEventListener(eventType, cleanupFn);
  };
}, []);

This code works as expected on the initial tab. The issue happens when user loads the initial tab, open a link from the app in a new tab, closes the first tab and then proceeds to reload the second tab. For some reason, the value of _.get(e.currentTarget.performance.getEntriesByType('navigation'), '0.type') after reloading the second tab is navigate instead of reload. This is not the expected behavior as documented in MDN Web Docs. Navigating or not in the second tab doesn’t change this behavior.

Is there a way to consistently get the correct navigation type?

DSA language for interviews, [closed]

I recently started DSA in javascript as i thought it will be useful in bakcend also.
Do companies let us solve in js , or do i have to do dsa in cpp or java or pyhton?
I did’nt want some youtubers answer so decided to ask in this community

learning dsa in js..

Why is javascript function jsPrint() { window.print() } altering the page layout?

I have an existing intranet web screen that users would like to print. The screen is using bootstrap 3.4.1 for layout with <div class="row"> and <div class="col-md-X"> as layout parameters. The screen looks like this:

What the screen looks like

The output from window.print() looks like this:

What the output looks like

What is causing the print output to be squished like that?

There are other similar existing pages on our intranet that print as expected using this method.

How to return a specific type based on the presence of a function parameter in TypeScript?

I have a generic function that make requests to API and returns a paginated data. But the return of this data currently is any.

What I want is: whenever I pass the tableFormattedData function, I want that the data has a Z type. If I don’t pass this function, I want data to have a type Y. Both the types I’m passing as generics.

Below is the code I have before making any changes.

interface FetchDataProps {
  route: string;
  tableFormattedData?: ({ data }: { data: unknown }) => object[];
}

export default async function fetchData({
  route,
  tableFormattedData,
}: FetchDataProps) {
  const response = await api.get(route);

  const { data, page, total_records } = response.data;

  const currentPage = page - 1;

  const newPaginationData = {
    data: tableFormattedData
      ? tableFormattedData({
          data,
        })
      : data,
    page: currentPage,
    totalCount: total_records,
  };

  return { newPaginationData, currentPage };
}

This is what I was doing to achieve what I want:

interface ResponseDataProps<T> {
  data: T[];
  page: number;
  total_records: number;
}

type FetchDataProps<DataProps, FormattedDataProps> = {
  route: string;
  tableFormattedData?: (args: { data: DataProps[] }) => FormattedDataProps[];
};

type FetchDataReturn<DataProps, FormattedDataProps> =
  FormattedDataProps extends undefined
    ? {
        newPaginationData: {
          data: DataProps[];
          page: number;
          totalCount: number;
        };
        currentPage: number;
      }
    : {
        newPaginationData: {
          data: FormattedDataProps[];
          page: number;
          totalCount: number;
        };
        currentPage: number;
      };

export async function fetchData<DataProps, FormattedDataProps = undefined>({
  route,
  tableFormattedData,
}: FetchDataProps<DataProps, FormattedDataProps>) {
  const response = await api.get<ResponseDataProps<DataProps>>(route);
  const { data, page, total_records } = response.data;
  const currentPage = page - 1;

  const newPaginationData = {
    data: tableFormattedData
      ? tableFormattedData({
          data,
        })
      : data,
    page: currentPage,
    totalCount: total_records,
  };

  return {
    newPaginationData,
    currentPage,
  } as FetchDataReturn<DataProps, FormattedDataProps>;
}

The interface FormattedProps is only an example. I was trying to use it like this:

interface FormattedProps {
  id: string;
  name: string;
}

interface DataProps {
  id: string;
}

export async function test() {
  const test2 = await fetchData<FormattedProps, DataProps>({
    route: 'test2',
    tableFormattedData: () => {}
  });

  test2.newPaginationData.data[0].name;
}

If I try to access the name, it will not be found. The test3 variable only shows the ID property. The name appears only if I do something like this.

export async function test() {
  const test3 = await fetchData<FormattedProps, DataProps>({
    route: 'test3',
    tableFormattedData: () => {}
  });

  if ('name' in test3.newPaginationData.data[0]){
    test3.newPaginationData.data[0].name
  }

}

My question is: How can I ensure that the return type of test3.newPaginationData.data includes the property name when tableFormattedData is passed, without creating this type check?

How to remove this black screen? [closed]

Whenever I move the mouse outside the game frame or hover over an external object outside the game frame, a black screen appears over the game. I suspect it’s related to mouse event listeners. How can I modify the code from the developer tools to stop this?

Here’s what I’ve tried so far:

Overriding addEventListener to block mousemove and mouseleave events.
Removing event listeners in DevTools.
Still, the black screen persists. What is the best way to prevent this issue?”

**game link:
https://oneperson.store/poolliveplus/
[The regular screen] (https://i.sstatic.net/E4GOi7uZ.jpg)

I expect [The black screen] (https://i.sstatic.net/DdxtKN4E.jpg) the black screen to be removed from the website

Issue with async/await in JavaScript causing automatic postback in ASP.NET WebForms

I’m working on an ASP.NET WebForms project to integrate Google reCAPTCHA. My goal is to:

Generate a reCAPTCHA token using grecaptcha.execute (an asynchronous operation).
Assign the token to a hidden field.
Pass the token to the server-side method for validation.
The issues I’m encountering are:

When using await in the JavaScript function, it triggers an automatic postback to the server before the token is assigned to the hidden field.
If I avoid using await and manually trigger __doPostBack after assigning the token, the token does not get assigned in time for the server to retrieve it.
I also tried using AJAX, but I faced similar race condition issues where the token was either not set or the postback behavior caused conflicts.

heres my js function:

async function checkCaptcha(event) {
    
    event.preventDefault(); 

    grecaptcha.ready(function () {
        grecaptcha
            .execute('********************secretToken********', { action: 'submit' })
            .then(function (token) {
                alert(token); 
             
                document.getElementById('<%= Token.ClientID %>').value = token;
                // Display the token from the hidden field for debugging
                alert("token from server: " + document.getElementById('<%= Token.ClientID %>').value);
            });
    });

    return false; 
}

heres my button:

how to I find the Right most value in a linear matrix?

this is JavaScript in HTML using 2d context

If I have a linear matrix, how do I find the right most value?
Currently I’m guessing my way around Wave function collapse and I need to add boundaries
when they are checking their neighbors. but what I want to know is how to check the position to the right exist?

//3 columns and rows
var DIM = 3;

//30 pixels wide
var size = 30;

//making an empty array for matrix
var matrix = [];

//filling in the matrix with identifier for drawing
for(let i=0; i<DIM*DIM; i++)
{
   matrix[i] = 0;
};

//checking the neighbors
//gonna add more rules later
//i have more indetifier other than 1 and 0
//id like to add rules like a 1 can only have 2 or 5 above it
for(let i=0; i<DIM*DIM; i++)
{
   let cell = grid[i];
   //if the neighbor is null ignore
   let aboveCell = null;
   let belowCell = null;
   let rightCell = null;
   let leftCell = null;

   //Boundaries
   if(i <= DIM)
      aboveCell = matrix[i-DIM];

   if(i <= grid.length-DIM)
      belowCell = matrix[i+DIM];

   if(i % DIM != 0)
      leftCell = matrix[i-1];

   //HERE IS WHERE I WANT TO KNOW HOW TO CHECK THAT IT DOESNT HAVE A RIGHT NEIGHBOR

}

//this draws the matrix on the canvas
function draw()
{
  //running through the matrix to draw the tiles in the right spot
  for(let x=0; x<DIM; x++)
  {
     for(let y=0; y<DIM; y++)
     {
         if(matrix[x+(y*DIM)] == 0)
         {
            ctx.fillStyle= "black";
            ctx.fillRect(x*size, y*size, size, size);
         }
         if(matrix[x+(y*DIM)] == 1)
         {
            ctx.fillStyle= "white";
            ctx.fillRect(x*size, y*size, size, size);
         }
      };
   };


}

I’ve tried a few equations(made by me) but clearly the haven’t worked

Converting Vanilla JS to JSX. Menu won’t open on mobile

I’m trying to add the ‘cs-active’ class to the ‘cs-navigation’ id which is supposed to open the mobile nav menu when I click the toggle button. It adds the class to the id but the mobile menu won’t open.

Here is jxs:

'use client'

import React, { useState } from 'react'
import Image from 'next/image'
import classes from './Navbar.module.css'

function Navbar() {
  // State to track the menu and body classes
  const [menuActive, setMenuActive] = useState(false) // Start with menu closed (default: false)

  const toggleMenu = () => {
    setMenuActive(!menuActive)
  }

  return (
    <header
      id={classes['cs-navigation']}
      className={menuActive ? `cs-active` : ''}
    >
      <div className={classes['cs-container']}>
        {/* Nav Logo */}
        <a href='' className={classes['cs-logo']} aria-label='back to home'>
          <Image
            src='https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Flogo-black.svg'
            alt='logo'
            width='210'
            height='29'
            aria-hidden='true'
            decoding='async'
          />
        </a>

        {/* Navigation List */}
        <nav
          className={`${classes['cs-nav']} ${menuActive ? classes['cs-active'] : ''}`}
          role='navigation'
        >
          {/* Mobile Nav Toggle */}
          <button
            className={`${classes['cs-toggle']} ${menuActive ? classes['cs-active'] : ''}`}
            aria-label='mobile menu toggle'
            onClick={toggleMenu}
          >
            <div className={classes['cs-box']} aria-hidden='true'>
              <span
                className={`${classes['cs-line']} ${classes['cs-line1']}`}
                aria-hidden='true'
              ></span>
              <span
                className={`${classes['cs-line']} ${classes['cs-line2']}`}
                aria-hidden='true'
              ></span>
              <span
                className={`${classes['cs-line']} ${classes['cs-line3']}`}
                aria-hidden='true'
              ></span>
            </div>
          </button>

          {/* Nav Links */}
          <div className={classes['cs-ul-wrapper']}>
            <ul id='cs-expanded' className={classes['cs-ul']}>
              <li className={classes['cs-li']}>
                <a
                  href=''
                  className={`${classes['cs-li-link']} ${classes['cs-active']}`}
                >
                  Home
                </a>
              </li>
              <li className={classes['cs-li']}>
                <a href='' className={classes['cs-li-link']}>
                  About
                </a>
              </li>
              <li className={classes['cs-li']}>
                <a href='' className={classes['cs-li-link']}>
                  Services
                </a>
              </li>
              <li className={classes['cs-li']}>
                <a href='' className={classes['cs-li-link']}>
                  About Us
                </a>
              </li>
              <li className={classes['cs-li']}>
                <a href='' className={classes['cs-li-link']}>
                  FAQ
                </a>
              </li>
            </ul>
          </div>
        </nav>

        {/* Contact Us Button */}
        <a
          href=''
          className={`${classes['cs-button-solid']} ${classes['cs-nav-button']}`}
        >
          Contact Us
        </a>
      </div>
    </header>
  )
}

export default Navbar

Here’s a snippet of the Navbar.module.css:

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation:before {
    /* black blurred overlay */
    content: '';
    width: 0%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: -11;
    transition:
      width 0.5s,
      opacity 0.3s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  #cs-navigation.cs-active:before {
    width: 100%;
    opacity: 1;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleX(1);
    transition-delay: 0.2s;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleX(1);
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateX(0);
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateX(0);
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #cs-navigation .cs-logo {
    width: 40%;
    max-width: 9.125rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
    /* places the image to the left edge of the parent */
    object-position: left;
  }
  #cs-navigation .cs-toggle {
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
    height: clamp(2.75rem, 6vw, 3rem);
    margin: 0 0 0 auto;
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #cs-navigation .cs-active .cs-line3 {
    opacity: 0;
    bottom: 100%;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: #1a1a1a;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transition:
      transform 0.5s,
      top 0.3s,
      left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition:
      top 0.3s,
      left 0.3s,
      transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition:
      bottom 0.3s,
      opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    height: 100vh;
    background-color: #fff;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: -1;
    overflow: hidden;
    transform: scaleX(0);
    transition:
      transform 0.4s,
      opacity 0.3s;
    transform-origin: top right;
  }
  #cs-navigation .cs-ul {
    width: auto;
    min-width: 40%;
    height: 65vh;
    margin: 0;
    /* 28px - 40px */
    padding: 3rem clamp(1.75rem, 3vw, 2.5rem) 2rem 4.375rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1.25rem;
    overflow: scroll;
  }
  #cs-navigation .cs-li {
    text-align: right;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateX(-2.5rem);
    transition:
      transform 0.6s,
      opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: '';
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: none;
    position: absolute;
    bottom: -0.125rem;
    left: 0;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}

And here is the original javascript that I’m trying to convert to jsx:

// add classes for mobile navigation toggling
var CSbody = document.querySelector('body');
const CSnavbarMenu = document.querySelector('#cs-navigation');
const CShamburgerMenu = document.querySelector('#cs-navigation .cs-toggle');

CShamburgerMenu.addEventListener('click', function () {
    CShamburgerMenu.classList.toggle('cs-active');
    CSnavbarMenu.classList.toggle('cs-active');
    CSbody.classList.toggle('cs-open');
    // run the function to check the aria-expanded value
    ariaExpanded();
});

// checks the value of aria expanded on the cs-ul and changes it accordingly whether it is expanded or not
function ariaExpanded() {
    const csUL = document.querySelector('#cs-expanded');
    const csExpanded = csUL.getAttribute('aria-expanded');

    if (csExpanded === 'false') {
        csUL.setAttribute('aria-expanded', 'true');
    } else {
        csUL.setAttribute('aria-expanded', 'false');
    }
}

// mobile nav toggle code
const dropDowns = Array.from(document.querySelectorAll('#cs-navigation .cs-dropdown'));
for (const item of dropDowns) {
    const onClick = () => {
        item.classList.toggle('cs-active');
    };
    item.addEventListener('click', onClick);
}

I tested it out by console logging the menuActive and it does seem to be switch the state off and on. It also does apply the cs-active to the element as it says:
<header id="Navbar_cs-navigation__SxGoJ" class="cs-active">

but it doesn’t actually open the menu. My theory is that it’s not working because I’m using a css module and it’s creating a hash on the ID. But I could be wrong.