many new

src/pages/Navbar/Navbar.sass

@@ -0,0 +1,93 @@
+$hoverColor: #f22
+
+.Minimized
+  height: 3rem
+
+.Expanded
+  min-height: 3rem
+
+  &__Links
+    position: relative
+    width: 100%
+
+.Header
+  color: var(--main-color)
+  background-color: var(--nav-bg-color)
+  display: flex
+  justify-content: space-between
+  align-items: flex-start
+  flex-wrap: wrap
+
+  &__Links, &__User
+    min-height: 3rem
+    display: flex
+    flex-wrap: wrap
+
+  &_Button
+    font-size: 1rem
+    padding: .5rem
+    color: var(--main-color)
+    background-color: var(--nav-bg-color)
+    border: none
+    display: flex
+    justify-content: center
+    align-items: center
+    cursor: pointer
+    position: relative
+
+    &::before
+      content: ""
+      width: 100%
+      position: absolute
+      bottom: 0
+      left: 0
+      height: 0
+      background: $hoverColor
+      transition: heigth .1s ease-in
+      -webkit-transition: height .1s ease-in
+
+    &:hover
+      background-color: var(--main-bg-color)
+
+      &::before
+        height: 5px
+
+  &__User
+    justify-content: flex-end
+
+    &_Profile
+      display: flex
+      align-items: center
+      font-size: 1rem
+      height: 3rem
+      color: var(--main-color)
+      background-color: var(--nav-bg-color)
+      border: none
+      border-radius: 0
+      padding: 0 .5rem
+      position: relative
+
+      &::before
+        content: ""
+        width: 100%
+        position: absolute
+        bottom: 0
+        left: 0
+        height: 0
+        background: $hoverColor
+        transition: heigth .1s linear
+        -webkit-transition: height .1s linear
+
+      &:hover
+        background-color: var(--main-bg-color)
+
+        &::before
+          height: 5px
+
+    &_Avatar
+      background-size: cover
+      background-position: center
+      width: 40px
+      height: 40px
+      border-radius: 50%
+      margin-right: .2rem