Unverified Commit aea3b232 authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

Add meganav to About page (#727)

parent 448e5238
Pipeline #268827 passed with stages
in 7 minutes and 14 seconds
......@@ -18,15 +18,6 @@ $article-right-padding: 1.5rem;
}
}
.topMenuBar {
display: flex;
align-items: center;
height: 40px;
padding: 0 44px;
background: $light-grey;
box-shadow: 0 2px 3px $grey;
}
.spinnerContainer {
display: flex;
height: 100%;
......
......@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { ReactNode } from 'react';
import React from 'react';
import { useLocation } from 'react-router';
import useApiService from 'src/shared/hooks/useApiService';
......@@ -24,10 +24,7 @@ import {
RelatedArticles,
HelpArticleGrid
} from 'src/shared/components/help-article';
import {
TopMenu,
SideMenu
} from 'src/content/app/about/components/about-menu/AboutMenu';
import HelpMenu from 'src/content/app/help/components/help-menu/HelpMenu';
import { CircleLoader } from 'src/shared/components/loader';
import ConversationIcon from 'src/shared/components/communication-framework/ConversationIcon';
......@@ -49,9 +46,7 @@ const About = () => {
return (
<div className={helpStyles.help}>
<AppBar />
<TopMenuBar>
{menu && <TopMenu menu={menu} currentUrl={location.pathname} />}
</TopMenuBar>
{menu && <HelpMenu menu={menu} currentUrl={location.pathname} />}
<HelpArticleGrid className={styles.grid}>
{article ? (
<TextArticle article={article} />
......@@ -61,19 +56,12 @@ const About = () => {
</div>
)}
<aside className={styles.aside}>
{article?.related_articles.length ? (
{!!article?.related_articles.length && (
<RelatedArticles
title="More about…"
articles={article.related_articles}
highlightActiveArticle={true}
/>
) : (
menu && (
<>
<div className={styles.asideTitle}>More about…</div>
<SideMenu menu={menu} currentUrl={location.pathname} />
</>
)
)}
</aside>
</HelpArticleGrid>
......@@ -92,8 +80,4 @@ const AppBar = () => {
);
};
const TopMenuBar = (props: { children: ReactNode }) => {
return <div className={styles.topMenuBar}>{props.children}</div>;
};
export default About;
@import 'src/styles/common';
.topMenuLink + .topMenuLink {
margin-left: 2rem;
}
.sideMenuLink {
display: inline-block;
padding: 0.3rem 0;
}
.activeLink {
color: $black;
}
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { Link } from 'react-router-dom';
import classNames from 'classnames';
import { Menu as MenuType } from 'src/shared/types/help-and-docs/menu';
import { MenuItem } from 'src/shared/types/help-and-docs/menu';
import styles from './AboutMenu.scss';
type Props = {
menu: MenuType;
currentUrl: string;
};
export const TopMenu = (props: Props) => {
return (
<>
{props.menu.items.map((item, index) => {
const className = classNames(styles.topMenuLink, {
[styles.activeLink]: hasItemWithUrl(item, props.currentUrl)
});
return (
<Link className={className} to={item.url as string} key={index}>
{item.name}
</Link>
);
})}
</>
);
};
export const SideMenu = (props: Props) => {
const { menu, currentUrl } = props;
const menuItem = menu.items.find(
(menuItem) =>
menuItem.type === 'collection' &&
menuItem.items.find((item) => item.url === currentUrl)
);
if (!menuItem || menuItem.type !== 'collection') {
// this shouldn't happen
return null;
}
return (
<>
{menuItem.items.map((item, index) => {
const linkClasses = classNames(styles.sideMenuLink, {
[styles.activeLink]: item.url === currentUrl
});
return (
<Link className={linkClasses} to={item.url as string} key={index}>
{item.name}
</Link>
);
})}
</>
);
};
const hasItemWithUrl = (menuItem: MenuItem, url: string): boolean => {
if (menuItem.url === url) {
return true;
} else if (menuItem.type === 'collection' && menuItem.items.length) {
return menuItem.items.some((item) => hasItemWithUrl(item, url));
}
return false;
};
......@@ -21,10 +21,10 @@ export type Menu = {
export type MenuItem = MenuArticleItem | MenuCollectionItem;
type MenuCollectionItem = {
export type MenuCollectionItem = {
name: string;
type: 'collection';
url?: string; // if a menu directory has an index page associated with it
url?: string; // if a menu directory has a page associated with it
items: MenuItem[];
};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment