nav-bar including button system

Viewer/assets/templates/default/defaultViewer.html

@@ -8,7 +8,7 @@
 
     nav-bar {
         position: absolute;
-        height: 80px;
+        height: 160px;
         width: 100%;
         bottom: 0;
         opacity: 0.3;
@@ -19,6 +19,18 @@
         align-items: center;
         justify-content: center;
         display: flex;
+
+        flex-direction: column;
+    }
+
+    /* Big screens have room for the entire navbar */
+
+    @media screen and (min-width: 768px) {
+        nav-bar {
+            flex-direction: row;
+            justify-content: space-between;
+            height: 80px;
+        }
     }
 </style>
 

Viewer/assets/templates/default/navbar.html

@@ -1 +1,72 @@
-<span>BabylonJS Viewer</span>
+<style>
+    div.flex-container {
+        display: flex;
+    }
+
+    div.thumbnail {
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        width: 90px;
+    }
+
+    div.thumbnail img {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        height: 100%;
+        width: auto;
+        border-radius: 50%;
+        -webkit-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+    }
+
+    div.title-container {
+        flex-direction: column;
+        display: flex;
+    }
+
+    span.model-title {
+        font-size: 125%;
+    }
+
+    div.button-container {
+        align-items: center;
+        display: flex;
+    }
+
+    div.button {
+        cursor: pointer;
+        height: 30px;
+        margin: 0 10px;
+    }
+
+    div.button img {
+        height: 100%;
+    }
+</style>
+
+<div class="flex-container">
+    <!-- holding the description -->
+    <div class="thumbnail">
+        <!-- holding the thumbnail -->
+        <img src="{{thumbnail}}" alt="{{title}}">
+    </div>
+    <div class="title-container">
+        <span class="model-title">{{title}}</span>
+        <span class="model-subtitle">{{subtitle}}</span>
+    </div>
+</div>
+<div class="button-container">
+    <!-- holding the buttons -->
+    <div class="button">
+        <img src="{{thumbnail}}" alt="{{title}}">
+    </div>
+    <div class="button">
+        <img src="{{thumbnail}}" alt="{{title}}">
+    </div>
+    <div class="button">
+        <img src="{{thumbnail}}" alt="{{title}}">
+    </div>
+</div>

Viewer/src/configuration/configuration.ts

@@ -182,7 +182,12 @@ export let defaultConfiguration: ViewerConfiguration = {
                 html: require("../../assets/templates/default/defaultViewer.html"),
                 children: {
                     navBar: {
-                        html: require("../../assets/templates/default/navbar.html")
+                        html: require("../../assets/templates/default/navbar.html"),
+                        config: {
+                            thumbnail: require('../../assets/img/loading.png'),
+                            title: "Title",
+                            subtitle: "Subtitle"
+                        }
                     }
                 }
             }

Viewer/src/viewer/defaultViewer.ts

@@ -29,9 +29,10 @@ export class DefaultViewer extends AbstractViewer {
         let nextHeight: string = '0px';
 
         viewerElement.parent.addEventListener('pointerover', () => {
-            let currentHeight = navbar.parent.style.bottom;
+            let currentHeight = navbar.parent.clientHeight + 'px';
             navbar.parent.style.bottom = nextHeight;
             nextHeight = '-' + currentHeight;
+            console.log(nextHeight, currentHeight);
         });
 
         viewerElement.parent.addEventListener('pointerout', () => {