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

chrome/browser/resources/bluetooth_internals/bluetooth_internals.css

 /* Copyright 2016 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 html {
   margin: 0;
   padding: 0;
 }
 
 body {
   margin: 0;
   padding: 0;
 }
 
+/* Page container */
+#page-container {
+  max-height: calc(100% - 56px);
+  overflow-y: auto;
+  position: absolute;
+  top: 56px;
+}
+
+@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);
   display: flex;
   flex-direction: row;
   font-size: 20pt;
   height: 56px;
   justify-content: flex-start;
   padding: 0 16px;
+  position: fixed;
+  top: 0;
+  width: 100%;
 }
 
 .title {
   color: white;
   display: inline-block;
   margin-left: 8px;
 }
 
+@media screen and (min-width: 601px) {
+  #menu-btn {
+    display: none;
+  }
+}
+
+#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;
   margin: 0;
   padding: 0;
   width: 100%;
 }
 
 table tr {
   border: 1px solid #ddd;
@@ skipping 36 matching lines @@
     content: attr(data-label);
     float: left;
     font-weight: bold;
     text-transform: uppercase;
   }
 }
 
 /* Device Row */
 table .removed {
   background-color: #BDBDBD;
-}
+}