add view nav styles

resources/styles/main/partials/workspace-bar.scss

@@ -218,3 +218,55 @@
   }
 
 }
+
+.options-btn {
+  align-items: center;
+  border-right: 4px double $soft-ui-border;
+  display: flex;
+  margin: 0;
+
+  &:last-child {
+    border: none;
+  }
+
+  li {
+    align-items: center;
+    background-color: $secondary-ui-bg;
+    border: 1px solid transparent;
+    border-radius: $br-small;
+    cursor: pointer;
+    display: flex;
+    flex-shrink: 0;
+    height: 30px;
+    justify-content: center;
+    margin: 0 $small;
+    position: relative;
+    width: 30px;
+
+    a {
+      padding-top: 6px;
+    }
+
+    svg {
+      fill: $intense-ui-icons;
+      height: 18px;
+      width: 18px;
+    }
+
+    &:hover {
+      background-color: $color-white;
+      border-color: $soft-ui-border;
+    }
+
+    &.selected {
+      background-color: $main-ui-color;
+
+      svg {
+        fill: $color-white;
+      }
+
+    }
+
+  }
+
+}

resources/styles/view/layouts/main-layout.scss

@@ -23,12 +23,65 @@
   flex-shrink: 0;
   height: 55px;
   width: 100%;
+
   @include bp(tablet) {
     border-right: 1px solid $soft-ui-border;
     border-top: 0;
     height: 100%;
     width: 70px;
   }
+
+}
+
+.view-options-btn {
+  align-items: center;
+  display: flex;
+  margin: auto;
+
+  @include bp(tablet) {
+    flex-direction: column;
+  }
+
+  li {
+    align-items: center;
+    background-color: $secondary-ui-bg;
+    border: 1px solid transparent;
+    border-radius: $br-small;
+    cursor: pointer;
+    display: flex;
+    flex-shrink: 0;
+    height: 40px;
+    justify-content: center;
+    margin: $small;
+    position: relative;
+    width: 40px;
+
+    a {
+      padding-top: 6px;
+    }
+
+    svg {
+      fill: $intense-ui-icons;
+      height: 24px;
+      width: 24px;
+    }
+
+    &:hover {
+      background-color: $color-white;
+      border-color: $soft-ui-border;
+    }
+
+    &.selected {
+      background-color: $main-ui-color;
+
+      svg {
+        fill: $color-white;
+      }
+
+    }
+
+  }
+
 }
 
 .view-canvas {

src/uxbox/view/ui.cljs

@@ -12,6 +12,7 @@
             [uxbox.common.i18n :refer (tr)]
             ;; [uxbox.view.ui.loader :refer (loader)]
             ;; [uxbox.view.ui.lightbox :refer (lightbox)]
+            [uxbox.main.ui.icons :as i]
             [uxbox.common.ui.mixins :as mx]))
 
 ;; --- Main App (Component)
@@ -20,7 +21,16 @@
   [own]
   (html
    [:section.view-content
-    [:div.view-nav "NAV"]
+    [:div.view-nav
+     [:ul.view-options-btn
+      [:li.tooltip.tooltip-right
+        {:alt "sitemap"} i/project-tree]
+      [:li.tooltip.tooltip-right
+        {:alt "view interactions"} i/action]
+      [:li.tooltip.tooltip-right
+        {:alt "share"} i/export]
+      [:li.tooltip.tooltip-right
+        {:alt "save SVG"} i/save]]]
     [:div.view-canvas "VIEW CONTENT"]
    ]
   ))