From 3c6642017d030c458a24ccef74a00f9b31bcab6a Mon Sep 17 00:00:00 2001 From: Michal Sek Date: Fri, 20 Dec 2024 12:01:01 +0100 Subject: [PATCH] fix: layout and css --- packages/audiodocs/docusaurus.config.js | 10 +- packages/audiodocs/src/css/overrides.css | 27 +--- .../audiodocs/src/theme/DocSidebar/index.jsx | 10 +- packages/audiodocs/src/theme/Navbar/index.jsx | 12 ++ packages/audiodocs/static/img/title-dark.svg | 133 +++++++++++++++++ packages/audiodocs/static/img/title.svg | 137 ++++++++++++++++++ 6 files changed, 297 insertions(+), 32 deletions(-) create mode 100644 packages/audiodocs/static/img/title-dark.svg create mode 100644 packages/audiodocs/static/img/title.svg diff --git a/packages/audiodocs/docusaurus.config.js b/packages/audiodocs/docusaurus.config.js index ed91d230..009b0d09 100644 --- a/packages/audiodocs/docusaurus.config.js +++ b/packages/audiodocs/docusaurus.config.js @@ -68,11 +68,11 @@ const config = { navbar: { hideOnScroll: true, title: 'React Native Audio API', - // logo: { - // // alt: 'react-native-audio-api logo', - // src: 'img/logo.svg', - // srcDark: 'img/logo.svg', - // }, + logo: { + alt: 'react-native-audio-api logo', + src: 'img/logo-hero.svg', + srcDark: 'img/logo-hero.svg', + }, items: [ { type: 'docSidebar', diff --git a/packages/audiodocs/src/css/overrides.css b/packages/audiodocs/src/css/overrides.css index 8f7ef81e..caf4095e 100644 --- a/packages/audiodocs/src/css/overrides.css +++ b/packages/audiodocs/src/css/overrides.css @@ -1,29 +1,14 @@ :root { + --swm-logo-height: 45px; --swm-expandable-transition: transform 200ms ease; } .navbar { min-width: 360px; z-index: 100; + background-color: var(--ifm-navbar-background-color); } -:root { - /* --swm-logo-title-width: 177px; */ - --swm-logo-height: 45px; -} - -/* .navbar img[alt='react-native-audio-api'] { - height: 40px; -} - -.theme-doc-sidebar-container img[alt='react-native-audio-api'] { - height: 40px; -} - -.theme-doc-sidebar-container img { - height: 40px; -} */ - .navbar__title { display: flex; align-items: center; @@ -42,14 +27,6 @@ justify-content: center; } -[class*="navbar__logo"] { - width: 180px; -} - -.navbar__items :nth-child(2) { - margin-left: auto -} - table { display: table; width: 100%; diff --git a/packages/audiodocs/src/theme/DocSidebar/index.jsx b/packages/audiodocs/src/theme/DocSidebar/index.jsx index ab3f1f19..03028707 100644 --- a/packages/audiodocs/src/theme/DocSidebar/index.jsx +++ b/packages/audiodocs/src/theme/DocSidebar/index.jsx @@ -1,10 +1,16 @@ import React from 'react'; +import useBaseUrl from '@docusaurus/useBaseUrl'; import { DocSidebar } from '@swmansion/t-rex-ui'; export default function DocSidebarWrapper(props) { - const titleImages = {}; + const titleImages = { + light: useBaseUrl('/img/title.svg?v=12'), + dark: useBaseUrl('/img/title-dark.svg?v=12'), + }; - const heroImages = {}; + const heroImages = { + logo: useBaseUrl('/img/logo-hero.svg'), + }; const newItems = ['animations/withClamp']; const experimentalItems = ['shared-element-transitions/overview']; diff --git a/packages/audiodocs/src/theme/Navbar/index.jsx b/packages/audiodocs/src/theme/Navbar/index.jsx index 7345b6c3..e0d7a98d 100644 --- a/packages/audiodocs/src/theme/Navbar/index.jsx +++ b/packages/audiodocs/src/theme/Navbar/index.jsx @@ -1,11 +1,23 @@ import React from 'react'; +import useBaseUrl from '@docusaurus/useBaseUrl'; import { Navbar } from '@swmansion/t-rex-ui'; export default function NavbarWrapper(props) { + const titleImages = { + light: useBaseUrl('/img/title.svg?v=12'), + dark: useBaseUrl('/img/title-dark.svg?v=12'), + }; + + const heroImages = { + logo: useBaseUrl('/img/logo-hero.svg'), + }; + return ( ); diff --git a/packages/audiodocs/static/img/title-dark.svg b/packages/audiodocs/static/img/title-dark.svg new file mode 100644 index 00000000..25e9716f --- /dev/null +++ b/packages/audiodocs/static/img/title-dark.svg @@ -0,0 +1,133 @@ + + + + + + +AUDIO API + diff --git a/packages/audiodocs/static/img/title.svg b/packages/audiodocs/static/img/title.svg new file mode 100644 index 00000000..42c4acac --- /dev/null +++ b/packages/audiodocs/static/img/title.svg @@ -0,0 +1,137 @@ + + + + + + +AUDIO API +AUDIO API +