Skip to content
This repository has been archived by the owner on Aug 18, 2023. It is now read-only.

[td-p2] add override section to nav-footer.md #121

Closed
wants to merge 1 commit into from
Closed

[td-p2] add override section to nav-footer.md #121

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
219 changes: 216 additions & 3 deletions developer-portal/nav-footer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ nav:
- search: true
```


## Add a link to your favorite website

Add a link to your favorite external website.
Expand Down Expand Up @@ -83,6 +82,7 @@ Please adjust the notice.
footer:
copyrightText: Copyright © Redocly 2019-2020. All right reserved.
```

```yaml
footer:
copyrightText: Copyright © Redocly LLC 2019-2020. All right reserved.
Expand All @@ -93,6 +93,7 @@ footer:
Add a column in between legal and support named products.

Here is the original `footer` section.

```yaml
footer:
copyrightText: Copyright © Redocly LLC 2019-2020. All right reserved.
Expand Down Expand Up @@ -143,5 +144,217 @@ footer:
page: contact.mdx
```

You may also override the navbar and footer components.
That is beyond the scope of this training program.
## Override default settings

You can override default settings with custom scripting.

### Override default footer

To override default footer settings, save this code to `_override/Footer.tsx`:

```tsx:title=_override/Footer.tsx
import * as React from 'react';
import styled from 'styled-components';

import { Flex, Link } from '@redocly/developer-portal/ui';

export default function Footer(props) {
const { columns, copyrightText } = props.footer;

return (
<FooterWrapper>
<Flex py="60px" px="60px">
<FooterItems>
{
columns.map((col, index) => {
return <li key={index}>
{col.group}
<FooterItems>
{
col.items.map((item, index) => {
return <li key={index}>
<Link to={item.link}>{item.label}</Link>
</li>
})
}
</FooterItems>
</li>
})
}
</FooterItems>
</Flex>
</FooterWrapper>
)
}

const FooterWrapper = styled.div`
background: rgba(34,122,136,0.9);
`;

const FooterItems = styled.ul`
margin: 0;
padding: 0;
display: flex;
align-items: center;
color: #ffffff;
justify-content: start;
& li {
list-style: none;
margin-right: 20px;
& a {
color: #ffffff;
}
}
`;
```

### Override default nav

To override default footer settings, save this code to `_override/NavBar.tsx`:

```tsx:title=_override/NavBar.tsx
import * as React from 'react';
import styled from 'styled-components';

import { Flex, Link, SearchBox } from '@redocly/developer-portal/ui';

export default function NavBar(props) {
const { items, logo, location } = props;
const isMain = location.pathname !== '/'; // Change the color of the NavBar based on location

const [isMobileMenuOpened, setMobileMenuOpened] = React.useState(false);
const toggleMobileMenu = () => setMobileMenuOpened(!isMobileMenuOpened);
const hideMobileMenu = () => setMobileMenuOpened(false);

const navItems = items
.filter(item => item.type !== 'search')
.map((item, index) => {
return (
<NavItem key={index} onClick={hideMobileMenu}>
<Link to={item.link}>{item.label}</Link>
</NavItem>
);
});

return (
<NavWrapper hasBackground={isMain}>
<Flex p="20px">
<img src={logo} alt="" height="50" />
<NavItems>
{navItems}
<SearchBox pathPrefix={props.pathPrefix} />
</NavItems>
</Flex>
<NavControls>
<MobileMenuIcon onClick={toggleMobileMenu} />
</NavControls>
<MobileMenu isShown={isMobileMenuOpened}>
<CloseIcon onClick={hideMobileMenu} />
{navItems}
<SearchBox />
</MobileMenu>
</NavWrapper>
);
}

const NavItem = styled.li`
padding: 10px 0;
`;

const NavWrapper = styled.div<{ hasBackground: boolean }>`
display: flex;
background: ${({ hasBackground }) => (hasBackground ? '#227a88' : 'transparent')};
`;

const NavItems = styled.ul`
margin: 0 0 0 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: start;
& li {
list-style: none;
margin-right: 20px;
& a {
color: #ffffff;
text-decoration: none;
}
}

display: none;
@media only screen and (min-width: ${({ theme }) => theme.breakpoints.medium}) {
display: flex;
}
`;

export const MobileMenu = styled.ul<{ isShown: boolean }>`
background: ${props => props.theme.colors.primary.main};
list-style: none;
padding: 50px 40px;
margin: 0;
position: absolute;
border-top: 1px solid transparent;
z-index: 100;
color: ${props => props.theme.colors.primary.contrastText};
top: 0;
right: 0;
left: 0;
bottom: 0;
font-size: 1.1875rem;
box-shadow: 0px 10px 100px 0px rgba(35, 35, 35, 0.1);
text-align: left;

display: none;

@media only screen and (max-width: ${({ theme }) => theme.breakpoints.medium}) {
position: fixed;
display: ${props => (props.isShown ? 'flex' : 'none')};
flex-direction: column;
overflow-y: auto;
}

& li {
list-style: none;
margin-right: 20px;
& a {
color: #ffffff;
text-decoration: none;
}
}
`;

export const NavControls = styled.div`
padding: 10px;
display: flex;
align-items: center;
flex: 1;
justify-content: flex-end;
@media only screen and (min-width: ${({ theme }) => theme.breakpoints.medium}) {
display: none;
}
`;

export const MobileMenuIcon = styled.span`
width: 1.25em;
height: 1.25em;
display: inline-block;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 396.7 396.7' xml:space='preserve'%3E%3Cpath fill='white' d='M17 87.8h362.7c9.4 0 17-7.6 17-17s-7.6-17-17-17H17c-9.3 0-17 7.7-17 17C0 80.2 7.7 87.8 17 87.8zM17 215.3h362.7c9.4 0 17-7.6 17-17s-7.6-17-17-17H17c-9.3 0-17 7.7-17 17S7.7 215.3 17 215.3zM17 342.8h362.7c9.4 0 17-7.6 17-17s-7.6-17-17-17H17c-9.3 0-17 7.7-17 17S7.7 342.8 17 342.8z'/%3E%3C/svg%3E");
cursor: pointer;

@media only screen and (min-width: ${({ theme }) => theme.breakpoints.medium}) {
display: none;
}
`;

export const CloseIcon = styled.i`
cursor: pointer;
position: absolute;
right: 20px;
top: 25px;
width: 15px;
height: 15px;
background-repeat: no-repeat;
background-size: 15px 15px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 15.6 15.6' enable-background='new 0 0 15.642 15.642'%3E%3Cpath fill-rule='evenodd' fill='white' d='M8.9 7.8l6.5-6.5c0.3-0.3 0.3-0.8 0-1.1 -0.3-0.3-0.8-0.3-1.1 0L7.8 6.8 1.3 0.2c-0.3-0.3-0.8-0.3-1.1 0 -0.3 0.3-0.3 0.8 0 1.1l6.5 6.5L0.2 14.4c-0.3 0.3-0.3 0.8 0 1.1 0.1 0.1 0.3 0.2 0.5 0.2s0.4-0.1 0.5-0.2l6.5-6.5 6.5 6.5c0.1 0.1 0.3 0.2 0.5 0.2 0.2 0 0.4-0.1 0.5-0.2 0.3-0.3 0.3-0.8 0-1.1L8.9 7.8z'/%3E%3C/svg%3E");
`;
```