bluetooth: Add sidebar and page manager for chrome://bluetooth-internals.

chrome/browser/resources/bluetooth_internals/bluetooth_internals.css

Index: chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
diff --git a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
index 0f4812e4303665280190b0d205c59f33f3801c0c..7f7a318614429b792664db5f5963c08cb228ce75 100644
--- a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
+++ b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css
@@ -13,9 +13,28 @@ body {
   padding: 0;
 }
 
+/* Page container */
+#page-container {
+  max-height: calc(100% - 56px);
+  overflow-y: auto;
+  position: absolute;
+  top: 56px;
+}
 
-/* Header bar */
+@media screen and (min-width: 601px) {
+  #page-container {
+    left: 320px;
+    width: calc(100% - 320px);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  #page-container {
+    width: 100%;
+  }
+}
 
+/* Header bar */
 header {
   align-items: center;
   background-color: rgb(33, 150, 243);
@@ -25,6 +44,9 @@ header {
   height: 56px;
   justify-content: flex-start;
   padding: 0 16px;
+  position: fixed;
+  top: 0;
+  width: 100%;
 }
 
 .title {
@@ -33,9 +55,105 @@ header {
   margin-left: 8px;
 }
 
+@media screen and (min-width: 601px) {
+  #menu-btn {
+    display: none;
+  }
+}
 
-/* Device table */
+#menu-btn {
+  cursor: pointer;
+  height: 24px;
+  position: relative;
+  width: 24px;
+}
+
+#menu-btn::before {
+  background: white;
+  box-shadow:
+    0 0.25em 0 0 white,
+    0 0.5em 0 0 white;
+  content: '';
+  height: 3px;
+  position: absolute;
+  top: 3px;
+  width: 24px;
+}
+
+/* Sidebar */
+#sidebar ul {
+  background-color: #F5F5F5;
+  border-right: 1px solid #ddd;
+  list-style-type: none;
+  margin: 0;
+  padding: 8px 0 0 0;
+  position: absolute;
+  width: 320px;
+}
+
+#overlay {
+  display: none;
+}
+
+@media screen and (min-width: 601px) {
+  #sidebar ul {
+    bottom: 0;
+    left: 0;
+    top: 56px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  #sidebar ul {
+    bottom: 0;
+    left: -320px;
+    top: 0;
+    transition: left 195ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    z-index: 2;
+  }
+
+  #sidebar ul.open {
+    bottom: 0;
+    left: 0;
+    top: 0;
+    transition: left 225ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  #overlay.open {
+    background-color: black;
+    bottom: 0;
+    display: block;
+    left: 0;
+    opacity: 0.5;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+  }
+}
 
+#sidebar li {
+  display: block;
+  font-size: 16px;
+  height: 48px;
+  line-height: 48px;
+}
+
+#sidebar li.active {
+  background-color: #BDBDBD;
+}
+
+#sidebar li {
+  padding: 0 16px;
+}
+
+#sidebar li:hover {
+  background-color: #E0E0E0;
+}
+
+/* Device table */
 table {
   border: 1px solid #ccc;
   border-collapse: collapse;
@@ -92,4 +210,4 @@ table th {
 /* Device Row */
 table .removed {
   background-color: #BDBDBD;
-}
+}