1 files changed, 84 insertions, 0 deletions
diff --git a/FrontEnd/src/app/views/common/common.sass b/FrontEnd/src/app/views/common/common.sass
index f3022d19..991a59be 100644
--- a/FrontEnd/src/app/views/common/common.sass
+++ b/FrontEnd/src/app/views/common/common.sass
@@ -32,6 +32,90 @@
   background: white
   touch-action: none
 
+.app-bar
+  display: flex
+  align-items: center
+  height: 56px
+
+  position: fixed
+  z-index: 1030
+  top: 0
+  left: 0
+  right: 0
+
+  background-color: var(--tl-primary-color)
+
+  a
+    color: var(--tl-text-inactive-on-primary-color)
+    text-decoration: none
+    margin: 0 1em
+
+    &.active
+      color: var(--tl-text-on-primary-color)
+
+.app-bar-brand
+  display: flex
+  align-items: center
+
+.app-bar-brand-icon
+  height: 2em
+
+.app-bar-main-area
+  display: flex
+  flex-grow: 1
+
+.app-bar-link-area
+  display: flex
+  align-items: center
+  flex-shrink: 0
+
+.app-bar-user-area
+  display: flex
+  align-items: center
+  flex-shrink: 0
+  margin-left: auto
+
+.small-screen
+  .app-bar-main-area
+    position: absolute
+    top: 56px
+    left: 0
+    right: 0
+
+    transform-origin: top
+    transition: transform 0.6s
+
+    background-color: var(--tl-primary-color)
+
+    flex-direction: column
+
+    &.app-bar-collapse
+      transform: scale(1,0)
+
+    a
+      text-align: left
+      padding: 0.5em 0.5em
+
+  .app-bar-link-area
+    flex-direction: column
+    align-items: stretch
+
+  .app-bar-user-area
+    flex-direction: column
+    align-items: stretch
+    margin-left: unset
+
+  .app-bar-avatar
+    align-self: flex-end
+
+.app-bar-toggler
+  margin-left: auto
+  font-size: 2em
+  margin-right: 1em
+  color: var(--tl-text-on-primary-color)
+  cursor: pointer
+  user-select: none
+
 .cru-skeleton
   padding: 0 1em