Difícil ajudar sem conseguir visualizar o resultado esperado. Supondo que o sidebar tenha botões e outras coisas, e o resultado esperado seja apenas encolher mais o sidebar e mostrar um text no lugar ou um icon, o resultado poderia ser alcançado usando renderização condicional. Criar o sidebar completo e cria o sidebar mais light. Uma vez que clicar no botão que fecha o sidebar completo, atualiza algum estado do react para mostrar o encolhido.
Algo como:
import { useState } from 'react';
export const SideBar = () => {
const [sidebarIsOpen, setSidebarIsOpen] = useState<boolean>(true);
return (
<>
{sidebarIsOpen ? (
<Sidebar/>
):(
<SidebarLight/>
)}
</>
)
};
Outro ponto é que, nem sempre essas bibliotecas tem o que queremos. Particularmente eu prefiro criar meus próprios componentes ao meu estilo. Então se não tiver algo assim no shadcn ou se isso estiver te atrapalhando, pode ser que tenha que criar do zero os componentes.