header.scss file added + styles changed

src/styles/header.scss

@@ -0,0 +1,78 @@
+
+#header {
+  background-color: $color-white;
+  color: $color-black;
+  //position: relative;
+  //@include border-shadow(bottom);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+  border: solid $color-white;
+  border-width: 1px 0;
+  display: flex;
+  //flex-grow: 0;
+  //flex-basis : 150px;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 1em 0.4em;
+
+  > * {
+    padding: 0 1.8rem;
+  }
+}
+
+#button-toggle {
+  @include icon('menu');
+  display: none;
+  color: $color-black;
+  font-size: 2em;
+  padding: 0.72em;
+  cursor: pointer;
+}
+
+#logo {
+  flex: 1 1 0;
+}
+
+#notifications-button {
+  @include icon(bell);
+  font-size: 2em;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+#notifications {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 0;
+  left: 0;
+  z-index: 1;
+
+  > div {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
+#profile {
+  > * {
+    vertical-align: middle;
+  }
+
+  img {
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 100%;
+    margin-right: 1rem;
+  }
+
+  span {
+    color: $color-black;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 0.38px;
+    padding: 0 0.5rem;
+  }
+}

src/styles/index.scss

@@ -10,4 +10,5 @@
 @import 'content';
 
 // @import 'members';
+@import 'header';
 @import 'menu';

src/styles/main.scss

@@ -68,7 +68,7 @@ h4 {
   @extend %frame;
   padding: 1em;
 }
-
+/*
 #header {
   background-color: $color-white;
   color: $color-black;
@@ -104,7 +104,7 @@ h4 {
 
 #notifications-button {
   @include icon(bell);
-  font-size: 1.5em;
+  font-size: 2em;
   cursor: pointer;
   list-style-type: none;
 }
@@ -131,13 +131,14 @@ h4 {
 
   img {
     margin-right: 0.5em;
-    width: 43px;
+    width: 48px;
-    height: 43px;
+    height: 48px;
     object-fit: cover;
     object-position: center;
     border-radius: 100%;
   }
 }
+*/
 
 .layer {
   position: absolute;