Is there an easy way to collapse Mantine tab name(s) in React leaving only icons and expand (re-insert the tab names) when hovered over/clicked on?

Question

Looks like this is possible and there are examples of folks making it work with Dash using dash_mantine_components as seen here: https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318

Example image/gif from the website:

I've done a bit of searching for native Mantine to be able to do this, but have not found a smoking gun yet.

The Dash version of Mantine doesn't seem to use the same typical React nomenclature, so the example code there seems to be a deep rabbit hole.

Here is another example using Shiny: How to expand/collapse the shiny dashboard sidebar on mouse hover?

Perhaps it is possible to make the tab names as variables that get set to a blank string initially (the 'value' setting in the below code) and then set to their normal tab name when the tabs are hovered over? Using the example from the Mantine documentation, where would the "hover" piece come in to play?

import { useState } from 'react';
import { Tabs } from '@mantine/core';

function Demo() {
  const [activeTab, setActiveTab] = useState<string | null>('first');

  return (
    <Tabs value={activeTab} onTabChange={setActiveTab}>
      <Tabs.List>
        <Tabs.Tab value="first">First tab</Tabs.Tab>
        <Tabs.Tab value="second">Second tab</Tabs.Tab>
      </Tabs.List>

      <Tabs.Panel value="first">First panel</Tabs.Panel>
      <Tabs.Panel value="second">Second panel</Tabs.Panel>
    </Tabs>
  );
}