fix: layout and css

Author: michalsek

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',

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%;

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'];

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 (
     <Navbar
       useLandingLogoDualVariant={true}
       isAlgoliaActive={false}
+      heroImages={heroImages}
+      titleImages={titleImages}
       {...props}
     />
   );