Merge pull request #13 from stslex/dev

CompileSdk, Drawer
stslex · Aug 15, 2023 · 281c313 · 281c313
2 parents ab40952 + 284d8bb
commit 281c313
Show file tree

Hide file tree

Showing 9 changed files with 212 additions and 92 deletions.
diff --git a/app/src/main/java/com/stslex/aproselection/ui/InitialApp.kt b/app/src/main/java/com/stslex/aproselection/ui/InitialApp.kt
@@ -1,12 +1,19 @@
 package com.stslex.aproselection.ui
 
+import androidx.activity.compose.BackHandler
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -17,23 +24,23 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavHostController
 import com.stslex.aproselection.core.navigation.destination.AppDestination
 import com.stslex.aproselection.core.navigation.ext.NavExt.isAuth
+import com.stslex.aproselection.core.ui.ext.noRippleClick
+import com.stslex.aproselection.core.ui.theme.AppDimens
 import com.stslex.aproselection.navigation.NavigationHost
 import com.stslex.aproselection.ui.components.AppToolbar
-import com.stslex.aproselection.ui.components.menu_icon.MenuIconState
+import com.stslex.aproselection.ui.components.menu_icon.AppDrawerState
 import org.koin.androidx.compose.koinViewModel
 
 @Composable
 fun InitialApp(
     navController: NavHostController
 ) {
-    val configuration = LocalConfiguration.current
-    val screenWidth = configuration.screenWidthDp.dp
-
     val viewModel: InitialAppViewModel = koinViewModel()
     val isInitialAuth by remember {
         viewModel.isInitialAuth
@@ -43,50 +50,111 @@ fun InitialApp(
         viewModel.init()
     }
 
-    var drawerState by remember {
-        mutableStateOf(MenuIconState.CLOSE)
-    }
-
     AppDestination
         .getStartDestination(isInitialAuth)
         ?.let { destination ->
-            Column(
+            AppContainer(
+                isAuth = navController.isAuth
+            ) {
+                NavigationHost(
+                    navController = navController,
+                    startDestination = destination
+                )
+            }
+        }
+}
+
+@Composable
+fun AppContainer(
+    isAuth: Boolean,
+    modifier: Modifier = Modifier,
+    content: @Composable BoxScope.() -> Unit
+) {
+    val configuration = LocalConfiguration.current
+    val screenWidth = configuration.screenWidthDp.dp
+
+    var drawerState by remember {
+        mutableStateOf(AppDrawerState.CLOSE)
+    }
+
+    val drawerSlide by animateDpAsState(
+        targetValue = when (drawerState) {
+            AppDrawerState.OPEN -> 0.dp
+            AppDrawerState.CLOSE -> -screenWidth * 0.3f
+        },
+        animationSpec = tween(900)
+    )
+
+    BackHandler(
+        enabled = drawerState == AppDrawerState.OPEN
+    ) {
+        drawerState = AppDrawerState.CLOSE
+    }
+
+    Box(
+        modifier = modifier
+            .fillMaxSize()
+            .background(MaterialTheme.colorScheme.background)
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .statusBarsPadding()
+                .padding(top = if (isAuth) AppDimens.Size.toolbar else 0.dp),
+            content = content
+        )
+
+        if (drawerState == AppDrawerState.OPEN) {
+            Box(
                 modifier = Modifier
                     .fillMaxSize()
-                    .background(MaterialTheme.colorScheme.background)
-            ) {
-                if (navController.isAuth.not()) {
-                    AppToolbar(
-                        onClick = { drawerState = it }
+                    .noRippleClick {
+                        drawerState = AppDrawerState.CLOSE
+                    }
+                    .background(
+                        MaterialTheme.colorScheme.surface.copy(alpha = 0.7f)
                     )
-                }
-                Box(
-                    modifier = Modifier.weight(1f)
-                ) {
-                    NavigationHost(
-                        navController = navController,
-                        startDestination = destination
+            )
+        }
+
+        Box(
+            modifier = Modifier
+                .fillMaxHeight()
+                .width(screenWidth * 0.3f)
+                .offset(x = drawerSlide)
+                .clip(
+                    RoundedCornerShape(
+                        topStart = 0.dp,
+                        bottomStart = 0.dp,
+                        topEnd = AppDimens.Corners.medium,
+                        bottomEnd = AppDimens.Corners.medium,
+                    )
+                )
+                .background(MaterialTheme.colorScheme.surfaceVariant)
+                .statusBarsPadding()
+                .noRippleClick()
+                .padding(
+                    top = AppDimens.Size.toolbar,
+                    start = AppDimens.Padding.medium,
+                )
+        ) {
+            Column {
+                for (index in 0..10) {
+                    Text(
+                        modifier = Modifier.padding(vertical = 4.dp),
+                        text = "item $index",
+                        style = MaterialTheme.typography.titleMedium,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant
                     )
-                    androidx.compose.animation.AnimatedVisibility(
-                        visible = drawerState == MenuIconState.OPEN
-                    ) {
-                        Box(
-                            modifier = Modifier
-                                .fillMaxHeight()
-                                .width(screenWidth * 0.3f)
-                                .background(MaterialTheme.colorScheme.surfaceVariant)
-                        ) {
-                            Column {
-                                for (index in 0..10) {
-                                    Text(
-                                        modifier = Modifier.padding(vertical = 4.dp),
-                                        text = "item $index"
-                                    )
-                                }
-                            }
-                        }
-                    }
                 }
             }
         }
+
+        if (isAuth) {
+            AppToolbar(
+                onClick = { drawerState = it },
+                drawerState = drawerState
+            )
+        }
+    }
 }
diff --git a/app/src/main/java/com/stslex/aproselection/ui/components/AppToolbar.kt b/app/src/main/java/com/stslex/aproselection/ui/components/AppToolbar.kt
@@ -2,32 +2,50 @@ package com.stslex.aproselection.ui.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 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.tooling.preview.Preview
+import com.stslex.aproselection.core.ui.theme.AppDimens
 import com.stslex.aproselection.core.ui.theme.AppTheme
+import com.stslex.aproselection.ui.components.menu_icon.AppDrawerState
 import com.stslex.aproselection.ui.components.menu_icon.MenuIcon
-import com.stslex.aproselection.ui.components.menu_icon.MenuIconState
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AppToolbar(
-    onClick: (MenuIconState) -> Unit,
+    drawerState: AppDrawerState,
+    onClick: (AppDrawerState) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    TopAppBar(
-        modifier = modifier,
-        title = {
-            Text(text = "title")
-        },
-        navigationIcon = {
-            MenuIcon(onClick = onClick)
-        }
-    )
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(Color.Transparent)
+            .statusBarsPadding()
+            .height(AppDimens.Size.toolbar)
+    ) {
+        Text(
+            modifier = Modifier.align(Alignment.Center),
+            text = "title",
+            style = MaterialTheme.typography.headlineMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+        MenuIcon(
+            modifier = Modifier
+                .padding(AppDimens.Padding.medium)
+                .align(Alignment.CenterStart),
+            onClick = onClick,
+            drawerState = drawerState,
+            containerColorOpen = Color.Transparent
+        )
+    }
 }
 
 @Composable
@@ -37,7 +55,10 @@ fun AppToolbarPreviewLight() {
         Box(
             modifier = Modifier.background(MaterialTheme.colorScheme.background)
         ) {
-            AppToolbar(onClick = {})
+            AppToolbar(
+                onClick = {},
+                drawerState = AppDrawerState.OPEN
+            )
         }
     }
 }
@@ -49,7 +70,10 @@ fun AppToolbarPreviewDark() {
         Box(
             modifier = Modifier.background(MaterialTheme.colorScheme.background)
         ) {
-            AppToolbar(onClick = {})
+            AppToolbar(
+                onClick = {},
+                drawerState = AppDrawerState.OPEN
+            )
         }
     }
 }
diff --git a/.../ui/components/menu_icon/MenuIconState.kt → ...ui/components/menu_icon/AppDrawerState.kt b/.../ui/components/menu_icon/MenuIconState.kt → ...ui/components/menu_icon/AppDrawerState.kt
@@ -1,9 +1,9 @@
 package com.stslex.aproselection.ui.components.menu_icon
 
-enum class MenuIconState {
+enum class AppDrawerState {
     OPEN, CLOSE;
 
-    fun inverse(): MenuIconState = when (this) {
+    fun inverse(): AppDrawerState = when (this) {
         OPEN -> CLOSE
         CLOSE -> OPEN
     }