WIP

Signed-off-by: Grigorii K. Shartsev <[email protected]>

Author: ShGKme

src/talk/renderer/DesktopHeader.vue

@@ -22,14 +22,14 @@
 <template>
 	<header id="header" class="header">
 		<div class="header__inner">
-			<div v-if="!OS.isMac"
-				class="header__title-wrapper"
-				role="button"
-				tabindex="0"
-				@click="pushToRoot">
-				<span class="header__title">Nextcloud Talk</span>
-				<span class="header__preview-badge">Preview</span>
-			</div>
+			<!--			<div v-if="!OS.isMac"-->
+			<!--				class="header__title-wrapper"-->
+			<!--				role="button"-->
+			<!--				tabindex="0"-->
+			<!--				@click="pushToRoot">-->
+			<!--				<span class="header__title">Nextcloud Talk</span>-->
+			<!--				<span class="header__preview-badge">Preview</span>-->
+			<!--			</div>-->
 
 			<div class="spacer" />
 
@@ -86,13 +86,34 @@ export default {
 }
 </script>
 
+<style>
+:root {
+	--talk-desktop-menu: calc(100vw - (env(titlebar-area-width, 100vw) - 54px));
+}
+
+body:has(.app-sidebar[style='display: none;']) .top-bar {
+	padding-right: var(--talk-desktop-menu) !important;
+}
+
+.app-sidebar-header__desc {
+	padding-right: calc(50px + var(--talk-desktop-menu)) !important;
+}
+
+.app-sidebar__close {
+	right: calc(6px + var(--talk-desktop-menu)) !important;
+}
+</style>
+
 <style scoped>
 .header {
-	height: 50px;
+	height: 60px;
 	box-sizing: border-box;
-	margin-bottom: -50px;
+	/*margin-bottom: -50px;*/
 	color: #FFF;
-	user-select: none;
+	position: absolute;
+	top: 0;
+	right: calc(100vw - env(titlebar-area-width, 100vw));
+	z-index: 1000;
 }
 
 .header__inner {
@@ -102,7 +123,6 @@ export default {
 	height: 100%;
 	/* Save space for native title bar buttons */
 	margin-inline-start: env(titlebar-area-x, 0);
-	width: env(titlebar-area-width, 100%);
 }
 
 .header__item {
@@ -136,6 +156,6 @@ export default {
 	flex: 1 0 auto;
 	height: 100%;
 	/* Allow to drag the window using header */
-	app-region: drag;
+	/*app-region: drag;*/
 }
 </style>

src/talk/renderer/assets/overrides.css

@@ -25,8 +25,13 @@
 :root {
 	/* It is IMPORTANT to set "px" here, not just "0" */
 	--body-container-margin: 0px;
+	--body-height: 100%;
 }
 
 #content-vue {
 	border-radius: 0 !important;
 }
+
+.content {
+	margin-top: 0 !important;
+}

src/talk/talk.window.js

@@ -44,7 +44,7 @@ function createTalkWindow() {
 		titleBarOverlay: {
 			color: '#00669E00', // Transparent
 			symbolColor: '#FFFFFF', // White
-			height: 50,
+			height: 60,
 		},
 		// Position of the top left corner of the traffic light on Mac
 		trafficLightPosition: {