From 79709a30a2698c7fdf91cf181e406b4735425c91 Mon Sep 17 00:00:00 2001 From: Cesar Date: Mon, 29 Jun 2020 17:33:19 -0400 Subject: [PATCH 1/6] Override NavBar and Footer --- _override/Footer.tsx | 54 ++++++++++++++++++++++++++++++++++++++++++++ _override/NavBar.tsx | 47 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 101 insertions(+) create mode 100644 _override/Footer.tsx create mode 100644 _override/NavBar.tsx diff --git a/_override/Footer.tsx b/_override/Footer.tsx new file mode 100644 index 00000000..f9f909df --- /dev/null +++ b/_override/Footer.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { Flex, Link } from '@redocly/ui'; + + +export default function Footer(props) { + const { columns, copyrightText } = props.footer; + console.log(columns) + 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; + } + } +`; \ No newline at end of file diff --git a/_override/NavBar.tsx b/_override/NavBar.tsx new file mode 100644 index 00000000..97e2af3a --- /dev/null +++ b/_override/NavBar.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { Flex, Link, SearchBox } from '@redocly/ui'; + + +export default function NavBar(props) { + const {items, logo, location} = props; + const isMain = location.pathname !== '/'; // Change the color of the NavBar based on location + + return ( + + + + + { + items.filter(item => item.type !== 'search').map((item, index) => { + return
  • + {item.label} +
    • + }) + } +     + +     +     + ) +} + +const NavWrapper = styled.div<{ hasBackground: boolean }>` + 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; + } + } +`; \ No newline at end of file From b581414177e78345334f5f9f6b225d4d829e8959 Mon Sep 17 00:00:00 2001 From: Cesar Date: Mon, 29 Jun 2020 17:54:45 -0400 Subject: [PATCH 2/6] Removing log --- _override/Footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_override/Footer.tsx b/_override/Footer.tsx index f9f909df..476bda98 100644 --- a/_override/Footer.tsx +++ b/_override/Footer.tsx @@ -6,7 +6,7 @@ import { Flex, Link } from '@redocly/ui'; export default function Footer(props) { const { columns, copyrightText } = props.footer; - console.log(columns) + return ( From 0167fd0f4f053c35241e837c4d04e76316726367 Mon Sep 17 00:00:00 2001 From: Cesar Date: Mon, 29 Jun 2020 17:57:16 -0400 Subject: [PATCH 3/6] Removing spaces --- _override/Footer.tsx | 1 - _override/NavBar.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/_override/Footer.tsx b/_override/Footer.tsx index 476bda98..6532d9b7 100644 --- a/_override/Footer.tsx +++ b/_override/Footer.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components'; import { Flex, Link } from '@redocly/ui'; - export default function Footer(props) { const { columns, copyrightText } = props.footer; diff --git a/_override/NavBar.tsx b/_override/NavBar.tsx index 97e2af3a..f1e307db 100644 --- a/_override/NavBar.tsx +++ b/_override/NavBar.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components'; import { Flex, Link, SearchBox } from '@redocly/ui'; - export default function NavBar(props) { const {items, logo, location} = props; const isMain = location.pathname !== '/'; // Change the color of the NavBar based on location From 07829d45128c33e006fffb30a4ce6c5cac71e043 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 20 Jul 2020 19:28:12 +0300 Subject: [PATCH 4/6] chore: prettier --- _override/NavBar.tsx | 66 +++++++++++++++++++++++--------------------- 1 file changed, 34 insertions(+), 32 deletions(-) diff --git a/_override/NavBar.tsx b/_override/NavBar.tsx index f1e307db..714aa82e 100644 --- a/_override/NavBar.tsx +++ b/_override/NavBar.tsx @@ -4,43 +4,45 @@ import styled from 'styled-components'; import { Flex, Link, SearchBox } from '@redocly/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 { items, logo, location } = props; + const isMain = location.pathname !== '/'; // Change the color of the NavBar based on location - return ( - - - - - { - items.filter(item => item.type !== 'search').map((item, index) => { - return
  • - {item.label} -
    • - }) - } -     - -     -     - ) + return ( + + + + + {items + .filter(item => item.type !== 'search') + .map((item, index) => { + return ( +
  • + {item.label} +
    • + ); + })} +     + +     +     + ); } const NavWrapper = styled.div<{ hasBackground: boolean }>` - background: ${({hasBackground}) => hasBackground ? '#227a88' : 'transparent'}; + 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; - } + 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; } -`; \ No newline at end of file + } +`; From 519b289d48f4ff99a1da20e4b09faa632805c7ac Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 20 Jul 2020 19:28:38 +0300 Subject: [PATCH 5/6] chore: add responsive menu to ovveride --- _override/NavBar.tsx | 116 +++++++++++++++++++++++++++++++++++++++---- 1 file changed, 106 insertions(+), 10 deletions(-) diff --git a/_override/NavBar.tsx b/_override/NavBar.tsx index 714aa82e..1087c050 100644 --- a/_override/NavBar.tsx +++ b/_override/NavBar.tsx @@ -7,28 +7,47 @@ 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 ( - {items - .filter(item => item.type !== 'search') - .map((item, index) => { - return ( -
  • - {item.label} -
    • - ); - })} + {navItems} +     -     + + + + + + {navItems} + +     ); } +const NavItem = styled.li` + padding: 10px 0; +`; + const NavWrapper = styled.div<{ hasBackground: boolean }>` + display: flex; background: ${({ hasBackground }) => (hasBackground ? '#227a88' : 'transparent')}; `; @@ -43,6 +62,83 @@ const NavItems = styled.ul` 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"); `; From 498530f0da7978eb04d5222241d3bb3b7a99575a Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sat, 25 Jul 2020 19:37:08 +0300 Subject: [PATCH 6/6] chore: pass pathPrefix --- _override/NavBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_override/NavBar.tsx b/_override/NavBar.tsx index 1087c050..4617041a 100644 --- a/_override/NavBar.tsx +++ b/_override/NavBar.tsx @@ -27,7 +27,7 @@ export default function NavBar(props) { {navItems} - +