burdy
Version:
Open Source Headless Platform
160 lines (159 loc) • 6.66 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_2 = require("@fluentui/react");
const react_router_1 = require("react-router");
const settings_1 = require("../context/settings");
const hooks_1 = require("../helpers/hooks");
const hooks_2 = __importDefault(require("../../shared/features/hooks"));
const auth_context_1 = require("../features/authentication/context/auth.context");
const react_router_dom_1 = require("react-router-dom");
const useStyles = (0, react_2.makeStyles)({
wrapper: {
display: 'flex',
flexDirection: 'column',
height: '100%',
overflowY: 'auto',
'& .ms-Nav': {
overflowX: 'hidden'
}
},
grow: {
flexGrow: 1,
},
});
const SideNav = () => {
const classNames = useStyles();
const { getContentTypes } = (0, settings_1.useSettings)();
const { filterPermissions } = (0, auth_context_1.useAuth)();
const location = (0, react_router_1.useLocation)();
const [expandedLinks, setExpandedLinks] = (0, hooks_1.useStorageState)('sideMenu-navExpanded', {});
(0, react_1.useEffect)(() => {
getContentTypes.execute({
type: 'post',
});
}, []);
const NavLink = (_a) => {
var { defaultRender: DefaultRenderer, href } = _a, props = __rest(_a, ["defaultRender", "href"]);
return href ? (react_1.default.createElement(react_router_dom_1.Link, { to: href },
react_1.default.createElement(DefaultRenderer, Object.assign({}, props)))) : react_1.default.createElement(DefaultRenderer, Object.assign({}, props));
};
const groups = (0, react_1.useMemo)(() => {
const tmpGroups = [];
tmpGroups.push({
links: filterPermissions([
{
url: '/',
key: 'dashboard',
'data-cy': 'nav-dashboard',
name: 'Dashboard',
},
{
url: '/assets',
key: 'assets',
'data-cy': 'nav-assets',
name: 'Assets',
permissions: ['assets_list'],
},
{
url: '/sites',
key: 'sites',
'data-cy': 'nav-sites',
name: `Sites`,
permissions: ['sites_list'],
},
{
url: '/content-types',
key: 'content-types',
'data-cy': 'nav-content-types',
name: 'Content Types',
permissions: ['content_types_list'],
},
{
url: '/tags',
key: 'tags',
name: `Tags`,
permissions: ['tags_list'],
},
]),
});
tmpGroups.push({
links: filterPermissions([
{
url: '/users',
key: 'users',
name: 'Users',
},
{
url: '/settings',
key: 'settings',
name: 'Settings',
permissions: ['settings'],
},
]),
});
return hooks_2.default.applySyncFilters('admin/sidenav', tmpGroups);
}, [getContentTypes === null || getContentTypes === void 0 ? void 0 : getContentTypes.result, expandedLinks]);
const selectedKey = (0, react_1.useMemo)(() => {
var _a, _b, _c, _d;
if (location.pathname.includes('/sites')) {
return 'sites';
}
const flatLinks = groups.flatMap((g) => g.links);
return ((_d = (_b = (_a = flatLinks
.filter((p) => p.url === location.pathname)
.map((p) => p.key)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : (_c = flatLinks
.filter((p) => location.pathname.includes(p.url))
.sort((a, b) => b.url.length - a.url.length)
.map((p) => p.key)) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : undefined);
}, [location, groups]);
const handleLinkExpandClick = (e, item) => {
setExpandedLinks(Object.assign(Object.assign({}, expandedLinks), { [item.key]: !item.isExpanded }));
};
return (react_1.default.createElement("div", { className: classNames.wrapper },
react_1.default.createElement(react_2.Nav, { groups: groups, onLinkExpandClick: handleLinkExpandClick, styles: {
link: {
background: react_2.NeutralColors.gray20,
'.ms-Nav-compositeLink:hover &': {
background: react_2.NeutralColors.gray30,
},
'.ms-Nav-compositeLink.is-selected &': {
background: react_2.NeutralColors.gray40,
},
},
}, linkAs: NavLink, selectedKey: selectedKey })));
};
exports.default = SideNav;