From f505d876382b9468a49e9ca2f813c6a20225b3ea Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Mon, 28 Feb 2022 18:48:00 +0800
Subject: [PATCH] feat(console): implement sidebar

---
 packages/console/package.json                 | 13 ++++++----
 packages/console/src/App.module.scss          |  3 +++
 .../Sidebar/components/Item/index.module.scss | 26 +++++++++++++++++++
 .../Sidebar/components/Item/index.tsx         | 19 ++++++++++++++
 .../components/Section/index.module.scss      | 10 +++++++
 .../Sidebar/components/Section/index.tsx      | 19 ++++++++++++++
 .../src/components/Sidebar/icons/BarGraph.tsx | 11 ++++++++
 .../src/components/Sidebar/icons/Bolt.tsx     | 11 ++++++++
 .../src/components/Sidebar/index.module.scss  |  8 +++---
 .../console/src/components/Sidebar/index.tsx  | 17 +++++++++++-
 packages/console/src/scss/_underscore.scss    |  6 +++++
 packages/console/src/scss/normalized.scss     |  4 ++-
 12 files changed, 137 insertions(+), 10 deletions(-)
 create mode 100644 packages/console/src/components/Sidebar/components/Item/index.module.scss
 create mode 100644 packages/console/src/components/Sidebar/components/Item/index.tsx
 create mode 100644 packages/console/src/components/Sidebar/components/Section/index.module.scss
 create mode 100644 packages/console/src/components/Sidebar/components/Section/index.tsx
 create mode 100644 packages/console/src/components/Sidebar/icons/BarGraph.tsx
 create mode 100644 packages/console/src/components/Sidebar/icons/Bolt.tsx

diff --git a/packages/console/package.json b/packages/console/package.json
index 362e81c09..847946d28 100644
--- a/packages/console/package.json
+++ b/packages/console/package.json
@@ -42,13 +42,16 @@
     "@/*": "./src/$1"
   },
   "eslintConfig": {
-    "extends": "@silverhand/react"
+    "extends": "@silverhand/react",
+    "rules": {
+      "react/jsx-curly-brace-presence": [
+        "error",
+        { "props": "never", "children": "never", "propElementValues": "always" }
+      ]
+    }
   },
   "stylelint": {
-    "extends": "@silverhand/eslint-config-react/.stylelintrc",
-    "rules": {
-      "color-function-notation": "legacy"
-    }
+    "extends": "@silverhand/eslint-config-react/.stylelintrc"
   },
   "prettier": "@silverhand/eslint-config/.prettierrc"
 }
