Fixed buttons.

app/src/main/java/com/bbc/denadrive/home/DebugScreens.kt

@@ -1,5 +1,6 @@
 package com.bbc.denadrive.home
 
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.background
 import androidx.compose.material3.Button
 import androidx.compose.material3.Text
@@ -17,6 +18,7 @@ import androidx.navigation.NavHostController
 //import androidx.compose.ui.unit.sp
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Menu
@@ -25,7 +27,9 @@ import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import kotlinx.coroutines.launch
@@ -63,13 +67,13 @@ fun ScaffoldWithSidebar() {
                 modifier = Modifier
                     .fillMaxHeight()
                     .fillMaxWidth(0.67f)
-                    .background(Color.Red)
+                    .background(Color.White)
             ) {
-                Text("Item 1", modifier = Modifier.clickable { /* Handle click */ })
-                Spacer(modifier = Modifier.height(8.dp))
-                Text("Item 2", modifier = Modifier.clickable { /* Handle click */ })
-                Spacer(modifier = Modifier.height(8.dp))
-                Text("Item 3", modifier = Modifier.clickable { /* Handle click */ })
+                RectangularButton(backgroundColor = Color.White, text = "Text 1") {  }
+                Spacer(modifier = Modifier.height(10.dp))
+                RectangularButton(backgroundColor = Color.White, text = "Text 2") {  }
+                Spacer(modifier = Modifier.height(10.dp))
+                RectangularButton(backgroundColor = Color.White, text = "Text 3") {  }
             }
         },
         content = {
@@ -112,6 +116,40 @@ fun ScaffoldWithSidebar() {
     )
 }
 
+@Composable
+fun RectangularButton(
+    backgroundColor: Color,
+    text: String,
+    onClick: () -> Unit
+) {
+    var isPressed by remember { mutableStateOf(false) }
+    val scale by animateFloatAsState(if (isPressed) 0.8f else 1f)
+
+    Box(
+        modifier = Modifier
+            .padding(8.dp)
+            .fillMaxWidth()
+            .height(48.dp) // Set the height of the button
+            .background(color = backgroundColor) // Set the background color
+            .scale(scale) // Apply the scale effect
+            .pointerInput(Unit) {
+                // Detect press and release gestures
+                detectTapGestures(
+                    onPress = {
+                        isPressed = true
+                        // Wait for the click to be released
+                        tryAwaitRelease()
+                        isPressed = false
+                    },
+                    onTap = { onClick() } // Call the onClick action
+                )
+            },
+        contentAlignment = Alignment.Center // Center the text
+    ) {
+        Text(text = text, style = MaterialTheme.typography.bodyLarge) // Button text
+    }
+}
+
 @Composable
 fun MyApp() {
     ScaffoldWithSidebar()