Fix docs sidebar navi active states

This commit is contained in:
kitajchuk
2021-04-15 20:23:16 -07:00
parent 3e01377471
commit 20a26f4b6f
2 changed files with 6 additions and 4 deletions
+2 -2
View File
@@ -9,10 +9,10 @@ import { Button, Icon, useMobileMedia } from './jambonz-ui';
function NaviItem({obj}) {
const router = useRouter();
const regex = new RegExp( `^${obj.link}` );
const regex = new RegExp(`^${obj.link}`);
const classes = {
navi__link: true,
active: regex.test( router.asPath ),
active: regex.test(router.asPath),
};
return (
+4 -2
View File
@@ -12,8 +12,10 @@ import { getData, getDocs, getDocsPaths } from '../../lib/data';
function Sidebar({data}) {
const router = useRouter();
const parsedTab = router.asPath.replace(/^\/docs\/|^\/+|\/+$/g, '').split('/').shift();
const parsedPath = router.asPath.replace(/^\/+|\/+$/g, '').split('/').pop();
const [active, setActive] = useState({
[data.navi[0].path]: true,
[parsedTab]: true,
});
const handleToggle = (slug) => {
@@ -55,7 +57,7 @@ function Sidebar({data}) {
</div>
<ul className={classNames(subClasses)}>
{item.pages.map((page) => {
const isActiveItem = (router.asPath.split('/').pop() === page.path);
const isActiveItem = (parsedPath === page.path);
const itemClasses = {
'ms': true,
'active': isActiveItem,