diff --git a/ui-src/NVRApplication.js b/ui-src/NVRApplication.js
index ca92ee3..4a84931 100644
--- a/ui-src/NVRApplication.js
+++ b/ui-src/NVRApplication.js
@@ -220,7 +220,7 @@ function updateSession(session) {
return;
}
sessionBar.append($('').text(session.username));
- const logout = $('logout');
+ const logout = $('logout');
logout.click(() => {
api
.logout(session.csrf)
@@ -377,6 +377,11 @@ export default class NVRApplication {
* Start the application.
*/
start() {
+ let nav = $('#nav');
+
+ $('#toggle-nav').click(() => {
+ nav.toggle('slide');
+ });
loginDialog = $('#login').dialog({
autoOpen: false,
modal: true,
diff --git a/ui-src/assets/index.css b/ui-src/assets/index.css
index 1165ea2..0654334 100644
--- a/ui-src/assets/index.css
+++ b/ui-src/assets/index.css
@@ -1,12 +1,30 @@
+@media only screen and (max-width: 720px) {
+ #nav {
+ float: none;
+ display: none;
+ }
+}
+
body {
font-family: Arial, Helvetica, sans-serif;
}
+#top {
+ width: 100%;
+ padding-bottom: 2ex;
+}
+#toggle-nav {
+ font-size: 1.25em;
+ cursor: pointer;
+}
#nav {
float: left;
}
#session {
float: right;
}
+#logout {
+ cursor: pointer;
+}
#datetime .ui-datepicker {
width: 100%;
diff --git a/ui-src/assets/index.html b/ui-src/assets/index.html
index fa1ac44..6031f9a 100644
--- a/ui-src/assets/index.html
+++ b/ui-src/assets/index.html
@@ -5,7 +5,9 @@
Moonfire NVR
-