diff --git a/examples/stocks/stocks.sky b/examples/stocks/stocks.sky
index 5db7799cfb85238f8904576f9bff8d406b399b47..e90729c61f7fd1aa30f2bba51b4fb86dcbc1c4cf 100644
--- a/examples/stocks/stocks.sky
+++ b/examples/stocks/stocks.sky
@@ -3,9 +3,12 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-->
+
+
+
@@ -35,12 +38,8 @@
color: white;
}
sky-icon {
- display: flex;
- justify-content: center;
- align-items: center;
padding: 8px;
margin: 0 4px;
- color: black;
}
#title {
flex: 1;
@@ -51,7 +50,14 @@
}
- I am drawer
+
+ Stocks
+
+ Inbox
+ Drafts
+
+ Settings
+ Help & feedback
diff --git a/framework/sky-drawer-header.sky b/framework/sky-drawer-header.sky
new file mode 100644
index 0000000000000000000000000000000000000000..b680d7ed648a713d753d0b638ed5671e1a7cbf11
--- /dev/null
+++ b/framework/sky-drawer-header.sky
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/framework/sky-drawer.sky b/framework/sky-drawer.sky
index 906f4f4939d33106a40712581a2f6f51c3e4bddd..a772d9874bbc511dc5be9f177a896ef2e16e27a8 100644
--- a/framework/sky-drawer.sky
+++ b/framework/sky-drawer.sky
@@ -19,7 +19,7 @@
right: 0;
}
#content {
- background-color: white;
+ background-color: #FAFAFA;
will-change: transform;
position: absolute;
width: 256px;
diff --git a/framework/sky-menu-divider.sky b/framework/sky-menu-divider.sky
new file mode 100644
index 0000000000000000000000000000000000000000..d83f70ab00f4ac65625c051eeae48d3cfa3d9686
--- /dev/null
+++ b/framework/sky-menu-divider.sky
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/framework/sky-menu-item.sky b/framework/sky-menu-item.sky
new file mode 100644
index 0000000000000000000000000000000000000000..3313ada20491734e9f40e7252c1ad6a2f24e7f18
--- /dev/null
+++ b/framework/sky-menu-item.sky
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+