From 655d89b477bd302b87d77274a636cf2ca061f7da Mon Sep 17 00:00:00 2001
From: Mostafa Ahangarha <ahangarha@riseup.net>
Date: Sun, 24 Dec 2023 20:03:37 +0330
Subject: [PATCH] Update header left and right to start and end

Signed-off-by: Mostafa Ahangarha <ahangarha@riseup.net>
---
 core/css/header.scss             | 14 +++++++-------
 core/css/mobile.scss             |  4 ++--
 core/css/public.scss             |  2 +-
 core/js/public/publicpage.js     |  4 ++--
 core/src/components/MainMenu.js  |  2 +-
 core/templates/layout.public.php |  4 ++--
 core/templates/layout.user.php   |  6 +++---
 7 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/core/css/header.scss b/core/css/header.scss
index fb08dda78e5dd..a81e9785dba1a 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -31,7 +31,7 @@
 		bottom: 2px;
 	}
 
-	.header-right {
+	.header-end {
 		// Add some spacing so the last entry looks ok
 		margin-inline-end: calc(3 * var(--default-grid-baseline));
 
@@ -88,7 +88,7 @@
 	/* Header menu */
 	$header-menu-entry-height: 44px;
 
-	.header-right > div > .menu {
+	.header-end > div > .menu {
 		background-color: var(--color-main-background);
 		filter: drop-shadow(0 1px 5px var(--color-box-shadow));
 		border-radius: var(--border-radius-large);
@@ -146,25 +146,25 @@
 		flex-shrink: 0;
 	}
 
-	#header-left, .header-left,
-	#header-right, .header-right {
+	#header-start, .header-start,
+	#header-end, .header-end {
 		display: inline-flex;
 		align-items: center;
 	}
 
-	#header-left, .header-left {
+	#header-start, .header-start {
 		flex: 1 0;
 		white-space: nowrap;
 		min-width: 0;
 	}
 
-	#header-right, .header-right {
+	#header-end, .header-end {
 		justify-content: flex-end;
 		flex-shrink: 1;
 	}
 
 	/* Right header standard */
-	.header-right {
+	.header-end {
 		> .header-menu__trigger img {
 			filter: var(--background-image-invert-if-bright);
 		}
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index 2b6514d093016..363aa63697d9d 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -132,7 +132,7 @@
 }
 
 @media only screen and (max-width: 480px) {
-	#header .header-right > div > .menu {
+	#header .header-end > div > .menu {
 		max-width: calc(100vw - 10px);
 		position: fixed;
 		&::after {
@@ -140,7 +140,7 @@
 		}
 	}
 	/* Arrow directly child of menutoggle */
-	#header .header-right > div {
+	#header .header-end > div {
 		&.openedMenu {
 			&::after {
 				display: block;
diff --git a/core/css/public.scss b/core/css/public.scss
index 98a24d12fe1e2..79f406b44d5d9 100644
--- a/core/css/public.scss
+++ b/core/css/public.scss
@@ -14,7 +14,7 @@
 		--footer-height: calc(3 * var(--default-line-height) + 3 * var(--default-grid-baseline));
 	}
 
-	.header-right {
+	.header-end {
 
 		#header-primary-action a {
 			color: var(--color-primary-element-text);
diff --git a/core/js/public/publicpage.js b/core/js/public/publicpage.js
index 340fb56d9f101..b17eac181b1cd 100644
--- a/core/js/public/publicpage.js
+++ b/core/js/public/publicpage.js
@@ -5,7 +5,7 @@
 
 window.addEventListener('DOMContentLoaded', function () {
 
-	$('#body-public').find('.header-right .menutoggle').click(function() {
+	$('#body-public').find('.header-end .menutoggle').click(function() {
 		$(this).next('.popovermenu').toggleClass('open');
 	});
 
@@ -15,7 +15,7 @@ window.addEventListener('DOMContentLoaded', function () {
 	});
 
 	$(document).mouseup(function(e) {
-		var toggle = $('#body-public').find('.header-right .menutoggle');
+		var toggle = $('#body-public').find('.header-end .menutoggle');
 		var container = toggle.next('.popovermenu');
 
 		// if the target of the click isn't the menu toggle, nor a descendant of the
diff --git a/core/src/components/MainMenu.js b/core/src/components/MainMenu.js
index 0799a6eabc4e3..21a0b6a772f90 100644
--- a/core/src/components/MainMenu.js
+++ b/core/src/components/MainMenu.js
@@ -17,7 +17,7 @@ export const setUp = () => {
 		},
 	})
 
-	const container = document.getElementById('header-left__appmenu')
+	const container = document.getElementById('header-start__appmenu')
 	if (!container) {
 		// no container, possibly we're on a public page
 		return
diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php
index 90aefe0b8a8d8..5594a4918842c 100644
--- a/core/templates/layout.public.php
+++ b/core/templates/layout.public.php
@@ -42,7 +42,7 @@
 	</div>
 
 	<header id="header">
-		<div class="header-left">
+		<div class="header-start">
 			<div id="nextcloud" class="header-appname">
 				<?php if ($_['logoUrl']): ?>
 					<a href="<?php print_unescaped($_['logoUrl']); ?>"
@@ -70,7 +70,7 @@
 			</div>
 		</div>
 
-		<div class="header-right">
+		<div class="header-end">
 		<?php
 /** @var \OCP\AppFramework\Http\Template\PublicTemplateResponse $template */
 if (isset($template) && $template->getActionCount() !== 0) {
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 3293fc0acd706..ed0bd28b4db98 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -61,17 +61,17 @@
 		</div>
 
 		<header id="header">
-			<div class="header-left">
+			<div class="header-start">
 				<a href="<?php print_unescaped($_['logoUrl'] ?: link_to('', 'index.php')); ?>"
 					aria-label="<?php p($l->t('Go to %s', [$_['logoUrl'] ?: $_['defaultAppName']])); ?>"
 					id="nextcloud">
 					<div class="logo logo-icon"></div>
 				</a>
 
-				<nav id="header-left__appmenu"></nav>
+				<nav id="header-start__appmenu"></nav>
 			</div>
 
-			<div class="header-right">
+			<div class="header-end">
 				<div id="unified-search"></div>
 				<div id="notifications"></div>
 				<div id="contactsmenu"></div>