fixed progressbar

Author: bennobuilder

src/pages/LandingPage/components/HeaderView/styles.module.css

@@ -74,6 +74,10 @@
 }
 
 @media (max-width: 768px) {
+  .Container {
+    padding: 8rem 1rem;
+  }
+
   .HeaderTitle {
     font-size: var(--ifm-font-size-40);
   }

src/pages/LandingPage/components/StraightforwardView/sections.tsx

@@ -43,7 +43,7 @@ MY_COLLECTION.collect({id: 1, name: "Jeff"})
 // Create set of States
 const App = new Agile();
 const MY_COLLECTION = App.createState();
-MY_COLLECTION.collect({id: 1, name: "Jeff"})
+MY_COLLECTION.collect({id: 1, name: "Jeff"});
     `,
     title: 'Create set of States',
     description: 'Create a dynamic and reactive set of States.',

src/theme/Navbar/index.tsx

@@ -7,23 +7,23 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {useCallback, useState, useEffect} from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import clsx from 'clsx';
 import SearchBar from '@theme/SearchBar';
 import Toggle from '@theme/Toggle';
 import useThemeContext from '@theme/hooks/useThemeContext';
 import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
-import useWindowSize, {windowSizes} from '@theme/hooks/useWindowSize';
+import useWindowSize, { windowSizes } from '@theme/hooks/useWindowSize';
 import NavbarItem from '@theme/NavbarItem';
 import Logo from '@theme/Logo';
 import styles from './styles.module.css';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import IconMenu from '@theme/IconMenu';
-import {useHistory} from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import core from '../../core';
-import {splitNavItemsByPosition} from './controller';
+import { splitNavItemsByPosition } from './controller';
 import QuickSocialLinksView from './components/QuickSocialLinksView';
-import {useScroll} from '../../hooks/useScroll';
+import { useScroll } from '../../hooks/useScroll';
 
 const Navbar = (): JSX.Element => {
   const { siteConfig } = useDocusaurusContext();
@@ -104,6 +104,9 @@ const Navbar = (): JSX.Element => {
             isSearchBarExpanded={isSearchBarExpanded}
           />
         </div>
+        <div className={styles.ProgressbarContainer}>
+          <div className={styles.Progressbar} id={scrollbarId} />
+        </div>
       </div>
 
       {/* Donut */}
@@ -142,9 +145,6 @@ const Navbar = (): JSX.Element => {
           </div>
         </div>
       </div>
-      <div className={styles.ProgressbarContainer}>
-        <div className={styles.Progressbar} id={scrollbarId} />
-      </div>
     </nav>
   );
 };