From ecd802a6aee0f90bdd4626e750fe9f1f08b1ad47 Mon Sep 17 00:00:00 2001 From: QQP Date: Fri, 20 Aug 2021 16:00:22 -0400 Subject: [PATCH] [td-p2] add override section to nav-footer.md --- developer-portal/nav-footer.md | 219 ++++++++++++++++++++++++++++++++- 1 file changed, 216 insertions(+), 3 deletions(-) diff --git a/developer-portal/nav-footer.md b/developer-portal/nav-footer.md index 57de5fd5..74e8bdd4 100644 --- a/developer-portal/nav-footer.md +++ b/developer-portal/nav-footer.md @@ -49,7 +49,6 @@ nav: - search: true ``` - ## Add a link to your favorite website Add a link to your favorite external website. @@ -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. @@ -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. @@ -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 ( + + + + { + columns.map((col, index) => { + return
  • + {col.group} + + { + col.items.map((item, index) => { + return
  • + {item.label} +
    • + }) + } +     + + }) + } + +     +     + ) +} + +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 ( + + {item.label} + + ); + }); + + return ( + + + + + {navItems} + + + + + + + + + {navItems} + + + + ); +} + +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"); +`; +```