BC-7282 - Adjust Sidebar Toggle Button Placement (#3267)

* adding new logo to topbar

* show expand menu and logo dependend on sidebar status

* move colors to base options file

* fix opacity on user menu

* fixing user initials button size

* adjust a11y property

---------

Co-authored-by: odalys-dataport <82401838+odalys-dataport@users.noreply.github.com>

src/locales/de.ts

@@ -751,6 +751,7 @@ export default {
 	"format.dateUTC": "JJJJ-MM-DD",
 	"format.dateYY": "DD.MM.YY",
 	"format.time": "HH:mm",
+	"global.cloudLogo": "Logo",
 	"global.sidebar.item.accessibility": "Barrierefreiheit",
 	"global.sidebar.item.addons": "Add-ons",
 	"global.sidebar.item.calendar": "Termine",
@@ -769,7 +770,6 @@ export default {
 	"global.sidebar.item.tasks": "Aufgaben",
 	"global.sidebar.item.teacher": "Lehrkräfte",
 	"global.sidebar.item.teams": "Teams",
-	"global.sidebar.logo": "Logo",
 	"global.skipLink.mainContent": "Zum Hauptinhalt wechseln",
 	"global.topbar.actions.alerts": "Status-Warnung",
 	"global.topbar.actions.contactSupport": "Kontakt",

src/locales/en.ts

@@ -749,6 +749,7 @@ export default {
 	"format.dateUTC": "YYYY-MM-DD",
 	"format.dateYY": "MM/DD/YY",
 	"format.time": "HH:mm",
+	"global.cloudLogo": "Logo",
 	"global.sidebar.item.accessibility": "Accessibility",
 	"global.sidebar.item.addons": "Add-ons",
 	"global.sidebar.item.calendar": "Calendar",
@@ -767,7 +768,6 @@ export default {
 	"global.sidebar.item.tasks": "Tasks",
 	"global.sidebar.item.teacher": "Teachers",
 	"global.sidebar.item.teams": "Teams",
-	"global.sidebar.logo": "Logo",
 	"global.skipLink.mainContent": "Skip to main content",
 	"global.topbar.actions.alerts": "Status alert",
 	"global.topbar.actions.contactSupport": "Contact",

src/locales/es.ts

@@ -771,6 +771,7 @@ export default {
 	"format.dateUTC": "AAAA-MM-DD",
 	"format.dateYY": "DD/MM/YY",
 	"format.time": "HH:mm",
+	"global.cloudLogo": "Logo",
 	"global.sidebar.item.accessibility": "Accesibilidad",
 	"global.sidebar.item.addons": "Complementos",
 	"global.sidebar.item.calendar": "Calendario",
@@ -789,7 +790,6 @@ export default {
 	"global.sidebar.item.tasks": "Tareas",
 	"global.sidebar.item.teacher": "Profesores",
 	"global.sidebar.item.teams": "Equipos",
-	"global.sidebar.logo": "Logo",
 	"global.skipLink.mainContent": "Saltar al contenido principal",
 	"global.topbar.actions.alerts": "Alerta de estado",
 	"global.topbar.actions.contactSupport": "Contacto",

src/locales/uk.ts

@@ -760,6 +760,7 @@ export default {
 	"format.dateUTC": "JJJJ-MM-DD",
 	"format.dateYY": "DD.MM.YY",
 	"format.time": "HH:mm",
+	"global.cloudLogo": "Логотип",
 	"global.sidebar.item.accessibility": "Доступність",
 	"global.sidebar.item.addons": "Додаткові компоненти",
 	"global.sidebar.item.calendar": "Календар",
@@ -778,7 +779,6 @@ export default {
 	"global.sidebar.item.tasks": "Завдання",
 	"global.sidebar.item.teacher": "Викладачі",
 	"global.sidebar.item.teams": "Команди",
-	"global.sidebar.logo": "Логотип",
 	"global.skipLink.mainContent": "Перейти до основного вмісту",
 	"global.topbar.actions.alerts": "Сповіщення про стан",
 	"global.topbar.actions.contactSupport": "Зв'язатися",

src/modules/ui/layout/sidebar/SidebarLogo.unit.ts → src/modules/ui/layout/CloudLogo.unit.ts

@@ -3,15 +3,15 @@ import { createTestingI18n } from "@@/tests/test-utils/setup";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import EnvConfigModule from "@/store/env-config";
 import { ENV_CONFIG_MODULE_KEY } from "@/utils/inject";
-import SidebarLogo from "./SidebarLogo.vue";
+import CloudLogo from "./CloudLogo.vue";
 import { ConfigResponse } from "@/serverApi/v3";
 
-describe("SidebarLogo", () => {
+describe("CloudLogo", () => {
 	const setup = () => {
 		const envConfigModule = createModuleMocks(EnvConfigModule, {
 			getEnv: { SC_TITLE: "dBildungscloud" } as ConfigResponse,
 		});
-		const wrapper = shallowMount(SidebarLogo, {
+		const wrapper = shallowMount(CloudLogo, {
 			global: {
 				plugins: [createTestingI18n()],
 				provide: { [ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule },

src/modules/ui/layout/sidebar/SidebarLogo.vue → src/modules/ui/layout/CloudLogo.vue

@@ -11,6 +11,5 @@ import { ENV_CONFIG_MODULE_KEY, injectStrict } from "@/utils/inject";
 const { t } = useI18n();
 const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
 
-const altText =
-	envConfigModule.getEnv.SC_TITLE + " " + t("global.sidebar.logo");
+const altText = envConfigModule.getEnv.SC_TITLE + " " + t("global.cloudLogo");
 </script>

src/modules/ui/layout/sidebar/Sidebar.vue

@@ -1,7 +1,16 @@
 <template>
 	<VNavigationDrawer>
-		<SidebarLogo />
 		<VList open-strategy="multiple">
+			<div class="d-flex align-center">
+				<VBtn
+					class="ml-1"
+					:icon="mdiMenuOpen"
+					@click="() => $emit('update:modelValue', false)"
+					size="default"
+					flat
+				/>
+				<CloudLogo class="mt-1" />
+			</div>
 			<div class="pb-3">
 				<template v-for="item in pageItems" :key="item.title">
 					<SidebarCategoryItem
@@ -11,15 +20,15 @@
 					<SidebarItem v-else :item="item" />
 				</template>
 			</div>
-			<v-divider />
+			<VDivider aria-hidden="true" />
 			<div class="py-3">
 				<SidebarCategoryItem
 					v-for="link in metaItems"
 					:key="link.title"
 					:item="link"
 				/>
 			</div>
-			<VDivider />
+			<VDivider aria-hidden="true" />
 			<div class="pt-3">
 				<SidebarItem
 					v-for="link in legalItems"
@@ -42,11 +51,12 @@ import {
 	injectStrict,
 	THEME_KEY,
 } from "@/utils/inject";
-import SidebarLogo from "./SidebarLogo.vue";
+import CloudLogo from "../CloudLogo.vue";
 import SidebarItem from "./SidebarItem.vue";
 import SidebarCategoryItem from "./SidebarCategoryItem.vue";
 import { SidebarGroupItem, SidebarSingleItem, SidebarItems } from "../types";
 import { useSidebarItems } from "./SidebarItems.composable";
+import { mdiMenuOpen } from "@mdi/js";
 
 const authModule = injectStrict(AUTH_MODULE_KEY);
 const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
@@ -95,13 +105,13 @@ const getItemsForUser = (items: SidebarItems) => {
 	return pageItems;
 };
 
-const pageItems = computed(() => getItemsForUser(pageLinks.value));
-const metaItems = computed(
-	() => getItemsForUser(metaLinks.value) as SidebarGroupItem[]
-);
+const currentYear = computed(() => new Date().getFullYear());
+
 const legalItems = computed(
 	() => getItemsForUser(legalLinks.value) as SidebarSingleItem[]
 );
-
-const currentYear = computed(() => new Date().getFullYear());
+const metaItems = computed(
+	() => getItemsForUser(metaLinks.value) as SidebarGroupItem[]
+);
+const pageItems = computed(() => getItemsForUser(pageLinks.value));
 </script>

src/modules/ui/layout/topbar/Topbar.unit.ts

@@ -5,15 +5,22 @@ import {
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
 import { createModuleMocks } from "@/utils/mock-store-module";
-import { AUTH_MODULE_KEY, STATUS_ALERTS_MODULE_KEY } from "@/utils/inject";
+import {
+	AUTH_MODULE_KEY,
+	ENV_CONFIG_MODULE_KEY,
+	STATUS_ALERTS_MODULE_KEY,
+} from "@/utils/inject";
 import AuthModule from "@/store/auth";
 import StatusAlertsModule from "@/store/status-alerts";
 import { mockStatusAlerts } from "@@/tests/test-utils/mockStatusAlerts";
 import { h } from "vue";
 import { VApp } from "vuetify/lib/components/index.mjs";
+import { envsFactory } from "@@/tests/test-utils";
+import EnvConfigModule from "@/store/env-config";
+import { SchulcloudTheme } from "@/serverApi/v3";
 
 describe("@ui-layout/Topbar", () => {
-	const setup = (windowWidth = 1300) => {
+	const setup = (windowWidth = 1300, isSidebarExpanded?: boolean) => {
 		const authModule = createModuleMocks(AuthModule, {
 			getSchool: {
 				id: "234",
@@ -30,6 +37,12 @@ describe("@ui-layout/Topbar", () => {
 			getUserRoles: ["administrator"],
 		});
 
+		const envs = envsFactory.build();
+		const envConfigModule = createModuleMocks(EnvConfigModule, {
+			getEnv: envs,
+			getTheme: SchulcloudTheme.Brb,
+		});
+
 		const statusAlertsModule = createModuleMocks(StatusAlertsModule, {
 			getStatusAlerts: mockStatusAlerts,
 		});
@@ -45,12 +58,13 @@ describe("@ui-layout/Topbar", () => {
 				plugins: [createTestingVuetify(), createTestingI18n()],
 				provide: {
 					[AUTH_MODULE_KEY.valueOf()]: authModule,
+					[ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule,
 					[STATUS_ALERTS_MODULE_KEY.valueOf()]: statusAlertsModule,
 				},
 			},
 			slots: {
 				default: h(Topbar, {
-					sidebarExpanded: true,
+					sidebarExpanded: isSidebarExpanded ?? true,
 				}),
 			},
 		});
@@ -65,13 +79,49 @@ describe("@ui-layout/Topbar", () => {
 		expect(wrapper.exists()).toBe(true);
 	});
 
-	it("should emit sidebar-toggled", async () => {
-		const { wrapper, topbar } = setup();
+	describe("when sidebar is expanded", () => {
+		it("should not show toggle button", () => {
+			const { wrapper } = setup();
+
+			const sidebarToggle = wrapper.findComponent({ name: "VAppBarNavIcon" });
+
+			expect(sidebarToggle.exists()).toEqual(false);
+		});
+
+		it("should not show logo", () => {
+			const { wrapper } = setup();
+
+			const topbarLogo = wrapper.findComponent({ name: "TopbarLogo" });
+
+			expect(topbarLogo.exists()).toEqual(false);
+		});
+	});
 
-		const sidebarToggle = wrapper.findComponent({ name: "VAppBarNavIcon" });
-		await sidebarToggle.trigger("click");
+	describe("when sidebar is collapsed", () => {
+		it("should show toggle button", () => {
+			const { wrapper } = setup(1300, false);
 
-		expect(topbar.emitted("sidebar-toggled")).toHaveLength(1);
+			const sidebarToggle = wrapper.findComponent({ name: "VAppBarNavIcon" });
+
+			expect(sidebarToggle.exists()).toEqual(true);
+		});
+
+		it("should show logo", () => {
+			const { wrapper } = setup(1300, false);
+
+			const topbarLogo = wrapper.findComponent({ name: "CloudLogo" });
+
+			expect(topbarLogo.exists()).toEqual(true);
+		});
+
+		it("should emit sidebar-toggled", async () => {
+			const { wrapper, topbar } = setup(1300, false);
+
+			const sidebarToggle = wrapper.findComponent({ name: "VAppBarNavIcon" });
+			await sidebarToggle.trigger("click");
+
+			expect(topbar.emitted("sidebar-toggled")).toHaveLength(1);
+		});
 	});
 
 	it("should show all topbar items on large sized screens", async () => {

src/modules/ui/layout/topbar/Topbar.vue

@@ -1,10 +1,12 @@
 <template>
 	<VAppBar flat>
+		<CloudLogo v-if="!sidebarExpanded" class="mt-1" />
 		<template v-slot:prepend>
 			<VAppBarNavIcon
-				:icon="sidebarToggleIcon"
+				v-if="!sidebarExpanded"
+				:icon="mdiMenu"
 				@click="() => $emit('sidebar-toggled')"
-				size="small"
+				size="default"
 			/>
 		</template>
 		<VSpacer />
@@ -48,26 +50,22 @@
 </template>
 
 <script setup lang="ts">
-import { ComputedRef, computed, onMounted, toRef } from "vue";
+import { ComputedRef, computed, onMounted } from "vue";
 import { useDisplay } from "vuetify";
 import {
 	AUTH_MODULE_KEY,
 	STATUS_ALERTS_MODULE_KEY,
 	injectStrict,
 } from "@/utils/inject";
-import {
-	mdiMenuOpen,
-	mdiMenu,
-	mdiAlert,
-	mdiQrcode,
-} from "@/components/icons/material";
+import { mdiMenu, mdiAlert, mdiQrcode } from "@/components/icons/material";
 import TopbarItem from "./TopbarItem.vue";
 import PageShare from "./PageShare.vue";
 import CloudStatusMessages from "./CloudStatusMessages.vue";
 import UserMenu from "./UserMenu.vue";
 import { StatusAlert } from "@/store/types/status-alert";
+import CloudLogo from "../CloudLogo.vue";
 
-const props = defineProps({
+defineProps({
 	sidebarExpanded: {
 		type: Boolean,
 		required: true,
@@ -87,10 +85,6 @@ const isTabletOrBigger = computed(() => {
 	return mdAndUp.value;
 });
 
-const sidebarToggleIcon = computed(() => {
-	return toRef(props.sidebarExpanded).value ? mdiMenuOpen : mdiMenu;
-});
-
 onMounted(() => {
 	(async () => {
 		await statusAlertsModule.fetchStatusAlerts();

src/modules/ui/layout/topbar/UserMenu.unit.ts

@@ -44,8 +44,8 @@ describe("@ui-layout/UserMenu", () => {
 	it("should render with correct user initials", async () => {
 		const { wrapper } = setup();
 
-		const avatar = wrapper.findComponent({ name: "VAvatar" });
-		expect(avatar.html()).toMatch("AD");
+		const initials = wrapper.findComponent("[data-testid=user-menu-btn]");
+		expect(initials.text()).toMatch("AD");
 	});
 
 	it("should render correct active user name with role", async () => {

src/modules/ui/layout/topbar/UserMenu.vue

@@ -6,10 +6,10 @@
 				v-bind.attr="$attrs"
 				icon
 				data-testid="user-menu-btn"
+				class="bg-surface-variant"
+				size="small"
 			>
-				<VAvatar color="surface-variant">
-					<span class="text-h6">{{ initials }}</span>
-				</VAvatar>
+				<span class="text-h6">{{ initials }}</span>
 			</VBtn>
 		</template>
 		<VList>

src/themes/base-vuetify.options.ts

@@ -25,6 +25,8 @@ const baseTheme: ThemeDefinition = {
 		"warning-lighten-1": "#fff0e2",
 		error: "#ff1134",
 		"error-darken-1": "#bf0d26",
+		"surface-variant": "#4E555D",
+		"on-surface-variant": "#F7F7F8",
 	},
 	variables: {
 		"high-emphasis-opacity": 1,