port good changes from wiki

FrozenBlock · Feb 23, 2024 · 39eeaed · 39eeaed
1 parent 4266810
commit 39eeaed
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git a/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/NavHeader.kt b/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/NavHeader.kt
@@ -3,41 +3,32 @@
 package net.frozenblock.net.components.sections
 
 import androidx.compose.runtime.*
-import com.varabyte.kobweb.compose.css.functions.clamp
 import com.varabyte.kobweb.browser.dom.ElementTarget
-import com.varabyte.kobweb.compose.foundation.layout.Column
 import com.varabyte.kobweb.compose.foundation.layout.Row
 import com.varabyte.kobweb.compose.foundation.layout.Spacer
 import com.varabyte.kobweb.compose.ui.Alignment
 import com.varabyte.kobweb.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.graphics.Colors
 import com.varabyte.kobweb.compose.ui.modifiers.*
-import com.varabyte.kobweb.silk.components.animation.Keyframes
-import com.varabyte.kobweb.silk.components.animation.toAnimation
 import com.varabyte.kobweb.silk.components.graphics.Image
-import com.varabyte.kobweb.silk.components.icons.CloseIcon
-import com.varabyte.kobweb.silk.components.icons.HamburgerIcon
 import com.varabyte.kobweb.silk.components.icons.MoonIcon
 import com.varabyte.kobweb.silk.components.icons.SunIcon
 import com.varabyte.kobweb.silk.components.layout.breakpoint.displayIfAtLeast
 import com.varabyte.kobweb.silk.components.layout.breakpoint.displayUntil
 import com.varabyte.kobweb.silk.components.navigation.Link
 import com.varabyte.kobweb.silk.components.navigation.UncoloredLinkVariant
 import com.varabyte.kobweb.silk.components.navigation.UndecoratedLinkVariant
-import com.varabyte.kobweb.silk.components.overlay.Overlay
-import com.varabyte.kobweb.silk.components.overlay.OverlayVars
 import com.varabyte.kobweb.silk.components.overlay.PopupPlacement
 import com.varabyte.kobweb.silk.components.overlay.Tooltip
 import com.varabyte.kobweb.silk.components.style.ComponentStyle
 import com.varabyte.kobweb.silk.components.style.base
 import com.varabyte.kobweb.silk.components.style.breakpoint.Breakpoint
 import com.varabyte.kobweb.silk.components.style.toModifier
 import com.varabyte.kobweb.silk.theme.colors.ColorMode
+import net.frozenblock.net.components.widgets.HamburgerButton
 import org.jetbrains.compose.web.css.*
 import net.frozenblock.net.components.widgets.IconButton
 import net.frozenblock.net.components.widgets.SideMenu
 import net.frozenblock.net.components.widgets.SideMenuState
-import net.frozenblock.net.toSitePalette
 
 val NavHeaderStyle by ComponentStyle.base {
     Modifier.fillMaxWidth().padding(1.cssRem)
@@ -64,13 +55,6 @@ private fun ColorModeButton() {
     Tooltip(ElementTarget.PreviousSibling, "Toggle color mode", placement = PopupPlacement.BottomRight)
 }
 
-@Composable
-private fun HamburgerButton(onClick: () -> Unit) {
-    IconButton(onClick) {
-        HamburgerIcon()
-    }
-}
-
 @Composable
 fun NavHeader() {
     Row(NavHeaderStyle.toModifier(), verticalAlignment = Alignment.CenterVertically) {

diff --git a/site/src/jsMain/kotlin/net/frozenblock/net/components/widgets/IconButton.kt b/site/src/jsMain/kotlin/net/frozenblock/net/components/widgets/IconButton.kt
@@ -7,6 +7,7 @@ import com.varabyte.kobweb.compose.ui.Modifier
 import com.varabyte.kobweb.compose.ui.modifiers.setVariable
 import com.varabyte.kobweb.silk.components.forms.Button
 import com.varabyte.kobweb.silk.components.forms.ButtonVars
+import com.varabyte.kobweb.silk.components.icons.HamburgerIcon
 import net.frozenblock.net.CircleButtonVariant
 import net.frozenblock.net.UncoloredButtonVariant
 import org.jetbrains.compose.web.css.em
@@ -20,4 +21,11 @@ fun IconButton(onClick: () -> Unit, content: @Composable () -> Unit) {
     ) {
         content()
     }
+}
+
+@Composable
+fun HamburgerButton(onClick: () -> Unit) {
+    IconButton(onClick) {
+        HamburgerIcon()
+    }
 }
diff --git a/site/src/jsMain/kotlin/net/frozenblock/net/components/widgets/SideMenu.kt b/site/src/jsMain/kotlin/net/frozenblock/net/components/widgets/SideMenu.kt
@@ -37,6 +37,11 @@ fun CloseButton(onClick: () -> Unit) {
     }
 }
 
+enum class Side {
+    LEFT,
+    RIGHT
+}
+
 // Note: When the user closes the side menu, we don't immediately stop rendering it (at which point it would disappear
 // abruptly). Instead, we start animating it out and only stop rendering it when the animation is complete.
 enum class SideMenuState {
@@ -53,6 +58,8 @@ enum class SideMenuState {
 @Composable
 fun SideMenu(
     menuState: SideMenuState = SideMenuState.OPEN,
+    side: Side = Side.RIGHT,
+    closeable: Boolean = true,
     close: () -> Unit = {},
     onAnimationEnd: () -> Unit = {},
     content: @Composable ColumnScope.() -> Unit
@@ -67,7 +74,12 @@ fun SideMenu(
                 Modifier
                     .fillMaxHeight()
                     .width(clamp(8.cssRem, 33.percent, 10.cssRem))
-                    .align(Alignment.CenterEnd)
+                    .align(
+                        when (side) {
+                            Side.LEFT -> Alignment.CenterStart
+                            Side.RIGHT -> Alignment.CenterEnd
+                        }
+                    )
                     // Close button will appear roughly over the hamburger button, so the user can close
                     // things without moving their finger / cursor much.
                     .padding(top = 1.cssRem, leftRight = 1.cssRem)
@@ -84,9 +96,12 @@ fun SideMenu(
                     .borderRadius(topLeft = 2.cssRem)
                     .onClick { it.stopPropagation() }
                     .onAnimationEnd { onAnimationEnd() },
-                horizontalAlignment = Alignment.End
+                horizontalAlignment = when (side) {
+                    Side.LEFT -> Alignment.Start
+                    Side.RIGHT -> Alignment.End
+                }
             ) {
-                CloseButton(onClick = { close() })
+                if (closeable) CloseButton(onClick = { close() })
                 Column(Modifier.padding(right = 0.75.cssRem).gap(1.5.cssRem).fontSize(1.4.cssRem), horizontalAlignment = Alignment.End, content = content)
             }
         }