diff --git a/packages/console/src/App.module.scss b/packages/console/src/App.module.scss
index 91d9cfa0c..fa0a04e94 100644
--- a/packages/console/src/App.module.scss
+++ b/packages/console/src/App.module.scss
@@ -1,4 +1,7 @@
 .skeleton {
+
+  // TO-DO: move to theme component
+  --color-on-surface-variant: #47464e;
   position: absolute;
   left: 0;
   top: 0;
diff --git a/packages/console/src/components/Sidebar/components/Item/index.module.scss b/packages/console/src/components/Sidebar/components/Item/index.module.scss
new file mode 100644
index 000000000..f39aaf59b
--- /dev/null
+++ b/packages/console/src/components/Sidebar/components/Item/index.module.scss
@@ -0,0 +1,26 @@
+@use '@/scss/underscore' as _;
+
+.row {
+  display: flex;
+  align-items: center;
+  padding: _.unit(3) _.unit(6);
+  color: var(--color-on-surface-variant);
+
+  > div + div {
+    margin-left: _.unit(5);
+  }
+
+  .icon {
+    width: _.unit(6);
+    height: _.unit(6);
+    flex: 0 0 _.unit(6);
+
+    svg {
+      fill: var(--color-on-surface-variant);
+    }
+  }
+
+  .title {
+    @include _.subhead-1;
+  }
+}
diff --git a/packages/console/src/components/Sidebar/components/Item/index.tsx b/packages/console/src/components/Sidebar/components/Item/index.tsx
new file mode 100644
index 000000000..c13e7e08b
--- /dev/null
+++ b/packages/console/src/components/Sidebar/components/Item/index.tsx
@@ -0,0 +1,19 @@
+import React, { ReactChild } from 'react';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  icon?: ReactChild;
+  title: string;
+};
+
+const Item = ({ icon, title }: Props) => {
+  return (
+    <div className={styles.row}>
+      {icon && <div className={styles.icon}>{icon}</div>}
+      <div className={styles.title}>{title}</div>
+    </div>
+  );
+};
+
+export default Item;
diff --git a/packages/console/src/components/Sidebar/components/Section/index.module.scss b/packages/console/src/components/Sidebar/components/Section/index.module.scss
new file mode 100644
index 000000000..105deccf7
--- /dev/null
+++ b/packages/console/src/components/Sidebar/components/Section/index.module.scss
@@ -0,0 +1,10 @@
+@use '@/scss/underscore' as _;
+
+.title {
+  font-weight: bold;
+  color: #adaab4;
+  padding: _.unit(3) _.unit(6);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-size: 12px;
+}
diff --git a/packages/console/src/components/Sidebar/components/Section/index.tsx b/packages/console/src/components/Sidebar/components/Section/index.tsx
new file mode 100644
index 000000000..6f1068d30
--- /dev/null
+++ b/packages/console/src/components/Sidebar/components/Section/index.tsx
@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  title: string;
+  children: ReactNode;
+};
+
+const Section = ({ children, title }: Props) => {
+  return (
+    <div>
+      <div className={styles.title}>{title}</div>
+      {children}
+    </div>
+  );
+};
+
+export default Section;
diff --git a/packages/console/src/components/Sidebar/icons/BarGraph.tsx b/packages/console/src/components/Sidebar/icons/BarGraph.tsx
new file mode 100644
index 000000000..55ae3c4b8
--- /dev/null
+++ b/packages/console/src/components/Sidebar/icons/BarGraph.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const BarGraph = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V17C11 17.2652 11.1054 17.5196 11.2929 17.7071C11.4804 17.8946 11.7348 18 12 18C12.2652 18 12.5196 17.8946 12.7071 17.7071C12.8946 17.5196 13 17.2652 13 17V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6ZM7 12C6.73478 12 6.48043 12.1054 6.29289 12.2929C6.10536 12.4804 6 12.7348 6 13V17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18C7.26522 18 7.51957 17.8946 7.70711 17.7071C7.89464 17.5196 8 17.2652 8 17V13C8 12.7348 7.89464 12.4804 7.70711 12.2929C7.51957 12.1054 7.26522 12 7 12ZM17 10C16.7348 10 16.4804 10.1054 16.2929 10.2929C16.1054 10.4804 16 10.7348 16 11V17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V11C18 10.7348 17.8946 10.4804 17.7071 10.2929C17.5196 10.1054 17.2652 10 17 10ZM19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19Z" />
+    </svg>
+  );
+};
+
+export default BarGraph;
diff --git a/packages/console/src/components/Sidebar/icons/Bolt.tsx b/packages/console/src/components/Sidebar/icons/Bolt.tsx
new file mode 100644
index 000000000..aacfb2fe3
--- /dev/null
+++ b/packages/console/src/components/Sidebar/icons/Bolt.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Bolt = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path d="M19.89 9.55004C19.8069 9.38513 19.6797 9.24645 19.5226 9.14937C19.3656 9.05229 19.1847 9.0006 19 9.00004H14V3.00004C14.0107 2.78073 13.949 2.56397 13.8243 2.38324C13.6996 2.20251 13.5188 2.06785 13.31 2.00004C13.1092 1.93399 12.8927 1.93324 12.6914 1.99792C12.4902 2.0626 12.3147 2.18937 12.19 2.36004L4.18998 13.36C4.08975 13.5049 4.02956 13.6737 4.01551 13.8493C4.00147 14.0249 4.03406 14.2011 4.10998 14.36C4.17991 14.5418 4.30137 14.6992 4.45947 14.8129C4.61757 14.9266 4.80543 14.9916 4.99998 15H9.99998V21C10.0001 21.2109 10.067 21.4164 10.1909 21.587C10.3148 21.7576 10.4895 21.8847 10.69 21.95C10.7905 21.9812 10.8948 21.998 11 22C11.1578 22.0005 11.3134 21.9635 11.4542 21.8923C11.595 21.821 11.7169 21.7174 11.81 21.59L19.81 10.59C19.9177 10.4408 19.9822 10.2648 19.9963 10.0813C20.0104 9.8978 19.9736 9.71397 19.89 9.55004ZM12 17.92V14C12 13.7348 11.8946 13.4805 11.7071 13.2929C11.5196 13.1054 11.2652 13 11 13H6.99998L12 6.08004V10C12 10.2653 12.1053 10.5196 12.2929 10.7071C12.4804 10.8947 12.7348 11 13 11H17L12 17.92Z" />
+    </svg>
+  );
+};
+
+export default Bolt;
diff --git a/packages/console/src/components/Sidebar/index.module.scss b/packages/console/src/components/Sidebar/index.module.scss
index 871f5a2d2..3f300fba5 100644
--- a/packages/console/src/components/Sidebar/index.module.scss
+++ b/packages/console/src/components/Sidebar/index.module.scss
@@ -1,9 +1,11 @@
 @use '@/scss/underscore' as _;
 
 .sidebar {
-  padding: _.unit(3);
   flex-grow: 0;
   flex-shrink: 0;
-  // TO-DO: remove after fulfilled with components
-  width: 250px;
+  width: 275px;
+
+  > div + div {
+    margin-top: _.unit(6);
+  }
 }
