roboncode/vue-chat-layout.html

## vue-chat-layout.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test</title>
    <script src="https://unpkg.com/vue@next"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
  </head>
  <body>
    <div id="app">
      <div class="appbar">
        <button @click="showToolbar = !showToolbar">Toggle Toolbar {{showToolbar}}</button>
      </div>
      <div class="messenger-container">
        <div class="messenger-content">
          <div v-for="i in 100" :key="i">Item {{i}}</div>
        </div>
        <div v-if="showToolbar" class="messenger-toolbar"></div>
      </div>
    </div>

    <style>
      :root {
        --hex-appbar-height: 48px;
      }

      .appbar {
        height: var(--hex-appbar-height);
        background-color: grey;
      }
      .messenger-container {
        position: absolute;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: calc(100% - var(--hex-appbar-height));
        background-color: yellow;
      }

      .messenger-content {
        flex: 1;
        background-color: hotpink;
        overflow-y: auto;
      }

      .messenger-toolbar {
        background-color: greenyellow;
        height: 80px;
      }
    </style>

    <script>
      const app = Vue.createApp({
        setup() {
          const showToolbar = Vue.ref(true)
          return {
            showToolbar,
          }
        },
      })
      app.mount('#app')
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Test</title>
	<script src="https://unpkg.com/vue@next"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
	</head>
	<body>
	<div id="app">
	<div class="appbar">
	<button @click="showToolbar = !showToolbar">Toggle Toolbar {{showToolbar}}</button>
	</div>
	<div class="messenger-container">
	<div class="messenger-content">
	<div v-for="i in 100" :key="i">Item {{i}}</div>
	</div>
	<div v-if="showToolbar" class="messenger-toolbar"></div>
	</div>
	</div>

	<style>
	:root {
	--hex-appbar-height: 48px;
	}

	.appbar {
	height: var(--hex-appbar-height);
	background-color: grey;
	}
	.messenger-container {
	position: absolute;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: calc(100% - var(--hex-appbar-height));
	background-color: yellow;
	}

	.messenger-content {
	flex: 1;
	background-color: hotpink;
	overflow-y: auto;
	}

	.messenger-toolbar {
	background-color: greenyellow;
	height: 80px;
	}
	</style>

	<script>
	const app = Vue.createApp({
	setup() {
	const showToolbar = Vue.ref(true)
	return {
	showToolbar,
	}
	},
	})
	app.mount('#app')
	</script>
	</body>
	</html>