@pipelinesolucoes/menu 1.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +78 -0
- package/README.md +166 -0
- package/dist/app/layout.d.ts +6 -0
- package/dist/app/layout.js +19 -0
- package/dist/app/layout.js.map +1 -0
- package/dist/app/page.d.ts +1 -0
- package/dist/app/page.js +6 -0
- package/dist/app/page.js.map +1 -0
- package/dist/components/BarraFerramentas.d.ts +13 -0
- package/dist/components/BarraFerramentas.js +31 -0
- package/dist/components/BarraFerramentas.js.map +1 -0
- package/dist/components/BarraFerramentasHamburguer.d.ts +16 -0
- package/dist/components/BarraFerramentasHamburguer.js +42 -0
- package/dist/components/BarraFerramentasHamburguer.js.map +1 -0
- package/dist/components/BarraFerramentasSaaS.d.ts +10 -0
- package/dist/components/BarraFerramentasSaaS.js +18 -0
- package/dist/components/BarraFerramentasSaaS.js.map +1 -0
- package/dist/components/BarraFerramentasStyled.d.ts +14 -0
- package/dist/components/BarraFerramentasStyled.js +61 -0
- package/dist/components/BarraFerramentasStyled.js.map +1 -0
- package/dist/components/ItemMenu.d.ts +30 -0
- package/dist/components/ItemMenu.js +86 -0
- package/dist/components/ItemMenu.js.map +1 -0
- package/dist/components/MenuHamburguer.d.ts +12 -0
- package/dist/components/MenuHamburguer.js +36 -0
- package/dist/components/MenuHamburguer.js.map +1 -0
- package/dist/components/MenuHorizontal.d.ts +34 -0
- package/dist/components/MenuHorizontal.js +52 -0
- package/dist/components/MenuHorizontal.js.map +1 -0
- package/dist/components/MenuVertical.d.ts +35 -0
- package/dist/components/MenuVertical.js +53 -0
- package/dist/components/MenuVertical.js.map +1 -0
- package/dist/components/SideNav.d.ts +83 -0
- package/dist/components/SideNav.js +55 -0
- package/dist/components/SideNav.js.map +1 -0
- package/dist/components/drawer/DesktopDrawer.d.ts +64 -0
- package/dist/components/drawer/DesktopDrawer.js +198 -0
- package/dist/components/drawer/DesktopDrawer.js.map +1 -0
- package/dist/components/drawer/DrawerResponsive.d.ts +74 -0
- package/dist/components/drawer/DrawerResponsive.js +96 -0
- package/dist/components/drawer/DrawerResponsive.js.map +1 -0
- package/dist/components/drawer/IconDrawerTrigger.d.ts +85 -0
- package/dist/components/drawer/IconDrawerTrigger.js +137 -0
- package/dist/components/drawer/IconDrawerTrigger.js.map +1 -0
- package/dist/components/drawer/LogoutIcon.d.ts +4 -0
- package/dist/components/drawer/LogoutIcon.js +10 -0
- package/dist/components/drawer/LogoutIcon.js.map +1 -0
- package/dist/components/drawer/MobileDrawer.d.ts +64 -0
- package/dist/components/drawer/MobileDrawer.js +158 -0
- package/dist/components/drawer/MobileDrawer.js.map +1 -0
- package/dist/components/drawer/UserAvatarMenu.d.ts +77 -0
- package/dist/components/drawer/UserAvatarMenu.js +103 -0
- package/dist/components/drawer/UserAvatarMenu.js.map +1 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +11 -0
- package/dist/index.js.map +1 -0
- package/dist/pages/_app.d.ts +2 -0
- package/dist/pages/_app.js +20 -0
- package/dist/pages/_app.js.map +1 -0
- package/dist/pages/_document.d.ts +9 -0
- package/dist/pages/_document.js +33 -0
- package/dist/pages/_document.js.map +1 -0
- package/dist/theme.d.ts +35 -0
- package/dist/theme.js +142 -0
- package/dist/theme.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/dist/types/Drawer.d.ts +66 -0
- package/dist/types/Drawer.js +2 -0
- package/dist/types/Drawer.js.map +1 -0
- package/dist/types/ItemMenuConfig.d.ts +6 -0
- package/dist/types/ItemMenuConfig.js +2 -0
- package/dist/types/ItemMenuConfig.js.map +1 -0
- package/dist/types/NavItem.d.ts +5 -0
- package/dist/types/NavItem.js +2 -0
- package/dist/types/NavItem.js.map +1 -0
- package/dist/types/RotaMenuConfig.d.ts +4 -0
- package/dist/types/RotaMenuConfig.js +2 -0
- package/dist/types/RotaMenuConfig.js.map +1 -0
- package/package.json +60 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
LICENÇA COMERCIAL – PIPELINE SOLUÇÕES
|
|
2
|
+
|
|
3
|
+
Copyright (c) Pipeline Soluções
|
|
4
|
+
|
|
5
|
+
Este software é de propriedade da Pipeline Soluções e é disponibilizado
|
|
6
|
+
publicamente para instalação e avaliação. O uso comercial está sujeito
|
|
7
|
+
a licenciamento conforme os termos abaixo.
|
|
8
|
+
|
|
9
|
+
────────────────────────────────────────────────────────────
|
|
10
|
+
|
|
11
|
+
1. CONCESSÃO DE LICENÇA
|
|
12
|
+
|
|
13
|
+
A Pipeline Soluções concede ao Licenciado uma licença não exclusiva,
|
|
14
|
+
intransferível e revogável para utilizar este software em 1 (um)
|
|
15
|
+
projeto comercial, mediante aquisição de licença válida.
|
|
16
|
+
|
|
17
|
+
Projeto é definido como uma única aplicação em produção, incluindo
|
|
18
|
+
seus ambientes de desenvolvimento, homologação e staging.
|
|
19
|
+
|
|
20
|
+
────────────────────────────────────────────────────────────
|
|
21
|
+
|
|
22
|
+
2. USO PERMITIDO
|
|
23
|
+
|
|
24
|
+
É permitido:
|
|
25
|
+
- Instalar e avaliar o software livremente.
|
|
26
|
+
- Utilizar o software em projetos comerciais mediante licença válida.
|
|
27
|
+
- Modificar o código para uso interno no projeto licenciado.
|
|
28
|
+
|
|
29
|
+
────────────────────────────────────────────────────────────
|
|
30
|
+
|
|
31
|
+
3. USO PROIBIDO
|
|
32
|
+
|
|
33
|
+
É expressamente proibido:
|
|
34
|
+
- Utilizar o software em projetos comerciais sem licença válida.
|
|
35
|
+
- Redistribuir, sublicenciar, vender ou alugar este software,
|
|
36
|
+
integralmente ou em partes.
|
|
37
|
+
- Publicar o software como parte de outra biblioteca, framework
|
|
38
|
+
ou produto concorrente.
|
|
39
|
+
- Remover ou alterar avisos de copyright ou licenciamento.
|
|
40
|
+
|
|
41
|
+
────────────────────────────────────────────────────────────
|
|
42
|
+
|
|
43
|
+
4. SUPORTE E ATUALIZAÇÕES
|
|
44
|
+
|
|
45
|
+
A aquisição da licença pode incluir suporte básico e atualizações,
|
|
46
|
+
conforme acordado no momento da compra. A Pipeline Soluções não é
|
|
47
|
+
obrigada a fornecer suporte gratuito.
|
|
48
|
+
|
|
49
|
+
────────────────────────────────────────────────────────────
|
|
50
|
+
|
|
51
|
+
5. GARANTIAS E RESPONSABILIDADE
|
|
52
|
+
|
|
53
|
+
Este software é fornecido "NO ESTADO EM QUE SE ENCONTRA",
|
|
54
|
+
sem garantias de qualquer tipo, expressas ou implícitas.
|
|
55
|
+
Em nenhuma hipótese a Pipeline Soluções será responsabilizada
|
|
56
|
+
por danos diretos ou indiretos decorrentes do uso do software.
|
|
57
|
+
|
|
58
|
+
────────────────────────────────────────────────────────────
|
|
59
|
+
|
|
60
|
+
6. RESCISÃO
|
|
61
|
+
|
|
62
|
+
Esta licença será automaticamente rescindida em caso de violação
|
|
63
|
+
de qualquer um dos termos aqui estabelecidos. Em caso de rescisão,
|
|
64
|
+
o uso do software deverá ser interrompido imediatamente.
|
|
65
|
+
|
|
66
|
+
────────────────────────────────────────────────────────────
|
|
67
|
+
|
|
68
|
+
7. CONTATO
|
|
69
|
+
|
|
70
|
+
Para aquisição de licença comercial ou esclarecimento de dúvidas:
|
|
71
|
+
|
|
72
|
+
E-mail: contato@pipelinesolucoes.com.br
|
|
73
|
+
Site: https://www.pipelinesolucoes.com.br
|
|
74
|
+
|
|
75
|
+
────────────────────────────────────────────────────────────
|
|
76
|
+
|
|
77
|
+
Ao utilizar este software em um projeto comercial, você declara ter
|
|
78
|
+
lido, compreendido e concordado com os termos desta licença.
|
package/README.md
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
# @pipelinesolucoes/menu
|
|
2
|
+
|
|
3
|
+
Biblioteca de **componentes de menu para React**, desenvolvida para **padronização visual**, **reutilização** e **escalabilidade** em aplicações modernas e design systems.
|
|
4
|
+
|
|
5
|
+
Este pacote faz parte do ecossistema de componentes da **Pipeline Soluções**.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 📦 Componentes disponíveis
|
|
10
|
+
|
|
11
|
+
A biblioteca inclui os seguintes componentes:
|
|
12
|
+
|
|
13
|
+
- **TermsAndPrivacyBar**
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
- **TermsAndPrivacyCard**
|
|
17
|
+
Componente que renderiza um card flutuante (fixed) para consentimento de cookies, exibindo links para **Termos de Uso** e **Política de Privacidade** e dois botões:
|
|
18
|
+
**Cancelar** (define cookieConsent como "false") e **Ok** (define cookieConsent como "true").
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## ✨ Características
|
|
23
|
+
|
|
24
|
+
- ✅ Pronto para produção
|
|
25
|
+
- 🎨 Integração com Material UI
|
|
26
|
+
- ♿ Foco em acessibilidade
|
|
27
|
+
- 🧩 Ideal para design systems
|
|
28
|
+
- 🔄 Reutilizável em múltiplos projetos
|
|
29
|
+
- 📦 Publicado no npm com versionamento semântico
|
|
30
|
+
- 🔐 Preparado para licenciamento por projeto
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
## 📥 Instalação
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
npm install @pipelinesolucoes/menu
|
|
38
|
+
ou
|
|
39
|
+
yarn add @pipelinesolucoes/menu
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## 🚀 Uso básico
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
import { Actionmenu } from "@pipelinesolucoes/menu";
|
|
47
|
+
|
|
48
|
+
export function Example() {
|
|
49
|
+
return (
|
|
50
|
+
<Actionmenu variant="contained" color="primary">
|
|
51
|
+
Ação
|
|
52
|
+
</Actionmenu>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## 🧩 Uso em Design Systems
|
|
58
|
+
|
|
59
|
+
Este pacote foi projetado para:
|
|
60
|
+
|
|
61
|
+
- padronização de ações e navegação
|
|
62
|
+
- reutilização entre projetos
|
|
63
|
+
- evolução incremental de UI
|
|
64
|
+
- integração com temas e tokens de design
|
|
65
|
+
|
|
66
|
+
Pode ser utilizado de forma isolada ou como parte de um design system maior.
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## 🔐 Licença de uso comercial
|
|
71
|
+
|
|
72
|
+
Este pacote é publicamente acessível no npm, porém:
|
|
73
|
+
|
|
74
|
+
O uso comercial é licenciado por projeto.
|
|
75
|
+
|
|
76
|
+
**O que isso significa?**
|
|
77
|
+
|
|
78
|
+
O pacote pode ser instalado e avaliado livremente.
|
|
79
|
+
|
|
80
|
+
Para uso em projetos comerciais, é necessária a aquisição de uma licença válida por projeto.
|
|
81
|
+
|
|
82
|
+
**Definição de projeto**
|
|
83
|
+
|
|
84
|
+
Projeto = 1 aplicação em produção
|
|
85
|
+
(ex.: site institucional, sistema interno ou aplicação SaaS).
|
|
86
|
+
Ambientes de desenvolvimento, staging e homologação estão incluídos no mesmo projeto.
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## 📄 O que a licença inclui
|
|
91
|
+
|
|
92
|
+
✔ Uso em 1 projeto
|
|
93
|
+
✔ Atualizações enquanto a licença estiver ativa
|
|
94
|
+
✔ Correções de bugs
|
|
95
|
+
✔ Suporte básico
|
|
96
|
+
✔ Evolução contínua do pacote
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## ⚙️ Configuração de licença (mock)
|
|
101
|
+
|
|
102
|
+
Após adquirir a licença, você receberá um Project ID e uma License Key.
|
|
103
|
+
|
|
104
|
+
No projeto, configure as variáveis de ambiente:
|
|
105
|
+
|
|
106
|
+
PIPESOL_PROJECT_ID=meu-projeto
|
|
107
|
+
PIPESOL_menu_LICENSE_KEY=SUA-LICENSE-KEY-AQUI
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
Atualmente, a validação é local e não bloqueante, servindo como preparação para automação futura.
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
## 🔁 Versionamento
|
|
115
|
+
|
|
116
|
+
Este projeto segue Semantic Versioning (SemVer):
|
|
117
|
+
|
|
118
|
+
1.0.1 – Correção de bugs
|
|
119
|
+
|
|
120
|
+
1.1.0 – Nova funcionalidade compatível
|
|
121
|
+
|
|
122
|
+
2.0.0 – Mudança incompatível
|
|
123
|
+
|
|
124
|
+
1.0.0-beta.x – Versões beta
|
|
125
|
+
|
|
126
|
+
Para listar as versões publicadas:
|
|
127
|
+
|
|
128
|
+
```
|
|
129
|
+
npm view @pipelinesolucoes/menu versions --json
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
## 🚀 Processo de publicação
|
|
133
|
+
|
|
134
|
+
Este pacote é publicado exclusivamente via CI/CD utilizando GitHub Actions.
|
|
135
|
+
|
|
136
|
+
Características do processo:
|
|
137
|
+
|
|
138
|
+
- Publicação apenas por tags Git (vX.Y.Z)
|
|
139
|
+
- Autenticação via Trusted Publishing (OIDC)
|
|
140
|
+
- Nenhum token npm armazenado
|
|
141
|
+
- Tokens clássicos desabilitados
|
|
142
|
+
- Autenticação em dois fatores (2FA) obrigatória
|
|
143
|
+
- Publicações seguras, rastreáveis e reprodutíveis
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
## 📬 Aquisição de licença e contato
|
|
148
|
+
|
|
149
|
+
Para adquirir uma licença comercial ou obter mais informações:
|
|
150
|
+
|
|
151
|
+
📧 contato@pipelinesolucoes.com.br
|
|
152
|
+
🌐 https://www.pipelinesolucoes.com.br
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
|
|
156
|
+
## 📄 Licença
|
|
157
|
+
|
|
158
|
+
Copyright © Pipeline Soluções
|
|
159
|
+
Este software está sujeito a licença comercial por projeto.
|
|
160
|
+
Consulte o arquivo LICENSE para mais informações.
|
|
161
|
+
|
|
162
|
+
```
|
|
163
|
+
Se você quiser, eu também posso gerar agora o **arquivo `LICENSE`** (texto curto e claro) no mesmo padrão profissional pra você copiar e colar como `LICENSE` no repo.
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Geist, Geist_Mono } from "next/font/google";
|
|
3
|
+
import "./globals.css";
|
|
4
|
+
const geistSans = Geist({
|
|
5
|
+
variable: "--font-geist-sans",
|
|
6
|
+
subsets: ["latin"],
|
|
7
|
+
});
|
|
8
|
+
const geistMono = Geist_Mono({
|
|
9
|
+
variable: "--font-geist-mono",
|
|
10
|
+
subsets: ["latin"],
|
|
11
|
+
});
|
|
12
|
+
export const metadata = {
|
|
13
|
+
title: "Create Next App",
|
|
14
|
+
description: "Generated by create next app",
|
|
15
|
+
};
|
|
16
|
+
export default function RootLayout({ children, }) {
|
|
17
|
+
return (_jsx("html", { lang: "en", children: _jsx("body", { className: `${geistSans.variable} ${geistMono.variable}`, children: children }) }));
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=layout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/app/layout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,eAAe,CAAC;AAEvB,MAAM,SAAS,GAAG,KAAK,CAAC;IACtB,QAAQ,EAAE,mBAAmB;IAC7B,OAAO,EAAE,CAAC,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,UAAU,CAAC;IAC3B,QAAQ,EAAE,mBAAmB;IAC7B,OAAO,EAAE,CAAC,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAa;IAChC,KAAK,EAAE,iBAAiB;IACxB,WAAW,EAAE,8BAA8B;CAC5C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,GAGR;IACA,OAAO,CACL,eAAM,IAAI,EAAC,IAAI,YACb,eAAM,SAAS,EAAE,GAAG,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ,EAAE,YAC3D,QAAQ,GACJ,GACF,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function Home(): import("react/jsx-runtime").JSX.Element;
|
package/dist/app/page.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"page.js","sourceRoot":"","sources":["../../src/app/page.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,MAAM,CAAC,OAAO,UAAU,IAAI;IAC1B,OAAO,CACL,gCAAY,CACb,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ItemMenuConfig } from '@/types/ItemMenuConfig';
|
|
3
|
+
interface BarraFerramentasProps {
|
|
4
|
+
listaItemMenu: ItemMenuConfig[];
|
|
5
|
+
background_color?: string;
|
|
6
|
+
color: string;
|
|
7
|
+
color_hover: string;
|
|
8
|
+
text_decoration: 'none' | 'underline';
|
|
9
|
+
renderLogo: () => React.ReactElement;
|
|
10
|
+
renderSocialMedia: () => React.ReactElement;
|
|
11
|
+
}
|
|
12
|
+
declare const BarraFerramentas: React.FC<BarraFerramentasProps>;
|
|
13
|
+
export default BarraFerramentas;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Bar, ContainerRedeSocialHorizontal, CustomToolbar, SpanBody1 } from './BarraFerramentasStyled';
|
|
5
|
+
import { styled } from '@mui/material';
|
|
6
|
+
const DivStyled = styled('div')({
|
|
7
|
+
display: 'flex',
|
|
8
|
+
flex: '1',
|
|
9
|
+
});
|
|
10
|
+
const ContainerMenuHorizontal = styled('div')({
|
|
11
|
+
display: 'flex',
|
|
12
|
+
flexDirection: 'row',
|
|
13
|
+
justifyContent: 'center',
|
|
14
|
+
alignItems: 'center',
|
|
15
|
+
flexGrow: 1,
|
|
16
|
+
gap: '16px',
|
|
17
|
+
});
|
|
18
|
+
const BarraFerramentas = ({ listaItemMenu, renderLogo, renderSocialMedia, background_color, color, color_hover, text_decoration }) => {
|
|
19
|
+
const background_color_bar = background_color || 'transparent';
|
|
20
|
+
const [buttons, setButtons] = React.useState(null);
|
|
21
|
+
React.useEffect(() => {
|
|
22
|
+
const borderColor = (text_decoration === 'none') ? 'transparent' : color;
|
|
23
|
+
if (listaItemMenu) {
|
|
24
|
+
const constructedButtons = listaItemMenu.map((item) => (item.component));
|
|
25
|
+
setButtons(constructedButtons);
|
|
26
|
+
}
|
|
27
|
+
}, [listaItemMenu, color, color_hover, text_decoration]);
|
|
28
|
+
return (_jsx(Bar, { background_color: background_color_bar, id: "barraferramentas", children: _jsxs(CustomToolbar, { disableGutters: true, children: [renderLogo(), _jsxs(DivStyled, { children: [_jsx(ContainerMenuHorizontal, { children: _jsx("nav", { children: buttons ? buttons : _jsx(SpanBody1, { text_color: color, children: "carregando..." }) }) }), _jsx(ContainerRedeSocialHorizontal, { children: renderSocialMedia() })] })] }) }));
|
|
29
|
+
};
|
|
30
|
+
export default BarraFerramentas;
|
|
31
|
+
//# sourceMappingURL=BarraFerramentas.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BarraFerramentas.js","sourceRoot":"","sources":["../../src/components/BarraFerramentas.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,6BAA6B,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAExG,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAYvC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9B,OAAO,EAAE,MAAM;IACf,IAAI,EAAE,GAAG;CACV,CAAC,CAAC;AAEH,MAAM,uBAAuB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,CAAC;IACX,GAAG,EAAE,MAAM;CACZ,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAAoC,CAAC,EACvD,aAAa,EACb,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAAE,KAAK,EAAE,WAAW,EACpC,eAAe,EAClB,EAAE,EAAE;IAEH,MAAM,oBAAoB,GAAG,gBAAgB,IAAI,aAAa,CAAC;IAC/D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAA2B,IAAI,CAAC,CAAC;IAE7E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,WAAW,GAAG,CAAC,eAAe,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;QAEzE,IAAI,aAAa,EAAE,CAAC;YAChB,MAAM,kBAAkB,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnD,IAAI,CAAC,SAAS,CACjB,CAAC,CAAC;YACH,UAAU,CAAC,kBAAkB,CAAC,CAAC;QACnC,CAAC;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC;IAEzD,OAAO,CACL,KAAC,GAAG,IAAC,gBAAgB,EAAE,oBAAoB,EAAE,EAAE,EAAC,kBAAkB,YAChE,MAAC,aAAa,IAAC,cAAc,mBAC1B,UAAU,EAAE,EACb,MAAC,SAAS,eACR,KAAC,uBAAuB,cACtB,wBACG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,UAAU,EAAE,KAAK,8BAA2B,GACxE,GACkB,EAC1B,KAAC,6BAA6B,cAC3B,iBAAiB,EAAE,GACU,IACtB,IACE,GACZ,CACP,CAAC;AACJ,CAAC,CAAA;AAED,eAAe,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ItemMenuConfig } from '@/types/ItemMenuConfig';
|
|
3
|
+
import { SvgIconProps } from '@mui/material';
|
|
4
|
+
interface BarraFerramentasHamburguerProps {
|
|
5
|
+
listaItemMenu?: ItemMenuConfig[];
|
|
6
|
+
background_color?: string;
|
|
7
|
+
color: string;
|
|
8
|
+
color_hover: string;
|
|
9
|
+
renderSocialMedia: () => React.ReactElement;
|
|
10
|
+
IconHamburguer: React.ElementType<SvgIconProps>;
|
|
11
|
+
logo: () => React.ReactElement;
|
|
12
|
+
padding?: string;
|
|
13
|
+
gap?: string;
|
|
14
|
+
}
|
|
15
|
+
declare const BarraFerramentasHamburguer: React.FC<BarraFerramentasHamburguerProps>;
|
|
16
|
+
export default BarraFerramentasHamburguer;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import Box from '@mui/material/Box';
|
|
5
|
+
import IconButton from '@mui/material/IconButton';
|
|
6
|
+
import Menu from '@mui/material/Menu';
|
|
7
|
+
import { Bar, ContainerRedeSocialHorizontal, CustomToolbar, SpanBody1 } from './BarraFerramentasStyled';
|
|
8
|
+
import ItemMenu from './ItemMenu';
|
|
9
|
+
// Função que processa a lista e adiciona afterClick somente ao ItemMenu
|
|
10
|
+
function renderListaItemMenu(listaItemMenu, handleCloseNavMenu) {
|
|
11
|
+
return listaItemMenu.map((item, index) => {
|
|
12
|
+
const el = item.component;
|
|
13
|
+
if (el.type === ItemMenu) {
|
|
14
|
+
return React.cloneElement(el, { afterClick: handleCloseNavMenu, key: index });
|
|
15
|
+
}
|
|
16
|
+
return React.cloneElement(el, { key: index });
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
const BarraFerramentasHamburguer = ({ listaItemMenu, renderSocialMedia, background_color, color, IconHamburguer, logo, padding = "8px", gap = '16px' }) => {
|
|
20
|
+
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
|
21
|
+
const handleOpenNavMenu = (event) => {
|
|
22
|
+
setAnchorElNav(event.currentTarget);
|
|
23
|
+
};
|
|
24
|
+
const handleCloseNavMenu = () => {
|
|
25
|
+
setAnchorElNav(null);
|
|
26
|
+
};
|
|
27
|
+
const renderMenu = () => {
|
|
28
|
+
return (_jsxs(Box, { children: [_jsx(IconButton, { size: "large", "aria-label": "menu hamburguer", "aria-haspopup": "true", onClick: handleOpenNavMenu, color: "inherit", children: _jsx(IconHamburguer, {}) }), _jsx(Menu, { anchorEl: anchorElNav, anchorOrigin: {
|
|
29
|
+
vertical: 'bottom',
|
|
30
|
+
horizontal: 'left',
|
|
31
|
+
}, keepMounted: true, transformOrigin: {
|
|
32
|
+
vertical: 'top',
|
|
33
|
+
horizontal: 'left',
|
|
34
|
+
}, open: Boolean(anchorElNav), onClose: handleCloseNavMenu, sx: { display: { xs: 'block', md: 'none', padding: '0' } }, children: _jsx("nav", { children: _jsx(Box, { display: 'flex', flexDirection: 'column', sx: { padding: padding, gap: gap }, children: listaItemMenu && listaItemMenu.length > 0
|
|
35
|
+
? (renderListaItemMenu(listaItemMenu, handleCloseNavMenu))
|
|
36
|
+
: (_jsx(SpanBody1, { text_color: color, children: "carregando..." })) }) }) })] }));
|
|
37
|
+
};
|
|
38
|
+
const background_color_bar = background_color || 'transparent';
|
|
39
|
+
return (_jsx(Bar, { background_color: background_color_bar, id: "barraferramentahamburguer", children: _jsxs(CustomToolbar, { disableGutters: true, children: [_jsx(Box, { children: renderMenu() }), _jsx(Box, { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", children: logo() }), _jsx(ContainerRedeSocialHorizontal, { children: renderSocialMedia() })] }) }));
|
|
40
|
+
};
|
|
41
|
+
export default BarraFerramentasHamburguer;
|
|
42
|
+
//# sourceMappingURL=BarraFerramentasHamburguer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BarraFerramentasHamburguer.js","sourceRoot":"","sources":["../../src/components/BarraFerramentasHamburguer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
interface BarraFerramentasSaaSProps {
|
|
3
|
+
background_color?: string;
|
|
4
|
+
maxWidth?: string;
|
|
5
|
+
renderLeft: () => React.ReactElement;
|
|
6
|
+
renderMiddle: () => React.ReactElement;
|
|
7
|
+
renderRigth: () => React.ReactElement;
|
|
8
|
+
}
|
|
9
|
+
declare const BarraFerramentasSaaS: React.FC<BarraFerramentasSaaSProps>;
|
|
10
|
+
export default BarraFerramentasSaaS;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Bar, CustomToolbar } from './BarraFerramentasStyled';
|
|
4
|
+
import { styled } from '@mui/material';
|
|
5
|
+
const DivStyled = styled('div')({
|
|
6
|
+
display: 'grid',
|
|
7
|
+
gridTemplateColumns: 'auto 1fr auto',
|
|
8
|
+
alignItems: 'center',
|
|
9
|
+
width: '100%',
|
|
10
|
+
heigth: '100%',
|
|
11
|
+
});
|
|
12
|
+
const BarraFerramentasSaaS = ({ renderLeft, renderMiddle, renderRigth, maxWidth = '1200px', background_color = "transparent", }) => {
|
|
13
|
+
return (_jsx(Bar, { background_color: background_color, id: "barraferramentas", children: _jsx(CustomToolbar, { disableGutters: true, maxWidth: maxWidth, children: _jsxs(DivStyled, { children: [renderLeft(), renderMiddle(), renderRigth()] }) }) }));
|
|
14
|
+
};
|
|
15
|
+
BarraFerramentasSaaS.displayName = "BarraFerramentasSaaS"; // para DevTools
|
|
16
|
+
BarraFerramentasSaaS.typeName = "BarraFerramentasSaaS"; // para seu código
|
|
17
|
+
export default BarraFerramentasSaaS;
|
|
18
|
+
//# sourceMappingURL=BarraFerramentasSaaS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BarraFerramentasSaaS.js","sourceRoot":"","sources":["../../src/components/BarraFerramentasSaaS.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAUvC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9B,OAAO,EAAE,MAAM;IACf,mBAAmB,EAAE,eAAe;IACpC,UAAU,EAAE,QAAQ;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC,CAAC;AAEH,MAAM,oBAAoB,GAAwC,CAAC,EAC/D,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAQ,GAAG,QAAQ,EACnB,gBAAgB,GAAG,aAAa,GACnC,EAAE,EAAE;IAEH,OAAO,CACL,KAAC,GAAG,IAAC,gBAAgB,EAAE,gBAAgB,EAAE,EAAE,EAAC,kBAAkB,YAC5D,KAAC,aAAa,IAAC,cAAc,QAAC,QAAQ,EAAE,QAAQ,YAC9C,MAAC,SAAS,eACP,UAAU,EAAE,EACZ,YAAY,EAAE,EACd,WAAW,EAAE,IACJ,GACE,GACZ,CACP,CAAC;AACJ,CAAC,CAAA;AAED,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC,CAAC,gBAAgB;AAC1E,oBAA4B,CAAC,QAAQ,GAAG,sBAAsB,CAAC,CAAC,kBAAkB;AAEnF,eAAe,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export declare const CustomToolbar: import("@emotion/styled").StyledComponent<import("@mui/material").ToolbarOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "style" | "classes" | "children" | "disableGutters" | "variant" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
2
|
+
maxWidth?: string;
|
|
3
|
+
padding?: string;
|
|
4
|
+
}, {}, {}>;
|
|
5
|
+
export declare const ContainerRedeSocialHorizontal: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
6
|
+
export declare const Bar: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
7
|
+
background_color: string;
|
|
8
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
9
|
+
export declare const SpanBody1: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
10
|
+
text_color: string;
|
|
11
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
12
|
+
export declare const SpanBody2: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
13
|
+
text_color: string;
|
|
14
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { styled } from '@mui/material';
|
|
2
|
+
import Toolbar from '@mui/material/Toolbar';
|
|
3
|
+
export const CustomToolbar = styled(Toolbar, {
|
|
4
|
+
shouldForwardProp: (prop) => !['maxWidth', 'padding'].includes(prop),
|
|
5
|
+
})(({ maxWidth = '1200px', padding = '0' }) => ({
|
|
6
|
+
margin: '0',
|
|
7
|
+
padding: padding,
|
|
8
|
+
width: '100%',
|
|
9
|
+
maxWidth: maxWidth,
|
|
10
|
+
}));
|
|
11
|
+
export const ContainerRedeSocialHorizontal = styled('div')({
|
|
12
|
+
display: 'flex',
|
|
13
|
+
flexDirection: 'row',
|
|
14
|
+
justifyContent: 'center',
|
|
15
|
+
margin: '16px 0px',
|
|
16
|
+
});
|
|
17
|
+
export const Bar = styled('div', {
|
|
18
|
+
shouldForwardProp: (prop) => !['background_color'].includes(prop),
|
|
19
|
+
})(({ background_color }) => ({
|
|
20
|
+
display: 'flex',
|
|
21
|
+
flexDirection: 'column', // Layout flex vertical
|
|
22
|
+
alignItems: 'center', // Centraliza horizontalmente
|
|
23
|
+
justifyContent: 'center', // Centraliza verticalmente
|
|
24
|
+
backgroundColor: background_color, // Define a cor de fundo
|
|
25
|
+
width: '100%', // Largura total
|
|
26
|
+
boxSizing: 'border-box',
|
|
27
|
+
position: 'relative',
|
|
28
|
+
}));
|
|
29
|
+
export const SpanBody1 = styled('span', {
|
|
30
|
+
shouldForwardProp: (prop) => !['text_color'].includes(prop),
|
|
31
|
+
})(({ theme, text_color }) => {
|
|
32
|
+
var _a, _b, _c, _d, _e, _f;
|
|
33
|
+
return ({
|
|
34
|
+
color: text_color,
|
|
35
|
+
// Tipografia
|
|
36
|
+
fontFamily: theme.typography.fontFamily,
|
|
37
|
+
fontWeight: (_a = theme.typography.body1) === null || _a === void 0 ? void 0 : _a.fontWeight,
|
|
38
|
+
fontStyle: (_b = theme.typography.body1) === null || _b === void 0 ? void 0 : _b.fontStyle,
|
|
39
|
+
lineHeight: (_c = theme.typography.body1) === null || _c === void 0 ? void 0 : _c.lineHeight,
|
|
40
|
+
letterSpacing: (_d = theme.typography.body1) === null || _d === void 0 ? void 0 : _d.letterSpacing,
|
|
41
|
+
fontSize: (_e = theme.typography.body1) === null || _e === void 0 ? void 0 : _e.fontSize,
|
|
42
|
+
margin: (_f = theme.typography.body1) === null || _f === void 0 ? void 0 : _f.margin,
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
export const SpanBody2 = styled('span', {
|
|
46
|
+
shouldForwardProp: (prop) => !['text_color'].includes(prop),
|
|
47
|
+
})(({ theme, text_color }) => {
|
|
48
|
+
var _a, _b, _c, _d, _e, _f;
|
|
49
|
+
return ({
|
|
50
|
+
color: text_color,
|
|
51
|
+
// Tipografia
|
|
52
|
+
fontFamily: theme.typography.fontFamily,
|
|
53
|
+
fontWeight: (_a = theme.typography.body2) === null || _a === void 0 ? void 0 : _a.fontWeight,
|
|
54
|
+
fontStyle: (_b = theme.typography.body2) === null || _b === void 0 ? void 0 : _b.fontStyle,
|
|
55
|
+
lineHeight: (_c = theme.typography.body2) === null || _c === void 0 ? void 0 : _c.lineHeight,
|
|
56
|
+
letterSpacing: (_d = theme.typography.body2) === null || _d === void 0 ? void 0 : _d.letterSpacing,
|
|
57
|
+
fontSize: (_e = theme.typography.body2) === null || _e === void 0 ? void 0 : _e.fontSize,
|
|
58
|
+
margin: (_f = theme.typography.body2) === null || _f === void 0 ? void 0 : _f.margin,
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
//# sourceMappingURL=BarraFerramentasStyled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BarraFerramentasStyled.js","sourceRoot":"","sources":["../../src/components/BarraFerramentasStyled.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface ItemMenuProps {
|
|
3
|
+
url: string;
|
|
4
|
+
aria_label: string;
|
|
5
|
+
background_color?: string;
|
|
6
|
+
background_color_hover?: string;
|
|
7
|
+
color: string;
|
|
8
|
+
color_hover?: string;
|
|
9
|
+
border_color?: string;
|
|
10
|
+
border_radius?: string;
|
|
11
|
+
text_decoration: 'none' | 'underline';
|
|
12
|
+
layout: 'button' | 'link';
|
|
13
|
+
width: string;
|
|
14
|
+
margin?: string;
|
|
15
|
+
children: React.ReactNode;
|
|
16
|
+
afterClick?: () => void;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* IMPORTANTE:
|
|
20
|
+
*
|
|
21
|
+
* Todo componente estilizado criado no projeto principal que for usado no menu
|
|
22
|
+
* (como ItemMenuCustom) deve definir a propriedade estática `typeName`:
|
|
23
|
+
*
|
|
24
|
+
* (ItemMenuCustom as any).typeName = "ItemMenu";
|
|
25
|
+
*
|
|
26
|
+
* Isso garante que a lib consiga identificar o componente corretamente e
|
|
27
|
+
* injetar o `afterClick` para fechar o menu ou executar ações adicionais.
|
|
28
|
+
*/
|
|
29
|
+
declare const ItemMenu: React.FC<ItemMenuProps>;
|
|
30
|
+
export default ItemMenu;
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { styled } from '@mui/material';
|
|
4
|
+
const ButtonStyled = styled('a', {
|
|
5
|
+
shouldForwardProp: (prop) => ![
|
|
6
|
+
'background_color',
|
|
7
|
+
'background_color_hover',
|
|
8
|
+
'color',
|
|
9
|
+
'color_hover',
|
|
10
|
+
'padding',
|
|
11
|
+
'border_radius',
|
|
12
|
+
'border_color',
|
|
13
|
+
'border_color_underline',
|
|
14
|
+
'width',
|
|
15
|
+
'margin',
|
|
16
|
+
].includes(prop),
|
|
17
|
+
})(({ background_color, background_color_hover, color, color_hover, padding, border_radius, border_color, border_color_underline, width, margin, }) => ({
|
|
18
|
+
width: width,
|
|
19
|
+
cursor: 'pointer',
|
|
20
|
+
textDecoration: 'none',
|
|
21
|
+
textTransform: 'none',
|
|
22
|
+
textAlign: 'center',
|
|
23
|
+
boxShadow: 'none',
|
|
24
|
+
backgroundColor: background_color,
|
|
25
|
+
color: color,
|
|
26
|
+
border: `1px solid ${border_color}`,
|
|
27
|
+
borderRadius: border_radius,
|
|
28
|
+
padding: padding,
|
|
29
|
+
margin: margin,
|
|
30
|
+
'&:hover': {
|
|
31
|
+
backgroundColor: background_color_hover,
|
|
32
|
+
borderBottom: `1px solid ${border_color_underline}`,
|
|
33
|
+
color: color_hover,
|
|
34
|
+
},
|
|
35
|
+
}));
|
|
36
|
+
/**
|
|
37
|
+
* IMPORTANTE:
|
|
38
|
+
*
|
|
39
|
+
* Todo componente estilizado criado no projeto principal que for usado no menu
|
|
40
|
+
* (como ItemMenuCustom) deve definir a propriedade estática `typeName`:
|
|
41
|
+
*
|
|
42
|
+
* (ItemMenuCustom as any).typeName = "ItemMenu";
|
|
43
|
+
*
|
|
44
|
+
* Isso garante que a lib consiga identificar o componente corretamente e
|
|
45
|
+
* injetar o `afterClick` para fechar o menu ou executar ações adicionais.
|
|
46
|
+
*/
|
|
47
|
+
const ItemMenu = ({ url, aria_label, background_color, background_color_hover, color, color_hover, border_radius, border_color, text_decoration = 'none', layout, width, margin, children, afterClick }) => {
|
|
48
|
+
const backgroundColor = background_color !== null && background_color !== void 0 ? background_color : 'transparent';
|
|
49
|
+
const backgroundColorHover = background_color_hover !== null && background_color_hover !== void 0 ? background_color_hover : backgroundColor;
|
|
50
|
+
const colorHover = color_hover !== null && color_hover !== void 0 ? color_hover : color;
|
|
51
|
+
const borderRadius = border_radius !== null && border_radius !== void 0 ? border_radius : '0px';
|
|
52
|
+
const padding = layout == 'button' ? '8px 24px' : '0px';
|
|
53
|
+
const borderColor = text_decoration == 'underline' ? 'transparent' : (border_color !== null && border_color !== void 0 ? border_color : 'transparent');
|
|
54
|
+
const borderColorUnderline = (text_decoration == 'underline') ? color : (border_color !== null && border_color !== void 0 ? border_color : 'transparent');
|
|
55
|
+
const marginButton = margin !== null && margin !== void 0 ? margin : '0px';
|
|
56
|
+
const handleClick = (e) => {
|
|
57
|
+
var _a;
|
|
58
|
+
e.preventDefault();
|
|
59
|
+
const id = url.replace('#', '');
|
|
60
|
+
if (afterClick) {
|
|
61
|
+
afterClick(); // Fecha o Menu primeiro
|
|
62
|
+
// Faz o scroll com delay, para evitar reflow pesado
|
|
63
|
+
setTimeout(() => {
|
|
64
|
+
var _a;
|
|
65
|
+
(_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
|
|
66
|
+
}, 250);
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
// Se não houver afterClick, scroll normal
|
|
70
|
+
(_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
if (url.indexOf('http') != -1) {
|
|
74
|
+
return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, border_radius: borderRadius, border_color: borderColor, border_color_underline: borderColorUnderline, padding: padding, margin: marginButton, "aria-label": aria_label, target: "_blank", rel: "noopener noreferrer", children: children }));
|
|
75
|
+
}
|
|
76
|
+
else if (url.indexOf('/#') != -1 || url.startsWith('/')) {
|
|
77
|
+
return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, border_radius: borderRadius, border_color: borderColor, border_color_underline: borderColorUnderline, padding: padding, margin: marginButton, "aria-label": aria_label, children: children }));
|
|
78
|
+
}
|
|
79
|
+
else {
|
|
80
|
+
return (_jsx(ButtonStyled, { href: url, onClick: handleClick, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, border_radius: borderRadius, border_color: borderColor, border_color_underline: borderColorUnderline, padding: padding, margin: marginButton, "aria-label": aria_label, children: children }));
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
ItemMenu.displayName = "ItemMenu"; // para DevTools
|
|
84
|
+
ItemMenu.typeName = "ItemMenu"; // para seu código
|
|
85
|
+
export default ItemMenu;
|
|
86
|
+
//# sourceMappingURL=ItemMenu.js.map
|