Add navigation bar to App layout

ui/src/lib.rs

@@ -1,4 +1,4 @@
-#![recursion_limit = "128"]
+#![recursion_limit = "256"]
 
 mod live;
 mod utils;

ui/src/widgets/app.rs

@@ -30,20 +30,33 @@ impl Widget for Model {
  }
 
  fn main_view(&self) -> View<Self> {
+ let mut drawer_style = String::new();
+ drawer_style.push_str("height: 100vh;");
+ drawer_style.push_str("top: 0px;");
+ drawer_style.push_str("max-height: calc(100% - 36px);");
+ drawer_style.push_str("transform: translateX(0%);");
+ drawer_style.push_str("width: 256px;");
+ let mut app_bar_style = String::new();
+ app_bar_style.push_str("margin-top: 0px;");
+ app_bar_style.push_str("transform: translateY(0px);");
+ app_bar_style.push_str("left: 256px;");
+ app_bar_style.push_str("right: 0px;");
  html! {
  <div class="f-application">
  <div class="f-application--wrap">
- <div class="f-navigation-drawer">
- <div class="f-navigation-drawer_border" />
- <div class="f-navigation-drawer_content">
+ <div class="f-navigation-drawer f-navigation-drawer--fixed" style=drawer_style>
+ <div class="f-navigation-drawer__content">
  <widgets::List: list=self.app.navigation_drawer.clone() />
  </div>
+ <div class="f-navigation-drawer__border" />
  </div>
- <div class="app-bar">
+ <div class="f-app-bar f-toolbar" style=app_bar_style>
  </div>
- <div class="content">
+ <div class="f-content">
  <widgets::Container: container=self.app.content.clone() />
  </div>
+ <div class="f-footer">
+ </div>
  </div>
  </div>
  }

ui/styles/styles.sass

@@ -20,6 +20,15 @@ $background_color: #FFF
 $text_color: #000
 $small_padding: 30px
 
+body
+ box-sizing: border-box
+ overflow-y: scroll
+
+*
+ box-sizing: inherit
+ padding: 0
+ margin: 0
+
 // MIXINS
 
 // Standard block that has no special properties
@@ -41,26 +50,6 @@ body
 a
  cursor: pointer
 
-// Master block
-.container
- width: 100%
- margin-right: auto
- margin-left: auto
- padding: 0
-
-// Alignment and justification
-.layout
- display: flex
- flex-wrap: wrap
- flex: 1 1 auto
- margin-right: -$grid-gutter / 2
- margin-left: -$grid-gutter / 2
-
-// Support breakpoints
-.flex
- // TODO: breakpoints...
-
-
 .f-application
  display: flex
 
@@ -69,8 +58,8 @@ a
  min-height: 100vh
  max-width: 100%
  display: flex
- flex: 1 1 auto
  flex-direction: column
+ flex: 1 1 auto
  backface-visibility: hidden
 
 .f-navigation-drawer
@@ -82,6 +71,11 @@ a
  overflow: hidden
  pointer-events: auto
 
+.f-navigation-drawer--fixed
+ position: fixed
+ z-index: 6
+ background: wheat
+
 .f-navigation-drawer__border
  position: absolute
  right: 0
@@ -93,3 +87,15 @@ a
  height: 100%
  overflow-y: auto
  overflow-x: hidden
+
+.f-app-bar
+ background: yellow
+
+.f-toolbar
+ max-width: 100%
+ flex: 1 1 auto
+
+.f-content
+ display: flex
+ flex: 1 0 auto
+ max-width: 100%