contentoh-components-library 21.2.26 → 21.2.27

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.
Files changed (5) hide show
  1. package/dist/components/atoms/VerticalSideMenuMainPage/index.js +52 -45
  2. package/dist/components/atoms/VerticalSideMenuMainPage/styles.js +25 -18
  3. package/package.json +1 -1
  4. package/src/components/atoms/VerticalSideMenuMainPage/index.js +53 -40
  5. package/src/components/atoms/VerticalSideMenuMainPage/styles.js +136 -68
package/dist/components/atoms/VerticalSideMenuMainPage/index.js CHANGED
@@ -25,60 +25,67 @@ var _jsxRuntime = require("react/jsx-runtime");
25
25
 
26
26
  var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
27
27
  var _ref$menuoption = _ref.menuoption,
28
- menuoption = _ref$menuoption === void 0 ? [] : _ref$menuoption;
28
+ menuoption = _ref$menuoption === void 0 ? [] : _ref$menuoption,
29
+ conteinerdash = _ref.conteinerdash;
29
30
 
30
31
  var _useState = (0, _react.useState)(),
31
32
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
32
33
  trueBar = _useState2[0],
33
34
  setTrueBar = _useState2[1];
34
35
 
35
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
36
- bar: trueBar,
37
- onMouseOver: function onMouseOver() {
38
- return setTrueBar(true);
39
- },
40
- onMouseOut: function onMouseOut() {
41
- return setTrueBar(false);
42
- },
43
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
44
- className: "navbar-top",
45
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
46
- src: trueBar ? _iconLogoContentoh.default : _iconLogo.default,
47
- alt: "Logo",
48
- className: "logo"
49
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
50
- className: "option",
51
- children: menuoption.map(function (item, index) {
52
- var _item$suboption;
36
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.BrowserRouter, {
37
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerPrincipal, {
38
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
39
+ bar: trueBar,
40
+ onMouseOver: function onMouseOver() {
41
+ return setTrueBar(true);
42
+ },
43
+ onMouseOut: function onMouseOut() {
44
+ return setTrueBar(false);
45
+ },
46
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
47
+ className: "navbar-top",
48
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
49
+ src: trueBar ? _iconLogoContentoh.default : _iconLogo.default,
50
+ alt: "Logo",
51
+ className: "logo"
52
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
53
+ className: "option",
54
+ children: menuoption.map(function (item, index) {
55
+ var _item$suboption;
53
56
 
54
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.RouterComponent, {
55
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, {
56
- to: item.path,
57
- className: "option-link",
58
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
59
- src: item.icon,
60
- alt: item.title
61
- }), trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
62
- children: item.title
63
- })]
64
- }), item.suboption !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
65
- children: item === null || item === void 0 ? void 0 : (_item$suboption = item.suboption) === null || _item$suboption === void 0 ? void 0 : _item$suboption.map(function (subitem) {
66
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
67
- className: "sub-option",
68
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.NavLink, {
69
- to: subitem.path,
70
- className: "sub-option-link",
71
- children: trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
72
- children: subitem.title
73
- })
57
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.RouterComponent, {
58
+ bar: trueBar,
59
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.NavLinkOption, {
60
+ to: item.path,
61
+ bar: trueBar,
62
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
63
+ src: item.icon,
64
+ alt: item.title
65
+ }), trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
66
+ children: item.title
67
+ })]
68
+ }), item.suboption !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
69
+ children: item === null || item === void 0 ? void 0 : (_item$suboption = item.suboption) === null || _item$suboption === void 0 ? void 0 : _item$suboption.map(function (subitem) {
70
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
71
+ className: "sub-option",
72
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NavLinkOption, {
73
+ to: subitem.path,
74
+ className: "sub-option-link",
75
+ bar: trueBar,
76
+ children: trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
77
+ children: subitem.title
78
+ })
79
+ })
80
+ });
74
81
  })
75
- });
76
- })
77
- })]
78
- }, index);
82
+ })]
83
+ }, index);
84
+ })
85
+ })]
79
86
  })
