use named export

src/components/Docs/Sidebar/Filter.jsx

@@ -22,7 +22,7 @@ const StyledDeleteFilterIcon = styled(MdDeleteSweep)`
   font-size: 1.5rem;
 `
 
-const Filter = ({ filter, setFilter }) => {
+export const Filter = ({ filter, setFilter }) => {
   const onChange = useCallback((e) => setFilter(e.target.value), [setFilter])
   const onClickEmptyFilter = useCallback(() => setFilter(''), [setFilter])
 
@@ -53,4 +53,3 @@ const Filter = ({ filter, setFilter }) => {
   )
 }
 
-export default Filter

src/components/Docs/Sidebar/IntoViewScroller.jsx

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom'
 
 import { isElementInViewport } from '../../../modules/isElementInViewport.js'
 
-const IntoViewScroller = () => {
+export const IntoViewScroller = () => {
   const { pathname } = useLocation()
   const slug = pathname.split('/')[2]
 
@@ -30,5 +30,3 @@ const IntoViewScroller = () => {
 
   return null
 }
-
-export default IntoViewScroller

src/components/Docs/Sidebar/MenuItem.jsx

@@ -1,9 +1,9 @@
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import ListItemButton from '@mui/material/ListItemButton'
 import ListItemText from '@mui/material/ListItemText'
 import { useLocation, useNavigate } from 'react-router-dom'
 
-const MenuItem = ({ node }) => {
+export const MenuItem = ({ node }) => {
   const { pathname, search } = useLocation()
   const navigate = useNavigate()
 
@@ -31,5 +31,3 @@ const MenuItem = ({ node }) => {
     </>
   )
 }
-
-export default MenuItem

src/components/Docs/Sidebar/MenuItems.jsx

@@ -3,7 +3,7 @@ import List from '@mui/material/List'
 import Divider from '@mui/material/Divider'
 import styled from '@emotion/styled'
 
-import MenuItem from './MenuItem.jsx'
+import { MenuItem } from './MenuItem.jsx'
 import { StoreContext } from '../../../storeContext.js'
 
 // don't know why but divider is too thick,
@@ -156,7 +156,7 @@ const nodes = [
   },
 ]
 
-const MenuItems = () => {
+export const MenuItems = () => {
   const { dokuFilter } = useContext(StoreContext)
   const nodesFiltered = nodes.filter(
     (node) => node.title?.toLowerCase?.()?.includes?.(dokuFilter) ?? true,
@@ -166,10 +166,11 @@ const MenuItems = () => {
     <List component="nav">
       <StyledDivider />
       {nodesFiltered.map((node) => (
-        <MenuItem node={node} key={node?.slug} />
+        <MenuItem
+          node={node}
+          key={node?.slug}
+        />
       ))}
     </List>
   )
 }
-
-export default MenuItems

src/components/Docs/Sidebar/index.jsx

@@ -4,9 +4,9 @@ import { Link, useLocation } from 'react-router-dom'
 import { observer } from 'mobx-react-lite'
 
 import { StoreContext } from '../../../storeContext.js'
-import MenuItems from './MenuItems.jsx'
-import Filter from './Filter.jsx'
-import IntoViewScroller from './IntoViewScroller.jsx'
+import { MenuItems } from './MenuItems.jsx'
+import { Filter } from './Filter.jsx'
+import { IntoViewScroller } from './IntoViewScroller.jsx'
 
 const Menu = styled.div`
   width: 25%;