Header improvements

• close the submenu on mobile devices if a link is clicked • replaced deprecated deferRender function ⇝ Deferred
Luki120 · Sep 17, 2024 · 6f11b73 · 6f11b73
1 parent e2528e8
commit 6f11b73
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/site/src/jsMain/kotlin/me/luki/website/composables/Header.kt b/site/src/jsMain/kotlin/me/luki/website/composables/Header.kt
@@ -24,7 +24,7 @@ import com.varabyte.kobweb.silk.components.navigation.UncoloredLinkVariant
 import com.varabyte.kobweb.silk.components.navigation.UndecoratedLinkVariant
 import com.varabyte.kobweb.silk.components.overlay.*
 import com.varabyte.kobweb.silk.components.text.SpanText
-import com.varabyte.kobweb.silk.defer.deferRender
+import com.varabyte.kobweb.silk.defer.Deferred
 import com.varabyte.kobweb.silk.style.animation.Keyframes
 import com.varabyte.kobweb.silk.style.animation.toAnimation
 import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint
@@ -60,7 +60,7 @@ private enum class SideMenuState {
 
 @Composable
 fun Header() {
-    deferRender {
+    Deferred {
         Row(
             TranslucentNavBarStyle.toModifier()
                 .displayIfAtLeast(Breakpoint.MD)
@@ -137,27 +137,27 @@ private fun SideMenu(menuState: SideMenuState, close: () -> Unit, onAnimationEnd
                         .textAlign(TextAlign.Center),
                     horizontalAlignment = Alignment.End
                 ) {
-                    MenuItems()
+                    MenuItems(onLinkClick = { close() })
                 }
             }
         }
     }
 }
 
 @Composable
-private fun MenuItems() {
-    MenuLink(path = "#experience", text = "Experience")
-    MenuLink(path = "#projects", text = "Projects")
+private fun MenuItems(onLinkClick: () -> Unit = {}) {
+    MenuLink(path = "#experience", text = "Experience", onClick = onLinkClick)
+    MenuLink(path = "#projects", text = "Projects", onClick = onLinkClick)
 }
 
 @Composable
-private fun MenuLink(path: String, text: String) {
+private fun MenuLink(path: String, text: String, onClick: () -> Unit) {
     val breakpoint = rememberBreakpoint()
 
     Link(
         path = path,
         text = text,
-        modifier = LinkStyle.toModifier(),
+        modifier = LinkStyle.toModifier().onClick { onClick() },
         variant = if (breakpoint == Breakpoint.ZERO) UndecoratedLinkVariant.then(UncoloredLinkVariant) else UndecoratedLinkVariant
     )
 }