basic nav functionality

template/static/images/rss.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>

template/static/javascripts/app.js

@@ -1 +1,52 @@
-console.log("hello")
+'use strict';
+
+var FILTERS = [
+  {'title': 'All', 'value': 'all', 'icon': 'circle-full'},
+  {'title': 'Unread', 'value': 'unread', 'icon': 'circle'},
+  {'title': 'Starred', 'value': 'starred', 'icon': 'star'},
+]
+
+
+new Vue({
+  el: '#app',
+  data: function() {
+    return {
+      'filters': FILTERS,
+      'filterSelected': 'all',
+      'folders': [
+        {'id': 1, 'title': 'Tech', 'is_expanded': false},
+        {'id': 2, 'title': 'News', 'is_expanded': true},
+      ],
+      'feeds': [
+        {'id': '1', 'title': 'news.ycombinator.com', 'folder_id': 1},
+        {'id': '2', 'title': '/r/programming', 'folder_id': 1},
+        {'id': '3', 'title': 'BBC', 'folder_id': 2},
+        {'id': '4', 'title': 'The Guardian', 'folder_id': 2},
+        {'id': '5', 'title': 'Random Stuff', 'folder_id': null},
+      ],
+      'feedSelected': null,
+    }
+  },
+  computed: {
+    foldersWithFeeds: function() {
+      var feedsByFolders = this.feeds.reduce(function(folders, feed) {
+        if (!folders[feed.folder_id])
+          folders[feed.folder_id] = [feed]
+        else
+          folders[feed.folder_id].push(feed)
+        return folders
+      }, {})
+      var folders = this.folders.slice().map(function(folder) {
+        folder.feeds = feedsByFolders[folder.id]
+        return folder
+      })
+      folders.push({id: null, feeds: feedsByFolders[null]})
+      return folders
+    },
+  },
+  methods: {
+    toggleFolderExpanded: function(folder) {
+      folder.is_expanded = !folder.is_expanded
+    }
+  }
+})

template/static/stylesheets/app.css

@@ -1,12 +1,16 @@
+[v-cloak] {
+  display: none !important;
+}
+
 .wrapper {
   max-width: 1368px;
 }
 
 .nav-icon {
-  width: 16px;
-  height: 16px;
-  min-width: 16px;
-  margin-right: 8px;
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  margin-right: 7px;
 }
 
 .feed-icon {
@@ -28,11 +32,27 @@
   border-radius: 4px;
 }
 
+.nav-select {
+  position: relative;
+}
+
+.nav-select input {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+  top: 0; left: 0;
+}
+
 .nav-item:hover, .feed-item:hover {
   background-color: #f8f9fa;
   cursor: pointer;
 }
-.nav-item:active, .feed-item:active {
+
+.feed-item:active, .nav-select input:checked + .nav-item {
   background-color: #007bff;
   color: white;
 }
+
+.expanded {
+  transform: rotate(90deg);
+}