feat: update sidebar to the latest design system

.eslintrc.js

@@ -51,6 +51,7 @@ module.exports = {
             'func-names': 'off',
             'prefer-arrow-callback': 'off',
             'import/no-extraneous-dependencies': 'off',
+            'mocha/no-mocha-arrows': 'off',
             '@typescript-eslint/explicit-function-return-type': 'off',
           },
         },

example-app/src/admin.options.js

@@ -14,8 +14,8 @@ const AdminTool = require('./tools/tool.admin')
 const AdminPage = require('./pages/page.admin')
 const AdminNested = require('./nested/nested.admin')
 
-AdminBro.bundle('./components/sidebar-footer', 'SidebarFooter')
-AdminBro.bundle('./components/no-records', 'NoRecords')
+// AdminBro.bundle('./components/sidebar-footer', 'SidebarFooter')
+// AdminBro.bundle('./components/no-records', 'NoRecords')
 
 /** @type {import('admin-bro').AdminBroOptions} */
 const options = {
@@ -34,8 +34,16 @@ const options = {
     app: process.env.npm_package_version,
   },
   branding: currentUser => ({
+    logo: false,
     companyName: currentUser ? currentUser.email : 'something',
   }),
+  pages: {
+    aboutUs: {
+      handler: async () => { console.log('clicked') },
+      component: AdminBro.bundle('./components/no-records'),
+      icon: 'Add',
+    },
+  },
   locale: {
     language: 'en',
     translations: {

src/admin-bro-options.interface.ts

@@ -362,6 +362,11 @@ export type AdminPage = {
    * Component defined by using {@link AdminBro.bundle}
    */
   component: string;
+
+  /**
+   * Page icon
+   */
+  icon?: string;
 }
 
 /**

src/backend/decorators/page-json.interface.ts

@@ -11,4 +11,9 @@ export default interface PageJSON {
    * Page component. Bundled with {@link AdminBro.bundle}
    */
   component: string;
+
+  /**
+   * Page icon
+   */
+  icon?: string;
 }

src/backend/utils/options-parser.ts

@@ -34,7 +34,7 @@ export const getBranding = async (
   const { branding } = admin.options
   const defaultLogo = slash(path.join(
     admin.options.rootPath,
-    '/frontend/assets/logo-mini.svg',
+    '/frontend/assets/logo.svg',
   ))
 
   const computed = typeof branding === 'function'

src/frontend/components/app/sidebar/index.ts

@@ -1,7 +1,5 @@
 import Sidebar from './sidebar'
-import SidebarParent from './sidebar-parent'
 import groupResources from './utils/group-resources'
-import SidebarResource from './sidebar-resource'
 
 export * from './sidebar-resource-section'
-export { SidebarParent, Sidebar, groupResources, SidebarResource }
+export { Sidebar, groupResources }

src/frontend/components/app/sidebar/sidebar-branding.tsx

@@ -1,44 +1,57 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
-import { H5 } from '@admin-bro/design-system'
+import { cssClass, themeGet, Text } from '@admin-bro/design-system'
 
 import ViewHelpers from '../../../../backend/utils/view-helpers'
 import { BrandingOptions } from '../../../../admin-bro-options.interface'
+import allowOverride from '../../../hoc/allow-override'
 
-const LogoLink = styled(Link)`
+type Props = {
+  branding: BrandingOptions;
+}
+
+const StyledLogo = styled(Link)`
+  text-align: center;
   display: flex;
-  align-items: center;
+  align-content: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: ${themeGet('space', 'lg')} ${themeGet('space', 'xxl')} ${themeGet('space', 'xxl')};
   text-decoration: none;
-  color: ${({ theme }): string => theme.colors.grey80};
 
-  & > img {
-    margin-right: 12px;
+  & > h1 {
+    text-decoration: none;
+    font-weight: ${themeGet('fontWeights', 'bolder')};
+    font-size: ${themeGet('fontWeights', 'bolder')};
+    color: ${themeGet('colors', 'grey80')};
+    font-size: ${themeGet('fontSizes', 'xl')};
+    line-height: ${themeGet('lineHeights', 'xl')};
+  }
+
+  &:hover h1 {
+    color: ${themeGet('colors', 'primary100')};
   }
 `
 
-type Props = {
-  branding: BrandingOptions;
-}
+const h = new ViewHelpers()
 
 const SidebarBranding: React.FC<Props> = (props) => {
   const { branding } = props
   const { logo, companyName } = branding
-  const h = new ViewHelpers()
   return (
-    <H5>
-      <LogoLink to={h.dashboardUrl()}>
-        {logo && (
-          <img
-            src={logo}
-            alt={companyName}
-            height="35px"
-          />
-        )}
-        <span>{companyName}</span>
-      </LogoLink>
-    </H5>
+    <StyledLogo
+      className={cssClass('Logo')}
+      to={h.dashboardUrl()}
+    >
+      {logo ? (
+        <img
+          src={logo}
+          alt={companyName}
+        />
+      ) : <h1>companyName</h1>}
+    </StyledLogo>
   )
 }
 
-export default SidebarBranding
+export default allowOverride(SidebarBranding, 'SidebarBranding')

src/frontend/components/app/sidebar/sidebar-footer.tsx

@@ -1,23 +1,11 @@
 import React from 'react'
-import { Box, Text, Icon, Link } from '@admin-bro/design-system'
+import { Box, SoftwareBrothers } from '@admin-bro/design-system'
 
 import allowOverride from '../../../hoc/allow-override'
 
 const SidebarFooter: React.FC = () => (
   <Box mt="lg">
-    <Text color="grey60" textAlign="center" fontSize="sm">
-      With
-      <Icon icon="FavoriteFilled" color="love" mx="xs" />
-      by
-      <Link
-        href="http://softwarebrothers.co"
-        target="_blank"
-        rel="noopener noreferrer"
-        mx="xs"
-      >
-        SoftwareBrothers
-      </Link>
-    </Text>
+    <SoftwareBrothers />
   </Box>
 )
 

src/frontend/components/app/sidebar/sidebar-pages.tsx

@@ -1,44 +1,51 @@
 import React from 'react'
-import { Box, Label, Text } from '@admin-bro/design-system'
+import { Navigation, NavigationElementProps } from '@admin-bro/design-system'
 
-import { ReduxState } from '../../../store/store'
-import SidebarLink from './styled/sidebar-link.styled'
+import { useHistory, useLocation } from 'react-router'
 import ViewHelpers from '../../../../backend/utils/view-helpers'
 import { useTranslation } from '../../../hooks/use-translation'
+import { ReduxState } from '../../../store/store'
 
 type Props = {
   pages?: ReduxState['pages'];
 }
 
+const h = new ViewHelpers()
+
 const SidebarPages: React.FC<Props> = (props) => {
   const { pages } = props
 
   const { translateLabel } = useTranslation()
-
-  const h = new ViewHelpers()
+  const location = useLocation()
+  const history = useHistory()
 
   if (!pages || !pages.length) {
     return (<></>)
   }
 
-  const isActive = (page, location): boolean => (
+  const isActive = (page): boolean => (
     !!location.pathname.match(`/pages/${page.name}`)
   )
 
+  const elements: Array<NavigationElementProps> = pages.map(page => ({
+    id: page.name,
+    label: page.name,
+    isSelected: isActive(page),
+    icon: page.icon,
+    href: h.pageUrl(page.name),
+    onClick: (event, element): void => {
+      event.preventDefault()
+      if (element.href) {
+        history.push(element.href)
+      }
+    },
+  }))
+
   return (
-    <Box ml="lg">
-      <Label uppercase color="grey60" mb="lg">{translateLabel('pages')}</Label>
-      {pages.map(page => (
-        <SidebarLink
-          to={h.pageUrl(page.name)}
-          key={page.name}
-          isActive={(match, location): boolean => isActive(page, location)}
-          data-testid="sidebar-page-link"
-        >
-          <Text as="span">{translateLabel(page.name)}</Text>
-        </SidebarLink>
-      ))}
-    </Box>
+    <Navigation
+      label={translateLabel('pages')}
+      elements={elements}
+    />
   )
 }