quantumai-design-system
Version:
퀀텀에이아이의 디자인 시스템
64 lines (63 loc) • 6.37 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import styled from '@emotion/styled';
import { COLORS } from '../../../styles/theme';
import Icons from '../../Base/Icon/Icons';
import LogoSymbol from '../../Base/Icon/base/LogoSymbol';
import LogoText from '../../Base/Icon/base/LogoText';
import { numToPx, transitionSet } from '../../../utils/styleSet';
import { useContext } from 'react';
import { NavContext } from './NavContext';
var logoElement = function (logo) {
if (typeof logo !== 'string')
return logo;
return _jsx("img", { src: logo, alt: "\uB85C\uACE0 \uC774\uBBF8\uC9C0" });
};
var NavHeader = function (_a) {
var _b = _a.logoIcon, logoIcon = _b === void 0 ? _jsx(LogoSymbol, {}) : _b, _c = _a.logo, logo = _c === void 0 ? _jsx(LogoText, {}) : _c, _d = _a.logoWidth, logoWidth = _d === void 0 ? 77 : _d, _e = _a.logoHeight, logoHeight = _e === void 0 ? 12 : _e, onClickClose = _a.onClickClose, onClickOpen = _a.onClickOpen, props = __rest(_a, ["logoIcon", "logo", "logoWidth", "logoHeight", "onClickClose", "onClickOpen"]);
var _f = useContext(NavContext), navShow = _f.navShow, setNavShow = _f.setNavShow, setMenuOpenKeys = _f.setMenuOpenKeys;
var logoSize = {
width: numToPx(logoWidth),
height: numToPx(logoHeight),
};
function handleOpen(e) {
if (navShow)
return;
onClickOpen === null || onClickOpen === void 0 ? void 0 : onClickOpen(e);
setNavShow === null || setNavShow === void 0 ? void 0 : setNavShow(true);
}
function handleClose(e) {
onClickClose === null || onClickClose === void 0 ? void 0 : onClickClose(e);
setNavShow === null || setNavShow === void 0 ? void 0 : setNavShow(false);
setMenuOpenKeys === null || setMenuOpenKeys === void 0 ? void 0 : setMenuOpenKeys('');
}
return (_jsxs(NavHeaderContainer, __assign({ "data-show": navShow }, props, { children: [_jsxs("div", { className: "navlogo", children: [_jsx("button", { className: "navlogo__symbol", onClick: handleOpen, children: logoElement(logoIcon) }), _jsx("div", { className: "navlogo__text", style: logoSize, children: logoElement(logo) })] }), _jsx("button", { className: "close_btn", onClick: handleClose, children: _jsx(Icons, { name: "circleLeft", size: 21 }) })] })));
};
export default NavHeader;
var NavHeaderContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: sticky;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 48px;\n padding: 0 18px 0 20px;\n border-bottom: 1px solid ", ";\n background-color: ", ";\n z-index: 1;\n box-sizing: border-box;\n img {\n object-fit: cover;\n }\n\n .navlogo {\n display: flex;\n align-items: center;\n gap: 4px;\n height: 20px;\n &__symbol {\n display: inline-flex;\n width: 20px;\n aspect-ratio: 1;\n overflow: hidden;\n svg,\n img {\n width: 100%;\n height: 100%;\n }\n }\n\n &__text {\n position: relative;\n overflow: hidden;\n max-width: 120px;\n max-height: 40px;\n svg,\n img {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n transform: translateX(-100%);\n ", "\n }\n }\n }\n .close_btn {\n opacity: 0;\n ", "\n svg {\n fill: ", ";\n ", "\n :hover {\n fill: ", ";\n }\n }\n }\n\n &[data-show='true'] {\n .navlogo {\n &__symbol {\n pointer-events: none;\n }\n &__text {\n svg,\n img {\n transform: translateX(0);\n }\n }\n }\n .close_btn {\n opacity: 1;\n }\n }\n"], ["\n position: sticky;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 48px;\n padding: 0 18px 0 20px;\n border-bottom: 1px solid ", ";\n background-color: ", ";\n z-index: 1;\n box-sizing: border-box;\n img {\n object-fit: cover;\n }\n\n .navlogo {\n display: flex;\n align-items: center;\n gap: 4px;\n height: 20px;\n &__symbol {\n display: inline-flex;\n width: 20px;\n aspect-ratio: 1;\n overflow: hidden;\n svg,\n img {\n width: 100%;\n height: 100%;\n }\n }\n\n &__text {\n position: relative;\n overflow: hidden;\n max-width: 120px;\n max-height: 40px;\n svg,\n img {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n transform: translateX(-100%);\n ", "\n }\n }\n }\n .close_btn {\n opacity: 0;\n ", "\n svg {\n fill: ", ";\n ", "\n :hover {\n fill: ", ";\n }\n }\n }\n\n &[data-show='true'] {\n .navlogo {\n &__symbol {\n pointer-events: none;\n }\n &__text {\n svg,\n img {\n transform: translateX(0);\n }\n }\n }\n .close_btn {\n opacity: 1;\n }\n }\n"])), COLORS.grey4, COLORS.coolgrey1, transitionSet('transform'), transitionSet('opacity'), COLORS.coolgrey3, transitionSet('fill'), COLORS.coolgrey4);
var templateObject_1;