diff --git a/src/components/SideMenu/SideMenu.tsx b/src/components/SideMenu/SideMenu.tsx
index 06904f52..7b86f7d7 100644
--- a/src/components/SideMenu/SideMenu.tsx
+++ b/src/components/SideMenu/SideMenu.tsx
@@ -27,7 +27,8 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
- Documentation Powered by Redocly
+ API docs
+ by Redocly
diff --git a/src/components/SideMenu/styled.elements.ts b/src/components/SideMenu/styled.elements.ts
index abc9f15e..fc329fd8 100644
--- a/src/components/SideMenu/styled.elements.ts
+++ b/src/components/SideMenu/styled.elements.ts
@@ -2,7 +2,7 @@ import { default as classnames } from 'classnames';
import { darken } from 'polished';
import { deprecatedCss, ShelfIcon } from '../../common-elements';
-import styled, { css, ResolvedThemeInterface } from '../../styled-components';
+import styled, { css, media, ResolvedThemeInterface } from '../../styled-components';
export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
className: `operation-type ${props.type}`,
@@ -172,18 +172,30 @@ export const RedocAttribution = styled.div`
${({ theme }) => `
font-size: 0.8em;
margin-top: ${theme.spacing.unit * 2}px;
- padding: 0 ${theme.spacing.unit * 4}px;
- text-align: left;
-
- opacity: 0.7;
-
+ text-align: center;
+ position: fixed;
+ width: ${theme.sidebar.width};
+ bottom: 0px;
+ background: ${theme.sidebar.backgroundColor};
+
a,
a:visited,
a:hover {
color: ${theme.sidebar.textColor} !important;
- border-top: 1px solid ${darken(0.1, theme.sidebar.backgroundColor)};
padding: ${theme.spacing.unit}px 0;
- display: block;
+ border-top: 1px solid ${darken(0.1, theme.sidebar.backgroundColor)};
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
`};
+ img {
+ width: 15px;
+ margin-right: 5px;
+ }
+
+ ${media.lessThan('small')`
+ width: 100%;
+ `};
`;