contentoh-components-library 21.2.24 → 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.
- package/dist/components/atoms/VerticalSideMenuMainPage/index.js +53 -46
- package/dist/components/atoms/VerticalSideMenuMainPage/styles.js +29 -18
- package/package.json +1 -1
- package/src/components/atoms/VerticalSideMenuMainPage/index.js +55 -37
- package/src/components/atoms/VerticalSideMenuMainPage/styles.js +140 -69
|
@@ -24,61 +24,68 @@ var _reactRouterDom = require("react-router-dom");
|
|
|
24
24
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
25
|
|
|
26
26
|
var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
|
|
27
|
-
var menuoption = _ref.menuoption
|
|
27
|
+
var _ref$menuoption = _ref.menuoption,
|
|
28
|
+
menuoption = _ref$menuoption === void 0 ? [] : _ref$menuoption,
|
|
29
|
+
conteinerdash = _ref.conteinerdash;
|
|
28
30
|
|
|
29
31
|
var _useState = (0, _react.useState)(),
|
|
30
32
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
31
33
|
trueBar = _useState2[0],
|
|
32
34
|
setTrueBar = _useState2[1];
|
|
33
35
|
|
|
34
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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
|
-
}
|
|
82
|
+
})]
|
|
83
|
+
}, index);
|
|
84
|
+
})
|
|
85
|
+
})]
|
|
79
86
|
})
|
|
80
|
-
})]
|
|
81
|
-
})
|
|
87
|
+
}), conteinerdash]
|
|
88
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GlobalStyle, {})]
|
|
82
89
|
});
|
|
83
90
|
};
|
|
84
91
|
|
|
@@ -2,50 +2,61 @@
|
|
|
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.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 =
|
|
14
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
15
|
+
|
|
16
|
+
var _reactRouterDom = require("react-router-dom");
|
|
13
17
|
|
|
14
|
-
var _templateObject;
|
|
18
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
15
19
|
|
|
16
|
-
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:
|
|
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) {
|
|
17
21
|
var bar = _ref.bar;
|
|
18
|
-
return bar ?
|
|
22
|
+
return bar ? 260 : 58;
|
|
19
23
|
}, function (_ref2) {
|
|
20
24
|
var bar = _ref2.bar;
|
|
21
25
|
return bar ? 20 : 50;
|
|
22
26
|
}, function (_ref3) {
|
|
23
27
|
var bar = _ref3.bar;
|
|
24
|
-
return bar === "" ? 145 :
|
|
28
|
+
return bar === "" ? 145 : 40;
|
|
25
29
|
}, function (_ref4) {
|
|
26
30
|
var bar = _ref4.bar;
|
|
27
|
-
return bar ?
|
|
31
|
+
return bar ? 10 : 0;
|
|
28
32
|
}, function (_ref5) {
|
|
29
33
|
var bar = _ref5.bar;
|
|
30
|
-
return bar ?
|
|
31
|
-
}
|
|
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) {
|
|
32
41
|
var bar = _ref6.bar;
|
|
33
|
-
return bar ?
|
|
42
|
+
return bar ? 32 : 38;
|
|
34
43
|
}, function (_ref7) {
|
|
35
44
|
var bar = _ref7.bar;
|
|
36
|
-
return bar ?
|
|
45
|
+
return bar ? "flex-start" : "center";
|
|
37
46
|
}, function (_ref8) {
|
|
38
47
|
var bar = _ref8.bar;
|
|
39
|
-
return bar ?
|
|
48
|
+
return bar ? 18 : 100;
|
|
40
49
|
}, function (_ref9) {
|
|
41
50
|
var bar = _ref9.bar;
|
|
42
|
-
return bar ?
|
|
51
|
+
return bar ? "160" : "38";
|
|
43
52
|
}, function (_ref10) {
|
|
44
53
|
var bar = _ref10.bar;
|
|
45
|
-
return bar ?
|
|
46
|
-
}, function (_ref11) {
|
|
47
|
-
var bar = _ref11.bar;
|
|
48
|
-
return bar ? -4 : -34;
|
|
54
|
+
return bar ? -4 : -16;
|
|
49
55
|
});
|
|
56
|
+
exports.NavLinkOption = NavLinkOption;
|
|
57
|
+
|
|
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"])));
|
|
50
59
|
|
|
51
|
-
exports.
|
|
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,46 +1,64 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
Container,
|
|
3
|
+
RouterComponent,
|
|
4
|
+
NavLinkOption,
|
|
5
|
+
ContainerPrincipal,
|
|
6
|
+
GlobalStyle,
|
|
7
|
+
} from "./styles";
|
|
2
8
|
import iconLogoContentoh from "../../../assets/images/verticalSideMenuMainPage/iconLogoContentoh.svg";
|
|
3
9
|
import iconLogo from "../../../assets/images/verticalSideMenuMainPage/iconLogo.svg";
|
|
4
10
|
import React, { useState } from "react";
|
|
5
|
-
import {
|
|
11
|
+
import { BrowserRouter as Router } from "react-router-dom";
|
|
6
12
|
|
|
7
|
-
export const VerticalSideMenuMainPage = ({
|
|
13
|
+
export const VerticalSideMenuMainPage = ({
|
|
14
|
+
menuoption = [],
|
|
15
|
+
conteinerdash,
|
|
16
|
+
}) => {
|
|
8
17
|
const [trueBar, setTrueBar] = useState();
|
|
9
18
|
return (
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
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
|
+
))}
|
|
40
56
|
</div>
|
|
41
|
-
|
|
42
|
-
</
|
|
43
|
-
|
|
44
|
-
|
|
57
|
+
</div>
|
|
58
|
+
</Container>
|
|
59
|
+
{conteinerdash}
|
|
60
|
+
</ContainerPrincipal>
|
|
61
|
+
<GlobalStyle />
|
|
62
|
+
</Router>
|
|
45
63
|
);
|
|
46
64
|
};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
|
+
import { BrowserRouter as Router, NavLink } from "react-router-dom";
|
|
3
|
+
import { createGlobalStyle } from "styled-components";
|
|
2
4
|
|
|
3
5
|
export const Container = styled.div`
|
|
4
6
|
height: 98%;
|
|
@@ -6,8 +8,8 @@ export const Container = styled.div`
|
|
|
6
8
|
padding: 23px 10px 70px 10px;
|
|
7
9
|
flex-direction: column;
|
|
8
10
|
justify-content: space-between;
|
|
9
|
-
overflow:
|
|
10
|
-
width: ${({ bar }) => (bar ?
|
|
11
|
+
overflow: none;
|
|
12
|
+
width: ${({ bar }) => (bar ? 260 : 58)}px;
|
|
11
13
|
border-radius: ${({ bar }) => (bar ? 20 : 50)}px;
|
|
12
14
|
background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
|
|
13
15
|
scrollbar-width: none;
|
|
@@ -24,86 +26,155 @@ export const Container = styled.div`
|
|
|
24
26
|
display: flex;
|
|
25
27
|
flex-direction: column;
|
|
26
28
|
align-items: flex-start;
|
|
27
|
-
margin-top: ${({ bar }) => (bar === "" ? 145 :
|
|
28
|
-
padding-left: ${({ bar }) => (bar ?
|
|
29
|
+
margin-top: ${({ bar }) => (bar === "" ? 145 : 40)}%;
|
|
30
|
+
padding-left: ${({ bar }) => (bar ? 10 : 0)}px;
|
|
29
31
|
.active {
|
|
30
32
|
background: #e33aa9;
|
|
31
33
|
}
|
|
32
34
|
& + div {
|
|
33
35
|
margin-top: 5px;
|
|
34
36
|
}
|
|
35
|
-
a {
|
|
36
|
-
height: ${({ bar }) => (bar ? 32 : 38)}px;
|
|
37
|
-
display: flex;
|
|
38
|
-
justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
|
|
39
|
-
border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
|
|
40
|
-
align-items: center;
|
|
41
|
-
font-family: sans-serif;
|
|
42
|
-
font-style: normal;
|
|
43
|
-
font-weight: 400;
|
|
44
|
-
font-size: 18px;
|
|
45
|
-
line-height: 21px;
|
|
46
|
-
letter-spacing: -0.015em;
|
|
47
|
-
color: #fafafa;
|
|
48
|
-
text-decoration: none;
|
|
49
|
-
&.option-link {
|
|
50
|
-
cursor: pointer;
|
|
51
|
-
width: ${({ bar }) => (bar ? "160" : "38")}px;
|
|
52
|
-
margin: 5px 0;
|
|
53
|
-
padding-left: ${({ bar }) => (bar ? 15 : 0)}px;
|
|
54
|
-
}
|
|
55
|
-
p {
|
|
56
|
-
cursor: pointer;
|
|
57
|
-
margin: 0%;
|
|
58
|
-
pointer-events: none;
|
|
59
|
-
}
|
|
60
|
-
img {
|
|
61
|
-
width: 22px;
|
|
62
|
-
& + * {
|
|
63
|
-
margin-left: 12px;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
.option-link:hover {
|
|
68
|
-
background: #e33aa9;
|
|
69
|
-
}
|
|
70
37
|
.sub-option {
|
|
71
38
|
display: flex;
|
|
72
39
|
flex-direction: column;
|
|
73
40
|
padding-left: ${({ bar }) => (bar ? 28 : 20)}px;
|
|
74
41
|
height: auto;
|
|
75
42
|
width: auto;
|
|
76
|
-
a {
|
|
77
|
-
display: flex;
|
|
78
|
-
justify-content: flex-start;
|
|
79
|
-
text-decoration: none;
|
|
80
|
-
position: relative;
|
|
81
|
-
font-size: 13px;
|
|
82
|
-
border-left: 1px solid #f0eef2;
|
|
83
|
-
border-radius: 0;
|
|
84
|
-
color: #f0eef2;
|
|
85
|
-
padding-top: 14px;
|
|
86
|
-
padding-left: 12px;
|
|
87
|
-
height: 25px;
|
|
88
|
-
&::before {
|
|
89
|
-
border-left: 1px solid #e33aa9;
|
|
90
|
-
width: 10px;
|
|
91
|
-
content: "";
|
|
92
|
-
border-radius: 50%;
|
|
93
|
-
height: 10px;
|
|
94
|
-
background-color: white;
|
|
95
|
-
position: absolute;
|
|
96
|
-
bottom: 0;
|
|
97
|
-
left: ${({ bar }) => (bar ? -4 : -34)}%;
|
|
98
|
-
}
|
|
99
|
-
&.active {
|
|
100
|
-
background: none;
|
|
101
|
-
&::before {
|
|
102
|
-
background-color: #e33aa9;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
43
|
}
|
|
107
44
|
}
|
|
108
45
|
}
|
|
109
46
|
`;
|
|
47
|
+
|
|
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
|
+
`;
|