80
- })]
81
- })
87
+ }), conteinerdash]
88
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GlobalStyle, {})]
82
89
  });
83
90
  };
84
91
 
package/dist/components/atoms/VerticalSideMenuMainPage/styles.js CHANGED
@@ -2,20 +2,22 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
 
5
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
8
- exports.RouterComponent = exports.Container = void 0;
10
+ exports.RouterComponent = exports.NavLinkOption = exports.GlobalStyle = exports.ContainerPrincipal = exports.Container = void 0;
9
11
 
10
12
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
11
13
 
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
14
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
13
15
 
14
16
  var _reactRouterDom = require("react-router-dom");
15
17
 
16
- var _templateObject, _templateObject2;
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
17
19
 
18
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: 98%;\n box-sizing: border-box;\n padding: 23px 10px 70px 10px;\n flex-direction: column;\n justify-content: space-between;\n overflow: auto;\n width: ", "px;\n border-radius: ", "px;\n background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n scrollbar-width: none;\n display: flex;\n text-align: center;\n transition: width 0.3s linear;\n margin: 10px 0 10px 20px;\n & + * {\n margin-left: 30px;\n }\n .navbar-top {\n transition: all 0.3s linear;\n .option {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n margin-top: ", "%;\n padding-left: ", "px;\n .active {\n background: #e33aa9;\n }\n & + div {\n margin-top: 5px;\n }\n a {\n height: ", "px;\n display: flex;\n justify-content: ", ";\n border-radius: ", "px;\n align-items: center;\n font-family: sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 21px;\n letter-spacing: -0.015em;\n color: #fafafa;\n text-decoration: none;\n &.option-link {\n cursor: pointer;\n width: ", "px;\n margin: 5px 0;\n padding-left: ", "px;\n }\n p {\n cursor: pointer;\n margin: 0%;\n pointer-events: none;\n }\n img {\n width: 22px;\n & + * {\n margin-left: 12px;\n }\n }\n }\n .option-link:hover {\n background: #e33aa9;\n }\n .sub-option {\n display: flex;\n flex-direction: column;\n padding-left: ", "px;\n height: auto;\n width: auto;\n a {\n display: flex;\n justify-content: flex-start;\n text-decoration: none;\n position: relative;\n font-size: 13px;\n border-left: 1px solid #f0eef2;\n border-radius: 0;\n color: #f0eef2;\n padding-top: 14px;\n padding-left: 12px;\n height: 25px;\n &::before {\n border-left: 1px solid #e33aa9;\n width: 10px;\n content: \"\";\n border-radius: 50%;\n height: 10px;\n background-color: white;\n position: absolute;\n bottom: 0;\n left: ", "%;\n }\n &.active {\n background: none;\n &::before {\n background-color: #e33aa9;\n }\n }\n }\n }\n }\n }\n"])), function (_ref) {
20
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: 98%;\n box-sizing: border-box;\n padding: 23px 10px 70px 10px;\n flex-direction: column;\n justify-content: space-between;\n overflow: none;\n width: ", "px;\n border-radius: ", "px;\n background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n scrollbar-width: none;\n display: flex;\n text-align: center;\n transition: width 0.3s linear;\n margin: 10px 0 10px 20px;\n & + * {\n margin-left: 30px;\n }\n .navbar-top {\n transition: all 0.3s linear;\n .option {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n margin-top: ", "%;\n padding-left: ", "px;\n .active {\n background: #e33aa9;\n }\n & + div {\n margin-top: 5px;\n }\n .sub-option {\n display: flex;\n flex-direction: column;\n padding-left: ", "px;\n height: auto;\n width: auto;\n }\n }\n }\n"])), function (_ref) {
19
21
  var bar = _ref.bar;
20
22
  return bar ? 260 : 58;
21
23
  }, function (_ref2) {
@@ -26,30 +28,35 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
26
28
  return bar === "" ? 145 : 40;
27
29
  }, function (_ref4) {
28
30
  var bar = _ref4.bar;
29
- return bar ? 5 : 0;
31
+ return bar ? 10 : 0;
30
32
  }, function (_ref5) {
31
33
  var bar = _ref5.bar;
32
- return bar ? 32 : 38;
33
- }, function (_ref6) {
34
+ return bar ? 28 : 20;
35
+ });
36
+
37
+ exports.Container = Container;
38
+ var RouterComponent = (0, _styledComponents.default)(_reactRouterDom.BrowserRouter)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
39
+ exports.RouterComponent = RouterComponent;
40
+ var NavLinkOption = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n height: ", "px;\n display: flex;\n justify-content: ", ";\n border-radius: ", "px;\n align-items: center;\n font-family: sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 21px;\n margin: 5px 0;\n letter-spacing: -0.015em;\n color: #fafafa;\n text-decoration: none;\n cursor: pointer;\n width: ", "px;\n padding: 0 17px;\n &:hover {\n background: #e33aa9;\n }\n p {\n cursor: pointer;\n margin: 0%;\n pointer-events: none;\n }\n img {\n width: 22px;\n & + * {\n margin-left: 12px;\n }\n }\n &.sub-option-link {\n display: flex;\n justify-content: flex-start;\n text-decoration: none;\n position: relative;\n font-size: 13px;\n border-left: 1px solid #f0eef2;\n border-radius: 0;\n color: #f0eef2;\n padding-top: 14px;\n height: 25px;\n margin: 0;\n padding-left: 12px;\n &::before {\n border-left: 1px solid #e33aa9;\n width: 10px;\n content: \"\";\n border-radius: 50%;\n height: 10px;\n background-color: white;\n position: absolute;\n bottom: 0;\n left: ", "%;\n }\n &.active {\n background: none;\n &::before {\n background-color: #e33aa9;\n }\n }\n &:hover {\n background: none;\n }\n }\n"])), function (_ref6) {
34
41
  var bar = _ref6.bar;
35
- return bar ? "flex-start" : "center";
42
+ return bar ? 32 : 38;
36
43
  }, function (_ref7) {
37
44
  var bar = _ref7.bar;
38
- return bar ? 18 : 100;
45
+ return bar ? "flex-start" : "center";
39
46
  }, function (_ref8) {
40
47
  var bar = _ref8.bar;
41
- return bar ? "160" : "38";
48
+ return bar ? 18 : 100;
42
49
  }, function (_ref9) {
43
50
  var bar = _ref9.bar;
44
- return bar ? 15 : 0;
51
+ return bar ? "160" : "38";
45
52
  }, function (_ref10) {
46
53
  var bar = _ref10.bar;
47
- return bar ? 28 : 20;
48
- }, function (_ref11) {
49
- var bar = _ref11.bar;
50
- return bar ? -9 : -40;
54
+ return bar ? -4 : -16;
51
55
  });
56
+ exports.NavLinkOption = NavLinkOption;
52
57
 
53
- exports.Container = Container;
54
- var RouterComponent = (0, _styledComponents.default)(_reactRouterDom.BrowserRouter)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
55
- exports.RouterComponent = RouterComponent;
58
+ var ContainerPrincipal = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n display: flex;\n height: 100vh;\n justify-content: space-between;\n"])));
59
+
60
+ exports.ContainerPrincipal = ContainerPrincipal;
61
+ var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n@font-face {\n font-family: 'Avenir Next';\n font-style: normal;\n font-weight: normal;\n src:\n url('../../assets/fonts/AvenirNextLTPro-Bold.otf') format('otf'),\n url('../../assets/fonts/AvenirNextLTPro-Regular.otf') format('otf');\n}\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, font, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, figure, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td {\n margin: 0;\n padding: 0;\n border: 0;\n outline: 0;\n font-size: 100%;\n vertical-align: baseline;\n background: transparent;\n}\nbody {\n line-height: 1;\n}\nol, ul {\n list-style: none;\n}\nblockquote, q {\n quotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n content: '';\n content: none;\n}\n:focus {\n outline: 0;\n}\nins {\n text-decoration: none;\n}\ndel {\n text-decoration: line-through;\n}\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n"])));
62
+ exports.GlobalStyle = GlobalStyle;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.2.26",
3
+ "version": "21.2.27",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
package/src/components/atoms/VerticalSideMenuMainPage/index.js CHANGED
@@ -1,51 +1,64 @@
1
1
  import {
2
2
  Container,
3
- RouterComponent
3
+ RouterComponent,
4
+ NavLinkOption,
5
+ ContainerPrincipal,
6
+ GlobalStyle,
4
7
  } from "./styles";
5
8
  import iconLogoContentoh from "../../../assets/images/verticalSideMenuMainPage/iconLogoContentoh.svg";
6
9
  import iconLogo from "../../../assets/images/verticalSideMenuMainPage/iconLogo.svg";
7
10
  import React, { useState } from "react";
8
- import { NavLink } from "react-router-dom";
11
+ import { BrowserRouter as Router } from "react-router-dom";
9
12
 
10
- export const VerticalSideMenuMainPage = ({ menuoption = []}) => {
13
+ export const VerticalSideMenuMainPage = ({
14
+ menuoption = [],
15
+ conteinerdash,
16
+ }) => {
11
17
  const [trueBar, setTrueBar] = useState();
12
18
  return (
13
- <Container
14
- bar={trueBar}
15
- onMouseOver={() => setTrueBar(true)}
16
- onMouseOut={() => setTrueBar(false)}
17
- >
18
- <div className="navbar-top">
19
- <img
20
- src={trueBar ? iconLogoContentoh : iconLogo}
21
- alt="Logo"
22
- className="logo"
23
- ></img>
24
- <div className="option">
25
- {menuoption.map((item, index) => (
26
- <RouterComponent key={index}>
27
- <NavLink to={item.path} className="option-link">
28
- <img src={item.icon} alt={item.title}></img>
29
- {trueBar && <p>{item.title}</p>}
30
- </NavLink>
31
- {item.suboption !== undefined && (
32
- <>
33
- {item?.suboption?.map((subitem) => (
34
- <div className="sub-option">
35
- <NavLink
36
- to={subitem.path}
37
- className="sub-option-link"
38
- >
39
- {trueBar && <p>{subitem.title}</p>}
40
- </NavLink>
41
- </div>
42
- ))}
43
- </>
44
- )}
45
- </RouterComponent>
46
- ))}
47
- </div>
48
- </div>
49
- </Container>
19
+ <Router>
20
+ <ContainerPrincipal>
21
+ <Container
22
+ bar={trueBar}
23
+ onMouseOver={() => setTrueBar(true)}
24
+ onMouseOut={() => setTrueBar(false)}
25
+ >
26
+ <div className="navbar-top">
27
+ <img
28
+ src={trueBar ? iconLogoContentoh : iconLogo}
29
+ alt="Logo"
30
+ className="logo"
31
+ ></img>
32
+ <div className="option">
33
+ {menuoption.map((item, index) => (
34
+ <RouterComponent key={index} bar={trueBar}>
35
+ <NavLinkOption to={item.path} bar={trueBar}>
36
+ <img src={item.icon} alt={item.title}></img>
37
+ {trueBar && <p>{item.title}</p>}
38
+ </NavLinkOption>
39
+ {item.suboption !== undefined && (
40
+ <>
41
+ {item?.suboption?.map((subitem) => (
42
+ <div className="sub-option">
43
+ <NavLinkOption
44
+ to={subitem.path}
45
+ className="sub-option-link"
46
+ bar={trueBar}
47
+ >
48
+ {trueBar && <p>{subitem.title}</p>}
49
+ </NavLinkOption>
50
+ </div>
51
+ ))}
52
+ </>
53
+ )}
54
+ </RouterComponent>
55
+ ))}
56
+ </div>
57
+ </div>
58
+ </Container>
59
+ {conteinerdash}
60
+ </ContainerPrincipal>
61
+ <GlobalStyle />
62
+ </Router>
50
63
  );
51
64
  };
package/src/components/atoms/VerticalSideMenuMainPage/styles.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import styled from "styled-components";
2
- import { BrowserRouter as Router } from "react-router-dom";
2
+ import { BrowserRouter as Router, NavLink } from "react-router-dom";
3
+ import { createGlobalStyle } from "styled-components";
3
4
 
4
5
  export const Container = styled.div`
5
6
  height: 98%;
@@ -7,7 +8,7 @@ export const Container = styled.div`
7
8
  padding: 23px 10px 70px 10px;
8
9
  flex-direction: column;
9
10
  justify-content: space-between;
10
- overflow: auto;
11
+ overflow: none;
11
12
  width: ${({ bar }) => (bar ? 260 : 58)}px;
12
13
  border-radius: ${({ bar }) => (bar ? 20 : 50)}px;
13
14
  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
@@ -26,87 +27,154 @@ export const Container = styled.div`
26
27
  flex-direction: column;
27
28
  align-items: flex-start;
28
29
  margin-top: ${({ bar }) => (bar === "" ? 145 : 40)}%;
29
- padding-left: ${({ bar }) => (bar ? 5 : 0)}px;
30
+ padding-left: ${({ bar }) => (bar ? 10 : 0)}px;
30
31
  .active {
31
32
  background: #e33aa9;
32
33
  }
33
34
  & + div {
34
35
  margin-top: 5px;
35
36
  }
36
- a {
37
- height: ${({ bar }) => (bar ? 32 : 38)}px;
38
- display: flex;
39
- justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
40
- border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
41
- align-items: center;
42
- font-family: sans-serif;
43
- font-style: normal;
44
- font-weight: 400;
45
- font-size: 18px;
46
- line-height: 21px;
47
- letter-spacing: -0.015em;
48
- color: #fafafa;
49
- text-decoration: none;
50
- &.option-link {
51
- cursor: pointer;
52
- width: ${({ bar }) => (bar ? "160" : "38")}px;
53
- margin: 5px 0;
54
- padding-left: ${({ bar }) => (bar ? 15 : 0)}px;
55
- }
56
- p {
57
- cursor: pointer;
58
- margin: 0%;
59
- pointer-events: none;
60
- }
61
- img {
62
- width: 22px;
63
- & + * {
64
- margin-left: 12px;
65
- }
66
- }
67
- }
68
- .option-link:hover {
69
- background: #e33aa9;
70
- }
71
37
  .sub-option {
72
38
  display: flex;
73
39
  flex-direction: column;
74
40
  padding-left: ${({ bar }) => (bar ? 28 : 20)}px;
75
41
  height: auto;
76
42
  width: auto;
77
- a {
78
- display: flex;
79
- justify-content: flex-start;
80
- text-decoration: none;
81
- position: relative;
82
- font-size: 13px;
83
- border-left: 1px solid #f0eef2;
84
- border-radius: 0;
85
- color: #f0eef2;
86
- padding-top: 14px;
87
- padding-left: 12px;
88
- height: 25px;
89
- &::before {
90
- border-left: 1px solid #e33aa9;
91
- width: 10px;
92
- content: "";
93
- border-radius: 50%;
94
- height: 10px;
95
- background-color: white;
96
- position: absolute;
97
- bottom: 0;
98
- left: ${({ bar }) => (bar ? -9 : -40)}%;
99
- }
100
- &.active {
101
- background: none;
102
- &::before {
103
- background-color: #e33aa9;
104
- }
105
- }
106
- }
107
43
  }
108
44
  }
109
45
  }
110
46
  `;
111
47
 
112
48
  export const RouterComponent = styled(Router)``;
49
+
50
+ export const NavLinkOption = styled(NavLink)`
51
+ height: ${({ bar }) => (bar ? 32 : 38)}px;
52
+ display: flex;
53
+ justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
54
+ border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
55
+ align-items: center;
56
+ font-family: sans-serif;
57
+ font-style: normal;
58
+ font-weight: 400;
59
+ font-size: 18px;
60
+ line-height: 21px;
61
+ margin: 5px 0;
62
+ letter-spacing: -0.015em;
63
+ color: #fafafa;
64
+ text-decoration: none;
65
+ cursor: pointer;
66
+ width: ${({ bar }) => (bar ? "160" : "38")}px;
67
+ padding: 0 17px;
68
+ &:hover {
69
+ background: #e33aa9;
70
+ }
71
+ p {
72
+ cursor: pointer;
73
+ margin: 0%;
74
+ pointer-events: none;
75
+ }
76
+ img {
77
+ width: 22px;
78
+ & + * {
79
+ margin-left: 12px;
80
+ }
81
+ }
82
+ &.sub-option-link {
83
+ display: flex;
84
+ justify-content: flex-start;
85
+ text-decoration: none;
86
+ position: relative;
87
+ font-size: 13px;
88
+ border-left: 1px solid #f0eef2;
89
+ border-radius: 0;
90
+ color: #f0eef2;
91
+ padding-top: 14px;
92
+ height: 25px;
93
+ margin: 0;
94
+ padding-left: 12px;
95
+ &::before {
96
+ border-left: 1px solid #e33aa9;
97
+ width: 10px;
98
+ content: "";
99
+ border-radius: 50%;
100
+ height: 10px;
101
+ background-color: white;
102
+ position: absolute;
103
+ bottom: 0;
104
+ left: ${({ bar }) => (bar ? -4 : -16)}%;
105
+ }
106
+ &.active {
107
+ background: none;
108
+ &::before {
109
+ background-color: #e33aa9;
110
+ }
111
+ }
112
+ &:hover {
113
+ background: none;
114
+ }
115
+ }
116
+ `;
117
+
118
+ export const ContainerPrincipal = styled.div`
119
+ width: 100%;
120
+ display: flex;
121
+ height: 100vh;
122
+ justify-content: space-between;
123
+ `;
124
+
125
+ export const GlobalStyle = createGlobalStyle`
126
+ @font-face {
127
+ font-family: 'Avenir Next';
128
+ font-style: normal;
129
+ font-weight: normal;
130
+ src:
131
+ url('../../assets/fonts/AvenirNextLTPro-Bold.otf') format('otf'),
132
+ url('../../assets/fonts/AvenirNextLTPro-Regular.otf') format('otf');
133
+ }
134
+
135
+ html, body, div, span, applet, object, iframe,
136
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
137
+ a, abbr, acronym, address, big, cite, code,
138
+ del, dfn, em, font, img, ins, kbd, q, s, samp,
139
+ small, strike, strong, sub, sup, tt, var,
140
+ b, u, i, center,
141
+ dl, dt, dd, ol, ul, li,
142
+ fieldset, figure, form, label, legend,
143
+ table, caption, tbody, tfoot, thead, tr, th, td {
144
+ margin: 0;
145
+ padding: 0;
146
+ border: 0;
147
+ outline: 0;
148
+ font-size: 100%;
149
+ vertical-align: baseline;
150
+ background: transparent;
151
+ }
152
+ body {
153
+ line-height: 1;
154
+ }
155
+ ol, ul {
156
+ list-style: none;
157
+ }
158
+ blockquote, q {
159
+ quotes: none;
160
+ }
161
+ blockquote:before, blockquote:after,
162
+ q:before, q:after {
163
+ content: '';
164
+ content: none;
165
+ }
166
+ :focus {
167
+ outline: 0;
168
+ }
169
+ ins {
170
+ text-decoration: none;
171
+ }
172
+ del {
173
+ text-decoration: line-through;
174
+ }
175
+ table {
176
+ border-collapse: collapse;
177
+ border-spacing: 0;
178
+ }
179
+
180
+ `;