Add navbar_links to sidebar (#17)

Added links to sidebar for access on mobiles.
It only renders links when there are more than one, like in Reanimated
Examples | Docs.

Before:
<img width="804" alt="image"
src="https://github.com/software-mansion-labs/t-rex-ui/assets/59940332/9fab6042-f6b7-4d02-af7a-3a19af75cf72">


After:

\> 600px && < 996px
<img width="450" alt="image"
src="https://github.com/software-mansion-labs/t-rex-ui/assets/59940332/cba48e6e-555b-4490-a268-393bb7244ebf">

< 600px

<img width="450" alt="image"
src="https://github.com/software-mansion-labs/t-rex-ui/assets/59940332/7cf64518-ff44-4cc6-820f-337b663a7afd">

src/components/Navbar/MobileSidebar/Layout/index.tsx

@@ -5,11 +5,18 @@ import usePageType from '../../../../hooks/usePageType';
 import { useAllDocsData } from '@docusaurus/plugin-content-docs/client';
 import { useLocation } from '@docusaurus/router';
 import { ReactNode } from 'react';
+import { type NavbarNavLinkProps } from 'src/components/NavbarItem/NavbarNavLink';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import NavbarNavLink from '../../../NavbarItem/NavbarNavLink';
 
 function isActive(path: string, locationPathname: string) {
   return locationPathname.startsWith(path);
 }
 
+function useNavbarItems() {
+  return useThemeConfig().navbar.items;
+}
+
 export default function NavbarMobileSidebarLayout({
   header,
   isAlgoliaActive,
@@ -25,6 +32,8 @@ export default function NavbarMobileSidebarLayout({
   const data = useAllDocsData();
   const { versions } = data.default;
   const reversed = [...versions].reverse();
+  const items: NavbarNavLinkProps[] = useNavbarItems();
+  const filteredItems = items.filter((item) => item.label !== undefined);
 
   const location = useLocation();
   const activeVersion = reversed.find((version) =>
@@ -38,7 +47,22 @@ export default function NavbarMobileSidebarLayout({
       <div className={clsx('navbar-sidebar__items')}>
         <div className="navbar-sidebar__item menu">{secondaryMenu}</div>
       </div>
-      <div className={styles.sidebarFooter}>
+      <div
+        className={clsx(
+          filteredItems.length > 1 && styles.sidebarBiggerFooter,
+          styles.sidebarFooter
+        )}>
+        <div>
+          {filteredItems.length > 1 &&
+            filteredItems.map((item) => (
+              <NavbarNavLink
+                className={styles.sidebarLinks}
+                to={item.to}
+                label={item.label}
+                key={item.label}
+              />
+            ))}
+        </div>
         <div className={styles.sidebarVersions}>
           <span className={styles.sidebarVersionLabel}>Versions:</span>
           {reversed.map((version) => {

src/components/Navbar/MobileSidebar/Layout/styles.module.css

@@ -34,6 +34,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-direction: row;
   font-weight: var(--ifm-font-weight-semibold);
 
   padding: 0 1em;
@@ -55,3 +56,20 @@
   color: var(--swm-sidebar-elements-version-text);
   text-decoration: underline;
 }
+
+.sidebarLinks {
+  margin-right: 1rem;
+}
+
+@media (max-width: 600px) {
+  .sidebarFooter {
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-top: 4px;
+    align-items: flex-start;
+  }
+}
+
+.sidebarBiggerFooter {
+  --swm-navbar-sidebar-items-height: 137px;
+}