3 files changed, 24 insertions(+), 7 deletions(-)

M public/css/site.css
A public/img/logo.png
M src/wikisophy/core.cljs

@@ 40,7 40,7 @@ a:hover {
     margin-top: 1em;
 }
 
-img {
+.loading img {
     display: block;
     margin: auto;
 }


@@ 48,3 48,9 @@ img {
 #vis {
     margin-top: 2em;
 }
+
+.loading {
+    text-align: center;
+    font-size: 1em;
+    font-style: italic;
+}

@@ 8,10 8,20 @@
 ;; -------------------------
 ;; Views
 
+(defn navbar []
+  [:nav
+   [:a.brand {:href "#"}
+    [:img.logo {:src "img/logo.png"}]
+    [:span "Wikisophy"]]
+   [:input {:id "bmenub" :type "checkbox" :class "show"}]
+   [:label.icon-g {:for "bmenub" :class "burger pseudo button"} "menu"]
+   [:div.menu
+    [:a.pseudo.button {:href "#"} "About"]
+    [:a.pseudo.button {:href "#"} "Analytics"]]])
+
 (defn header []
   [:header
-   [:h1 "WIKISOPHY"] 
-   [:h2 "Do all paths lead to "
+   [:h3 "Do all paths lead to "
     [:a {:href "https://wikipedia.org/wiki/Philosophy"} "Philosophy"] "?"]])
 
 (defn response-handler [response] ;; this functionality will be implemented to backend


@@ 30,7 40,7 @@
 (defn input []
   (let [query (r/atom "")]
     (fn []
-      [:div
+      [:div#search
        [:input {:type "text"
                 :placeholder "Enter your query here!"
                 :value @query


@@ 108,16 118,17 @@
   (fn []
     (cond
       (= @path "waiting")
-      [:div
+      [:div#vis.loading
        [:img {:src "img/loading.svg"}]
        [:p "Please wait while crawling through Wikipedia."]]
-      (= @path []) [:div]
+      (= @path []) [:div#vis]
       :else 
       [:div
        [oz/vega (path-tree @path)]])))
 
 (defn front-page []
-  [:body [header]
+  [:body [navbar]
+   [header]
    [input]
    [graph]])