style(navigation): implement basic navigation bar

src/app/core/components/navigation-bar/navigation-bar.scss

@@ -0,0 +1,41 @@
+nav {
+    .options > div {
+        display: grid;
+        place-items: center;
+        cursor: pointer;
+        border-radius: 50%;
+        border: 1px solid transparent;
+        transition: border .5s ease;
+
+        &:hover {
+            border-color: var(--surface-100);
+        }
+
+        &:active {
+            border-color: var(--surface-500);
+        }
+    }
+}
+
+.blur {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 120px;
+    pointer-events: none;
+}
+
+.blur1 {
+    z-index: 10;
+    backdrop-filter: blur(3px);
+    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
+    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
+}
+
+.blur2 {
+    z-index: 20;
+    backdrop-filter: blur(5px);
+    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
+    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
+}