add sidebar layout

CHANGELOG.md

@@ -11,6 +11,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add suffix prop to menuItem and submenu
 - Add prefix prop to menuItem and submenu
+- Add sidebar layout
+
+  - Add sidebar header component
+  - Add sidebar content component
+  - Add sidebar footer component
 
 ## [0.2.0] - 2020-05-08
 

src/ProSidebar/SidebarContent.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef, LegacyRef } from 'react';
+import classNames from 'classnames';
+
+export interface Props {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const SidebarContent: React.ForwardRefRenderFunction<unknown, Props> = (
+  { children, className, ...rest },
+  ref,
+) => {
+  const sidebarContentRef: LegacyRef<HTMLDivElement> =
+    (ref as any) || React.createRef<HTMLDivElement>();
+  return (
+    <div {...rest} ref={sidebarContentRef} className={classNames('pro-sidebar-content', className)}>
+      {children}
+    </div>
+  );
+};
+
+export default forwardRef<unknown, Props>(SidebarContent);

src/ProSidebar/SidebarFooter.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef, LegacyRef } from 'react';
+import classNames from 'classnames';
+
+export interface Props {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const SidebarFooter: React.ForwardRefRenderFunction<unknown, Props> = (
+  { children, className, ...rest },
+  ref,
+) => {
+  const sidebarFooterRef: LegacyRef<HTMLDivElement> =
+    (ref as any) || React.createRef<HTMLDivElement>();
+  return (
+    <div {...rest} ref={sidebarFooterRef} className={classNames('pro-sidebar-footer', className)}>
+      {children}
+    </div>
+  );
+};
+
+export default forwardRef<unknown, Props>(SidebarFooter);

src/ProSidebar/SidebarHeader.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef, LegacyRef } from 'react';
+import classNames from 'classnames';
+
+export interface Props {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const SidebarHeader: React.ForwardRefRenderFunction<unknown, Props> = (
+  { children, className, ...rest },
+  ref,
+) => {
+  const sidebarHeaderRef: LegacyRef<HTMLDivElement> =
+    (ref as any) || React.createRef<HTMLDivElement>();
+  return (
+    <div {...rest} ref={sidebarHeaderRef} className={classNames('pro-sidebar-header', className)}>
+      {children}
+    </div>
+  );
+};
+
+export default forwardRef<unknown, Props>(SidebarHeader);

src/index.ts

@@ -1,4 +1,7 @@
 export { default as ProSidebar } from './ProSidebar/ProSidebar';
+export { default as SidebarHeader } from './ProSidebar/SidebarHeader';
+export { default as SidebarContent } from './ProSidebar/SidebarContent';
+export { default as SidebarFooter } from './ProSidebar/SidebarFooter';
 export { default as Menu } from './ProSidebar/Menu';
 export { default as MenuItem } from './ProSidebar/MenuItem';
 export { default as SubMenu } from './ProSidebar/SubMenu';

src/scss/partials/_sidebar.scss

@@ -21,6 +21,22 @@
     overflow-y: auto;
     overflow-x: hidden;
     position: relative;
+    display: flex;
+    flex-direction: column;
+
+    .pro-sidebar-header {
+      height: 60px;
+      line-height: 60px;
+      border-bottom: 1px solid rgba($sidebar-color, 0.2);
+    }
+    .pro-sidebar-content {
+      flex-grow: 1;
+    }
+    .pro-sidebar-footer {
+      height: 60px;
+      line-height: 60px;
+      border-top: 1px solid rgba($sidebar-color, 0.2);
+    }
     ul {
       list-style-type: none;
       padding: 0;