Add global tabs

index.php

@@ -64,6 +64,7 @@ html_export_var(array(
       <img src='img/osb_logo.png'>
       <div id='title'>OpenStreet <span class='large'>Browser</span><div class='version' title='<?=$modulekit['version']?>'><?php print substr($modulekit['version'], 0, strpos($modulekit['version'], '+')); ?></div></div>
     </div>
+    <div id='globalTabs'></div>
     <div id='content' class='list'>
       <div id='contentList'></div>
       <div id='contentDetails'></div>

src/index.js

@@ -1,6 +1,7 @@
 /* globals map:true, overpassFrontend:true, currentPath:true, options:true, baseCategory:true, overpassUrl:true showDetails */
 
 var LeafletGeoSearch = require('leaflet-geosearch')
+const tabs = require('modulekit-tabs')
 
 var OverpassFrontend = require('overpass-frontend')
 var OpenStreetBrowserLoader = require('./OpenStreetBrowserLoader')
@@ -17,6 +18,7 @@ global.baseCategory = null
 global.overpassUrl = null
 global.overpassFrontend = null
 global.currentPath = null
+global.tabs = null
 var lastPopupClose = 0
 
 // Optional modules
@@ -42,6 +44,8 @@ window.onload = function () {
     options = {}
   }
 
+  global.tabs = new tabs.Tabs(document.getElementById('globalTabs'))
+
   call_hooks('init')
   call_hooks_callback('init_callback', initState, onload2.bind(this, initState))
 

style.css

@@ -77,6 +77,11 @@ a:active {
   font-size: 16px;
 }
 
+#sidebar > #globalTabs {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
 #sidebar > #content {
   flex: 1;
   flex-shrink: 0;