settings preimlplementation

tvlib/src/main/kotlin/org/mjdev/tvlib/ui/components/navigation/ModalNavigationDrawer.kt

@@ -31,15 +31,19 @@ import androidx.tv.material3.DrawerValue
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.rememberDrawerState
 import org.mjdev.tvlib.annotations.TvPreview
+import org.mjdev.tvlib.extensions.ComposeExt.isEditMode
 
 @ExperimentalTvMaterial3Api
 @TvPreview
 @Composable
 fun ModalNavigationDrawer(
     modifier: Modifier = Modifier,
-    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
+    drawerState: DrawerState = rememberDrawerState(
+        if (isEditMode()) DrawerValue.Open else DrawerValue.Closed
+    ),
     scrimColor: Color = Color.Black.copy(alpha = 0.5f),
-    closeDrawerWidth: Dp = 80.dp,
+    closeDrawerWidth: Dp = 200.dp,
+    contentAlignment: Alignment = Alignment.TopStart,
     drawerContent: @Composable (DrawerValue) -> Unit = {
         Box(
             modifier = Modifier
@@ -52,20 +56,21 @@ fun ModalNavigationDrawer(
 ) {
     val localDensity = LocalDensity.current
     val closedDrawerWidth: MutableState<Dp?> = remember { mutableStateOf(null) }
-    val internalDrawerModifier =
-        Modifier
-            .zIndex(Float.MAX_VALUE)
-            .onSizeChanged {
-                if (closedDrawerWidth.value == null &&
-                    drawerState.currentValue == DrawerValue.Closed
-                ) {
-                    with(localDensity) {
-                        closedDrawerWidth.value = it.width.toDp()
-                    }
+    val internalDrawerModifier = Modifier
+        .zIndex(Float.MAX_VALUE)
+        .onSizeChanged {
+            if (closedDrawerWidth.value == null &&
+                drawerState.currentValue == DrawerValue.Closed
+            ) {
+                with(localDensity) {
+                    closedDrawerWidth.value = it.width.toDp()
                 }
             }
-
-    Box(modifier = modifier) {
+        }
+    Box(
+        modifier = modifier,
+        contentAlignment = contentAlignment
+    ) {
         DrawerSheet(
             modifier = internalDrawerModifier.align(Alignment.CenterStart),
             drawerState = drawerState,
@@ -79,12 +84,24 @@ fun ModalNavigationDrawer(
             content = drawerContent
         )
         Box(
-            modifier = Modifier.padding(
-                closedDrawerWidth.value ?: closeDrawerWidth,
-                0.dp,
-                0.dp,
-                0.dp
-            )
+            modifier = when (contentAlignment) {
+                Alignment.TopStart -> Modifier.padding(
+                    closedDrawerWidth.value ?: closeDrawerWidth,
+                    0.dp,
+                    0.dp,
+                    0.dp
+                )
+
+                Alignment.TopEnd -> Modifier.padding(
+                    0.dp,
+                    0.dp,
+                    closedDrawerWidth.value ?: closeDrawerWidth,
+                    0.dp
+                )
+
+                else -> Modifier.padding(0.dp)
+            },
+            contentAlignment = contentAlignment
         ) {
             content()
             if (drawerState.currentValue == DrawerValue.Open) {

tvlib/src/main/kotlin/org/mjdev/tvlib/ui/components/navigation/Navigation.kt

@@ -71,37 +71,41 @@ fun Navigation(
             .fillMaxSize()
             .recomposeHighlighter()
     ) {
-        if (navController.isMenuEnabled) {
-            val drawerContent: @Composable (DrawerValue) -> Unit = { state ->
-                NavDrawerContent(
-                    backgroundColor = backgroundColor,
-                    navController = navController,
-                )
-                navController.menuDrawerState.setValue(state)
-            }
-            if (modal) {
-                ModalNavigationDrawer(
-                    modifier = modifier
-                        .fillMaxHeight()
-                        .background(backgroundColor, shape)
-                        .border(borderSize, borderColor, shape),
-                    drawerState = navController.menuDrawerState,
-                    content = mainContent,
-                    drawerContent = drawerContent,
-                )
+        SettingsDrawer(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            if (navController.isMenuEnabled) {
+                val drawerContent: @Composable (DrawerValue) -> Unit = { state ->
+                    NavDrawerContent(
+                        backgroundColor = backgroundColor,
+                        navController = navController,
+                    )
+                    navController.menuDrawerState.setValue(state)
+                }
+                if (modal) {
+                    ModalNavigationDrawer(
+                        modifier = modifier
+                            .fillMaxHeight()
+                            .background(backgroundColor, shape)
+                            .border(borderSize, borderColor, shape),
+                        drawerState = navController.menuDrawerState,
+                        content = mainContent,
+                        drawerContent = drawerContent,
+                    )
+                } else {
+                    NavigationDrawer(
+                        modifier = modifier
+                            .fillMaxHeight()
+                            .background(backgroundColor, shape)
+                            .border(borderSize, borderColor, shape),
+                        drawerState = navController.menuDrawerState,
+                        content = mainContent,
+                        drawerContent = drawerContent
+                    )
+                }
             } else {
-                NavigationDrawer(
-                    modifier = modifier
-                        .fillMaxHeight()
-                        .background(backgroundColor, shape)
-                        .border(borderSize, borderColor, shape),
-                    drawerState = navController.menuDrawerState,
-                    content = mainContent,
-                    drawerContent = drawerContent
-                )
+                mainContent()
             }
-        } else {
-            mainContent()
         }
     }
 }

tvlib/src/main/kotlin/org/mjdev/tvlib/ui/components/navigation/NavigationDrawer.kt

@@ -14,6 +14,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
@@ -33,6 +34,7 @@ fun NavigationDrawer(
     drawerState: DrawerState = rememberDrawerState(
         if (isEditMode()) DrawerValue.Open else DrawerValue.Closed
     ),
+    contentAlignment: Alignment = Alignment.TopStart,
     drawerContent: @Composable (DrawerValue) -> Unit = {
         Box(
             modifier = Modifier

tvlib/src/main/kotlin/org/mjdev/tvlib/ui/components/navigation/SettingsDrawer.kt

@@ -0,0 +1,60 @@
+/*
+ *  Copyright (c) Milan Jurkulák 2023.
+ *  Contact:
+ *  e: mimoccc@gmail.com
+ *  e: mj@mjdev.org
+ *  w: https://mjdev.org
+ */
+
+package org.mjdev.tvlib.ui.components.navigation
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.tv.material3.DrawerState
+import androidx.tv.material3.DrawerValue
+import androidx.tv.material3.ExperimentalTvMaterial3Api
+import androidx.tv.material3.rememberDrawerState
+import org.mjdev.tvlib.annotations.TvPreview
+import org.mjdev.tvlib.extensions.ComposeExt
+
+@OptIn(ExperimentalTvMaterial3Api::class)
+@TvPreview
+@Composable
+fun SettingsDrawer(
+    modifier: Modifier = Modifier,
+    backgroundColor: Color = Color(0xff202020),
+    roundCornerSize: Dp = 16.dp,
+    borderSize: Dp = 0.dp,
+    borderColor: Color = Color.Transparent,
+    shape: Shape = RoundedCornerShape(roundCornerSize),
+    drawerState: DrawerState = rememberDrawerState(
+        if (ComposeExt.isEditMode()) DrawerValue.Open else DrawerValue.Closed
+    ),
+    content: @Composable () -> Unit = {
+        Box(modifier = Modifier.fillMaxSize())
+    },
+) {
+    ModalNavigationDrawer(
+        contentAlignment = Alignment.TopEnd,
+        drawerState = drawerState,
+        drawerContent = {
+            SettingsDrawerContent(
+                backgroundColor = backgroundColor,
+                roundCornerSize = roundCornerSize,
+                borderSize = borderSize,
+                borderColor = borderColor,
+                shape = shape
+            )
+        }
+    ) {
+        content()
+    }
+}

tvlib/src/main/kotlin/org/mjdev/tvlib/ui/components/navigation/SettingsDrawerContent.kt

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) Milan Jurkulák 2023.
+ *  Contact:
+ *  e: mimoccc@gmail.com
+ *  e: mj@mjdev.org
+ *  w: https://mjdev.org
+ */
+
+package org.mjdev.tvlib.ui.components.navigation
+
+import android.annotation.SuppressLint
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import org.mjdev.tvlib.extensions.ComposeExt.isEditMode
+import org.mjdev.tvlib.extensions.ModifierExt.conditional
+import org.mjdev.tvlib.extensions.ModifierExt.recomposeHighlighter
+
+@Suppress("UNUSED_ANONYMOUS_PARAMETER")
+@SuppressLint("AutoboxingStateValueProperty")
+@Preview
+@Composable
+fun SettingsDrawerContent(
+    backgroundColor: Color = Color(0xff202020),
+    roundCornerSize: Dp = 16.dp,
+    borderSize: Dp = 0.dp,
+    borderColor: Color = Color.Transparent,
+    shape: Shape = RoundedCornerShape(roundCornerSize),
+    onDrawerItemClick: (id: Int) -> Unit = { id -> },
+    onDrawerItemFocus: (id: Int) -> Unit = { id -> },
+) {
+    Column(
+        modifier = Modifier
+            .recomposeHighlighter()
+            .fillMaxHeight()
+            .conditional(isEditMode()) {
+                width(200.dp)
+            }
+            .background(backgroundColor, shape)
+            .border(borderSize, borderColor),
+        verticalArrangement = Arrangement.Top,
+        horizontalAlignment = Alignment.Start,
+    ) {
+        // todo
+    }
+}