Display search on mobile (#286)

src/index.css

@@ -178,10 +178,6 @@ div.zoom {
   text-transform: uppercase;
 }
 
-.ui.sub.header, .ui.list {
-  margin-left: 20px;
-}
-
 .limit-height {
   height: 300px;
   overflow-y: scroll;
@@ -339,6 +335,14 @@ div.zoom {
   white-space: pre;
 }
 
+@media (max-width: 450px) {
+  /* Hide the title from the top bar when the viewport is too small to display
+     it alongside the search box. */
+  .topbar--title {
+    display: none;
+  }
+}
+
 @media (max-width: 767px) {
   #sidebar {
     background-color: #fff;
@@ -385,4 +389,15 @@ div.zoom {
   #content #sidebar.very.thin ~ .pusher {
     width: 100%;
   }
+
+  /* Push the search box to the right on small screens. */
+  .ui.search {
+    margin-left: auto;
+    margin-right: 1em;
+  }
+
+  .ui.search>.results {
+    left: initial;
+    right: 0;
+  }
 }

src/menu/top_bar.tsx

@@ -224,10 +224,10 @@ export function TopBar(props: Props) {
     }
 
     switch (screenSize) {
-      case ScreenSize.LARGE: {
+      case ScreenSize.LARGE:
         // Show dropdown if chart is shown, otherwise show individual menu
         // items.
-        const menus = props.showingChart ? (
+        return props.showingChart ? (
           <Dropdown
             trigger={
               <div>
@@ -250,8 +250,6 @@ export function TopBar(props: Props) {
             <WikiTreeMenu menuType={MenuType.Menu} {...props} />
           </>
         );
-        return menus;
-      }
 
       case ScreenSize.SMALL:
         return (
@@ -311,7 +309,16 @@ export function TopBar(props: Props) {
             </Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
+        <div className="topbar--title">
           {props.standalone ? <Link to="/">{title()}</Link> : title()}
+        </div>
+        {props.showingChart && (
+          <SearchBar
+            data={props.data!}
+            onSelection={props.eventHandlers.onSelection}
+            {...props}
+          />
+        )}
       </>
     );
   }