Executando verificação de segurança...
1
eduardopv16
1 min de leitura ·

ReactJS (ViteJs) + ShadcnUI (Js) + TailwindCss

Estou usando a lib ShadcnUI com react com javascript (viteJs). O componente Sidebar tem até templates prontos com comportamentos que necessito.

Para ser mais especifico estou usando o sidebar-07 e quero que o meu Sidebar tenha o comportamento de quando recolher, exibir o icone e o texto do menu (Icone em cima e o texto do menu abaixo)

Ja olhei o componente, ja mexi e nada. Estou mexendo em algum lugar que nao deve e por isso nao muda e nao fica como eu gostaria.

Para entender, estou usando a prop collapsible="icon"

Alguém consegue me ajudar? É a unica coisa que esta me dando dor de cabeça é esse componente e depois tenho que mexer para ficar fixo quando estiver no tamanho mobile e não sumir aparecendo o SidebarTrigger. Como por exemplo, preciso que ele fique fixo na lateral quando diminuir e não ficar "Oculto" e aparecer após o clique no botão do "menu hamburguer"

Carregando publicação patrocinada...
1
eduardomrigo

Nao entendi muito bem sua duvida. Ao recolher, voce quer que ele mantenha com o texto? Qual intuito de recolher entao?

Envie um link com uma imagem de como voce quer, um desenho tals...

Uma dica, eu uso shadcn diariamente, no trampo e em projetos pessoais. Todo "block" que voce pega pronto deles tem a opcao de "Open in v0". v0 é uma IA especialista no uso de shadcn ja que foi desenvolvida pela propria Vercel. Tente jogar o componente la e perguntar pra ela, me poupa muito tempo, uso toda hora.

1
1
Programmer404

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.