add header

Author: stilscher

src/Content.re

@@ -8,7 +8,7 @@ let make = (~state: State.t, ~display: GvDisplay.t, ~dispatch) => {
     | _ => None
     };
 
-  <div className="d-flex flex-column h-75 overflow-auto p-2">
+  <div className="d-flex flex-column h-75 overflow-auto p-4">
     <GvBreadcrumb display={state.display} dispatch />
     {switch display {
      | File(file) =>

src/Main.re

@@ -49,30 +49,33 @@ let make = (~cil, ~goblint, ~warnings, ~meta, ~stats, ~file_loc) => {
   );
 
   <div className="container-fluid">
-    <div className="row">
-      <div className="col-2 border-end vh-100">
-        <SidebarLeft
-          active={state.selected_sidebar_left}
+  <header className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap shadow p-1">
+    <div className="navbar-brand mx-2" >{React.string("Gobview")}</div>
+  </header>
+  <div className="main row vh-100">
+    <div className="col-2 border-end overflow-auto bg-light py-2 h-100">
+      <SidebarLeft
+        active={state.selected_sidebar_left}
+        dispatch
+        search={state.search}
+        cil={state.cil}
+      />
+    </div>
+    <div className="col-7 d-flex flex-column">
+      {switch (state.display) {
+      | None => <div className="d-flex flex-column h-75 overflow-auto p-4" />
+      | Some(f) => <Content state display=f dispatch />
+      }}
+      <Panel state dispatch />
+    </div>
+    <div className="col-3 border-start overflow-auto py-2 h-100">
+        <SidebarRight
+          active={state.selected_sidebar_right}
+          goblint
+          inspect={state.inspect}
           dispatch
-          search={state.search}
-          cil={state.cil}
         />
-      </div>
-      <div className="col-8 d-flex flex-column vh-100 p-0">
-        {switch (state.display) {
-        | None => <div className="d-flex flex-column h-75 overflow-auto p-2" />
-        | Some(f) => <Content state display=f dispatch />
-        }}
-        <Panel state dispatch />
-      </div>
-      <div className="col-2 border-start overflow-auto vh-100">
-          <SidebarRight
-            active={state.selected_sidebar_right}
-            goblint
-            inspect={state.inspect}
-            dispatch
-          />
-      </div>
     </div>
+  </div>
   </div>;
 };

src/SidebarLeft.re

@@ -7,7 +7,7 @@ let views = [
   (SelectedSidebar.Search, "Search"),
 ];
 
-let make_nav = (active, dispatch) => {
+let make_tabs = (active, dispatch) => {
   let on_click = (act, _) => Option.may(dispatch, act);
 
   <ul className="nav nav-tabs">
@@ -27,8 +27,8 @@ let make_nav = (active, dispatch) => {
 
 [@react.component]
 let make = (~active, ~dispatch, ~search, ~cil) => {
-  <>
-    {make_nav(active, dispatch)}
+  <div>
+    {make_tabs(active, dispatch)}
     <div className="tab-content">
       <div className="tab-pane active">
         {switch (active) {
@@ -38,5 +38,5 @@ let make = (~active, ~dispatch, ~search, ~cil) => {
          }}
       </div>
     </div>
-  </>;
+  </div>;
 };

src/stylesheet.scss

@@ -75,7 +75,6 @@ ul,
 
 .filebox {
   background-color: #f5f2f0;
-  padding: 10px;
 }
 
 .filebox h3 {
@@ -185,3 +184,7 @@ ol, ul {
   text-decoration: underline;
   cursor: pointer;
 }
+
+.main {
+  padding-top: 48px;
+}