2 files changed, 24 insertions, 8 deletions
diff --git a/templates/base.html b/templates/base.html
index df76171..1584526 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" type="text/css" href="/static/theme.css">
     <link rel="stylesheet" type="text/css" href="/static/upload.css">
     <link rel="stylesheet" type="text/css" href="/static/import.css">
diff --git a/templates/index.html b/templates/index.html
index 4d5c350..78d5586 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,14 +1,16 @@
 {{ define "content" }}
 {{ $playing := .Playing }}
-<div class="nav">
-  <ul>
-    <li><a {{ if eq $.Quality "" }}class="active"{{ end }} href="/v/{{ $playing.ID }}">fullHD</a></li>
-    <li><a {{ if eq $.Quality "720p" }}class="active"{{ end }} href="/v/{{ $playing.ID }}?quality=720p">720p</a></li>
-    <li><a {{ if eq $.Quality "480p" }}class="active"{{ end }} href="/v/{{ $playing.ID }}?quality=480p">480p</a></li>
-    <li><a {{ if eq $.Quality "360p" }}class="active"{{ end }} href="/v/{{ $playing.ID }}?quality=360p">360p</a></li>
-    <li><a {{ if eq $.Quality "240p" }}class="active"{{ end }} href="/v/{{ $playing.ID }}?quality=240p">240p</a></li>
-  </ul>
+<div class="topnav" id="myTopnav">
+  <a {{ if eq $.Quality "" }}class="active"{{ end }} href="/v/{{ $playing.ID }}">fullHD</a>
+  <a {{ if eq $.Quality "720p" }}class="active"{{ end }} href="/v/{{ $playing.ID }}?quality=720p">720p</a>
+  <a {{ if eq $.Quality "480p" }}class="active"{{ end }} href="/v/{{ $playing.ID }}?quality=480p">480p</a>
+  <a {{ if eq $.Quality "360p" }}class="active"{{ end }} href="/v/{{ $playing.ID }}?quality=360p">360p</a>
+  <a {{ if eq $.Quality "240p" }}class="active"{{ end }} href="/v/{{ $playing.ID }}?quality=240p">240p</a>
+  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+    <i class="fa fa-bars"></i>
+  </a>
 </div>
+
 <div id="player">
   {{ if $playing.ID }}
     <video id="video" controls preload="metadata" poster="/t/{{ $playing.ID}}">
@@ -43,3 +45,16 @@
   {{ end }}
 </div>
 {{end}}
+{{ define "scripts" }}
+<script type="application/javascript">
+/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
+function myFunction() {
+  var x = document.getElementById("myTopnav");
+  if (x.className === "topnav") {
+    x.className += " responsive";
+  } else {
+    x.className = "topnav";
+  }
+}
+</script>
+{{ end }}