Question involving media queries and high end tablets

Good afternoon guys, I have a crazy dumb question.

I'm currently building a website for my organization using NextJS as the JS framework. I'm currently working the Nav bar and I have it set up for 2 approaches, desktop and mobile.

The desktop approach is just a standard Navbar with menus that show up when you hover over a menu item with submenus(conditionally rendering the component via useState).

The mobile approach is done the same way Hootsuite ([https://www.hootsuite.com/](https://www.hootsuite.com/)) does their mobile Nav (hamburger menu that opens a modal). I'm still building the components for that.

Currently, I'm using media queries to display the mobile or desktop version. Basically for anything with a width less than 1200px wide, it'll show the mobile components and anything greater than or equal 1200px it'll show the desktop components. This unfortunately leaves one outlier, tablet devices. I originally thought by doing that range, I'd be able to snag current tablet devices, but looking at the Ipad Pro as an example it has a pixel range of 2388 x 1668. This leaves the predicament of higher end table users being stuck to the desktop navbar which only works via hover.

So my question is, for those of you who ran into this similiar kind of issue, what did you guys end up doing? I thought about upping the range for the media queries, but that doesn't exactly future proof the site as tablets become increasingly more powerful.