diff --git a/packages/console/src/components/Sidebar/index.tsx b/packages/console/src/components/Sidebar/index.tsx
index 529d47c5b..74e630c36 100644
--- a/packages/console/src/components/Sidebar/index.tsx
+++ b/packages/console/src/components/Sidebar/index.tsx
@@ -1,9 +1,24 @@
 import React from 'react';
 
+import Item from './components/Item';
+import Section from './components/Section';
+import BarGraph from './icons/BarGraph';
+import Bolt from './icons/Bolt';
 import * as styles from './index.module.scss';
 
 const Sidebar = () => {
-  return <div className={styles.sidebar}>Sidebar</div>;
+  return (
+    <div className={styles.sidebar}>
+      <Section title="Overview">
+        <Item icon={<Bolt />} title="Get Started" />
+        <Item icon={<BarGraph />} title="Dashboard" />
+      </Section>
+      <Section title="Resource Management">
+        <Item icon={<Bolt />} title="Get Started" />
+        <Item icon={<BarGraph />} title="Dashboard" />
+      </Section>
+    </div>
+  );
 };
 
 export default Sidebar;
diff --git a/packages/console/src/scss/_underscore.scss b/packages/console/src/scss/_underscore.scss
index 8f5c5b957..7387336b0 100644
--- a/packages/console/src/scss/_underscore.scss
+++ b/packages/console/src/scss/_underscore.scss
@@ -8,3 +8,9 @@
   align-items: center;
   justify-content: center;
 }
+
+@mixin subhead-1 {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+}
diff --git a/packages/console/src/scss/normalized.scss b/packages/console/src/scss/normalized.scss
index 2f6b901fd..2a3fe0785 100644
--- a/packages/console/src/scss/normalized.scss
+++ b/packages/console/src/scss/normalized.scss
@@ -1,8 +1,10 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
+  font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
   background: rgb(#e5e1ec, 50%);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
 }
 
 * {