@redocly/theme
Version:
Shared UI components lib
54 lines (53 loc) • 2.5 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UserMenuMobile = UserMenuMobile;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const hooks_1 = require("../../core/hooks");
const UserAvatar_1 = require("../../components/UserMenu/UserAvatar");
const LogoutMenuItem_1 = require("../../components/UserMenu/LogoutMenuItem");
const LoginButton_1 = require("../../components/UserMenu/LoginButton");
function UserMenuMobile({ className }) {
const { useUserMenu } = (0, hooks_1.useThemeHooks)();
const { userData, loginUrl } = useUserMenu();
const { userMenu: userMenuSettings } = (0, hooks_1.useThemeConfig)();
if (!(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated)) {
if (loginUrl && !(userMenuSettings === null || userMenuSettings === void 0 ? void 0 : userMenuSettings.hideLoginButton)) {
return (react_1.default.createElement(UserMenuMobileWrapper, { "data-component-name": "UserMenu/UserMenuMobile", className: className },
react_1.default.createElement(UserMenuMobileLoginButton, { href: loginUrl })));
}
else {
return null;
}
}
return (react_1.default.createElement(UserMenuMobileWrapper, { "data-component-name": "UserMenu/UserMenuMobile", className: className },
react_1.default.createElement(UserInfoWrapper, null,
react_1.default.createElement(UserAvatar_1.UserAvatar, { picture: userData.picture }),
react_1.default.createElement("div", null, userData.name)),
react_1.default.createElement(LogoutMenuItem_1.LogoutMenuItem, { iconOnly: true })));
}
const UserMenuMobileWrapper = styled_components_1.default.div `
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
bottom: 0;
padding: 18px 16px;
border-top: 1px solid var(--menu-mobile-profile-border-color);
background: var(--menu-mobile-profile-bg-color);
`;
const UserMenuMobileLoginButton = (0, styled_components_1.default)(LoginButton_1.LoginButton) `
width: 100%;
& button {
width: 100%;
}
`;
const UserInfoWrapper = styled_components_1.default.div `
display: flex;
align-items: center;
gap: var(--spacing-base);
`;
//# sourceMappingURL=UserMenuMobile.js.map