add navigation menu

src/app/ui/ui.module.scss

@@ -9,8 +9,24 @@
 	z-index: 100;
 }
 
-.nav-item {
+.nav-link {
+	display: flex;
+	align-items: center;
+	padding: 15px 30px;
+	color: rgba(255, 255, 255, 0.8);
+	text-decoration: none;
+	transition: all 0.3s;
+	border-radius: 0 25px 25px 0;
+	margin-right: 20px;
 	margin-bottom: 8px;
+	font-weight: 500;
+	text-transform: uppercase;
+
+	&:hover {
+		background: rgba(255, 255, 255, 0.15);
+		color: white;
+		transform: translateX(5px)
+	}
 
 	svg {
 		margin-right: 15px;
@@ -19,6 +35,40 @@
 	}
 }
 
+.sub-link {
+	padding: 12px 50px;
+	font-size: 14px;
+	border-radius: 0;
+	margin-right: 0;
+}
+
+.nav-dropdown {
+	.dropdown-arrow {
+		margin-left: auto;
+		transition: transform 0.3s;
+	}
+
+	&.expanded {
+		.dropdown-arrow {
+			transform: rotate(180deg);
+		}
+	}
+}
+
+.sub-menu.expanded {
+	max-height: 400px;
+}
+
+.sub-menu {
+	list-style: none;
+	max-height: 0;
+	overflow: hidden;
+	transition: max-height 0.3s ease;
+	background: rgba(255, 255, 255, 0.1);
+	margin-right: 20px;
+	border-radius: 0 15px 15px 0;
+}
+
 .logo {
 	display: flex;
 	align-items: center;