Update header left and right to start and end

Signed-off-by: Mostafa Ahangarha <ahangarha@riseup.net>

Author: ahangarha

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);
 		}

core/css/mobile.scss

@@ -132,15 +132,15 @@
 }
 
 @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 {
 			display: none !important;
 		}
 	}
 	/* Arrow directly child of menutoggle */
-	#header .header-right > div {
+	#header .header-end > div {
 		&.openedMenu {
 			&::after {
 				display: block;

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);

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

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

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) {

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>