Geralmente faço isso, mas achei que assim seria "o jeito mais correto", qual sua opnião? devo colocar isso de trocar menu mobile para desk no css?
Sim seria o melhor, principalmente pensando no lado de performance (imaginando q esse componente possa ser utilizado em um projeto grande), pq cada vez vc conseguir criar as regras de renderização (principalmente essas baseadas no tamanho da tela) com somente CSS, melhor será a performance das páginas.
Indo nessa linha de fazer a renderização condicional por CSS, oq vejo q vc possa melhorar o código desse componente é separar o código q é usado em mobile e em desktop em componentes diferentes, até pra ficar separado as responsabilidades de cada coisa. Ex:
// antes
{bodyWidth <= 1024 ? (
<>
<label htmlFor="checkboxMenuMobile" className="labelMenuMobile">
<FiMenu />
</label>
<input
type="checkbox"
name="checkboxMenuMobile"
id="checkboxMenuMobile"
/>
<div className="navbar_contaierOptionsMobile">
{optionsText.map((option, index) => (
<a className="navbar_options" key={option + index} href="#">
{option}
</a>
))}
</div>
</>
) : (
<div className="navbar_containerOptions">
{optionsText.map((option, index) => (
<a className="navbar_options" key={option + index} href="#">
{option}
</a>
))}
</div>
)}
// depois
function Navbar() {
...
return (
...
<>
<NavbarContentMobile />
<NavbarContentDesktop />
</>
....
)
Com isso segue a logica de componentização certo? um component faz apenas uma coisa
Isso!
Se for tudo a mesma coisa e só mudar as medidas e coisas do tipo é melhor fazer direto no css com media query.
Nesse caso tem uma logica que não segue o padrão desktop, então não é so mudar no css, existe elementos html expecificos para cada um.