Add SidebarGroup & BottomNavigation components

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/app/src/components/Root/Root.tsx

@@ -40,6 +40,8 @@ import {
   SidebarDivider,
   SidebarSpace,
   SidebarScrollWrapper,
+  BottomNavigation,
+  SidebarGroup,
 } from '@backstage/core-components';
 
 const useSidebarLogoStyles = makeStyles({
@@ -101,6 +103,11 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
       <SidebarDivider />
       <SidebarSettings />
     </Sidebar>
+    <BottomNavigation>
+      <SidebarGroup />
+      <SidebarGroup />
+      <SidebarGroup />
+    </BottomNavigation>
     {children}
   </SidebarPage>
 );

packages/core-components/src/layout/Sidebar/Bar.tsx

@@ -133,20 +133,17 @@ export function Sidebar(props: PropsWithChildren<Props>) {
   const isOpen = (state === State.Open && !isSmallScreen) || isPinned;
 
   return (
-    <div
-      className={classes.root}
-      onMouseEnter={handleOpen}
-      onFocus={handleOpen}
-      onMouseLeave={handleClose}
-      onBlur={handleClose}
-      data-testid="sidebar-root"
+    <SidebarContext.Provider
+      value={{
+        isOpen,
+      }}
     >
-      <SidebarContext.Provider
-        value={{
-          isOpen,
-        }}
-      >
         <div
+        onMouseEnter={handleOpen}
+        onFocus={handleOpen}
+        onMouseLeave={handleClose}
+        onBlur={handleClose}
+        data-testid="sidebar-root"
           className={clsx(classes.drawer, {
             [classes.drawerOpen]: isOpen,
           })}
@@ -154,6 +151,5 @@ export function Sidebar(props: PropsWithChildren<Props>) {
           {children}
         </div>
       </SidebarContext.Provider>
-    </div>
   );
 }

packages/core-components/src/layout/Sidebar/BottomNavigation.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  BottomNavigation as MUIBottomNavigation,
+  makeStyles,
+} from '@material-ui/core';
+import React from 'react';
+
+const useStyles = makeStyles({
+  root: {
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});
+
+/**
+ * Filters for sidebar groups and reorders them to create a custom BottomNavigation
+ */
+export const BottomNavigation = ({ children }: React.PropsWithChildren<{}>) => {
+  const classes = useStyles();
+  const [value, setValue] = React.useState('recents');
+
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: string) => {
+    setValue(newValue);
+  };
+
+  return (
+    <MUIBottomNavigation
+      value={value}
+      onChange={handleChange}
+      className={classes.root}
+    >
+      {children}
+    </MUIBottomNavigation>
+  );
+};

packages/core-components/src/layout/Sidebar/Group.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BottomNavigationAction } from '@material-ui/core';
+import MenuIcon from '@material-ui/icons/Menu';
+import React from 'react';
+
+/**
+ * If the page is mobile it should be BottomNavigationAction - otherwise just a fragment
+ * Links to page, which will be displayed
+ * - If 'to' Prop is not defined it will render a Menu page out of the children (if children given)
+ */
+export const SidebarGroup = ({ children }: React.PropsWithChildren<{}>) => {
+  return <BottomNavigationAction label="Recents" icon={<MenuIcon />} />;
+};

packages/core-components/src/layout/Sidebar/index.ts

@@ -15,7 +15,8 @@
  */
 
 export { Sidebar } from './Bar';
-export type { SidebarClassKey } from './Bar';
+export { BottomNavigation } from './BottomNavigation';
+export { SidebarGroup } from './Group';
 export { SidebarPage, SidebarPinStateContext } from './Page';
 export type { SidebarPinStateContextType, SidebarPageClassKey } from './Page';
 export {