From 6e130ce66f7e1d4f2c8a6a786320c3d45234229b Mon Sep 17 00:00:00 2001
From: "@suet-kei.chan" <suet-kei.chan@t-systems.com>
Date: Tue, 20 Oct 2026 00:15:13 +0200
Subject: [PATCH] fix: align files side menu toggle icon with photos app

The app navigation toggle in Files showed the Magenta hide-menu icon
when expanded and fell back to the Material burger icon when collapsed,
while Photos renders the dock-left icon in both states.

- add dock-left.svg and register it as --icon-dock-left-* in icons.mjs
- render the toggle icon as a currentColor mask at 20px so it matches
  the Photos icon size and follows the button text colour
- cover the collapsed state (.menu-icon) in addition to .menu-open-icon
  and .dock-left-icon
- use the same icon in the photos navigation toggle override
---
 css/apps/photos.scss                |  6 ++----
 css/components/ncappnavigation.scss | 12 +++++++-----
 img/actions/dock-left.svg           |  3 +++
 src/icons.mjs                       |  1 +
 4 files changed, 13 insertions(+), 9 deletions(-)
 create mode 100644 img/actions/dock-left.svg

diff --git a/css/apps/photos.scss b/css/apps/photos.scss
index 5cec530..99b43a3 100644
--- a/css/apps/photos.scss
+++ b/css/apps/photos.scss
@@ -853,12 +853,10 @@
 		&.app-navigation {
 			button.app-navigation-toggle {
 				span.menu-open-icon {
-					background-image: var(--icon-hide-menu-dark);
 					width: 100%;
 					height: 100%;
-					background-position: center;
-					background-repeat: no-repeat;
-					background-size: 24px;
+					background-color: currentColor;
+					mask: var(--icon-dock-left-dark) center / 20px no-repeat;
 
 					svg {
 						display: none;
diff --git a/css/components/ncappnavigation.scss b/css/components/ncappnavigation.scss
index 61a28bc..89e24ab 100644
--- a/css/components/ncappnavigation.scss
+++ b/css/components/ncappnavigation.scss
@@ -83,12 +83,14 @@
 			padding: 0;
 			width: auto !important;
 
-			.menu-open-icon, 
+			.menu-open-icon,
+			.menu-icon,
 			.dock-left-icon {
-				background-image: var(--icon-hide-menu-dark);
-				width: 24px;
-				height: 24px;
-				
+				width: 20px;
+				height: 20px;
+				background-color: currentColor;
+				mask: var(--icon-dock-left-dark) center / 20px no-repeat;
+
 				svg {
 					display: none;
 				}
diff --git a/img/actions/dock-left.svg b/img/actions/dock-left.svg
new file mode 100644
index 0000000..db3dc8f
--- /dev/null
+++ b/img/actions/dock-left.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M20 18H9V6H20Z" fill="black"/>
+</svg>
diff --git a/src/icons.mjs b/src/icons.mjs
index 727fc6b..772674a 100644
--- a/src/icons.mjs
+++ b/src/icons.mjs
@@ -175,6 +175,7 @@ const icons = {
 	'photo-camera-media': path.join(__dirname, '../img', 'media', 'photo-camera-media.svg'),
 	'video-camera-media': path.join(__dirname, '../img', 'media', 'video-camera.svg'),
 	'hide-menu': path.join(__dirname, '../img', 'actions', 'hide-menu.svg'),
+	'dock-left': path.join(__dirname, '../img', 'actions', 'dock-left.svg'),
 	'photos-videos': path.join(__dirname, '../img', 'media', 'photos-videos.svg'),
 	appearance: path.join(__dirname, '../img', 'settings', 'appearance.svg'),
 	'arrow-previous': path.join(__dirname, '../img', 'back-nav.svg'),