Add sidebar image logos and optional template tinting.

Include Join Meetings and Photo, Video, Tutorials, and Settings assets at 1x through 3x scales, extend sidebarItem for logos and template control, and tune icon sizes for the navigation list.

Made-with: Cursor

meetings_app/Assets.xcassets/JoinMeetingsLogo.imageset/Contents.json

@@ -0,0 +1,26 @@
+{
+  "images" : [
+    {
+      "filename" : "join_meetings_logo.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "join_meetings_logo@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "join_meetings_logo@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "template-rendering-intent" : "template"
+  }
+}

meetings_app/Assets.xcassets/SidebarPhotoLogo.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images": [
+    {
+      "filename": "sidebar_photo.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "filename": "sidebar_photo@2x.png",
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "filename": "sidebar_photo@3x.png",
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

meetings_app/Assets.xcassets/SidebarSettingsLogo.imageset/Contents.json

@@ -0,0 +1,26 @@
+{
+  "images": [
+    {
+      "filename": "sidebar_settings.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "filename": "sidebar_settings@2x.png",
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "filename": "sidebar_settings@3x.png",
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  },
+  "properties": {
+    "template-rendering-intent": "template"
+  }
+}

meetings_app/Assets.xcassets/SidebarTutorialsLogo.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images": [
+    {
+      "filename": "sidebar_tutorials.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "filename": "sidebar_tutorials@2x.png",
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "filename": "sidebar_tutorials@3x.png",
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

meetings_app/Assets.xcassets/SidebarVideoLogo.imageset/Contents.json

@@ -0,0 +1,26 @@
+{
+  "images": [
+    {
+      "filename": "sidebar_video.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "filename": "sidebar_video@2x.png",
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "filename": "sidebar_video@3x.png",
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  },
+  "properties": {
+    "template-rendering-intent": "template"
+  }
+}

meetings_app/ViewController.swift

@@ -85,13 +85,13 @@ private extension ViewController {
         menuStack.spacing = 10
 
         menuStack.addArrangedSubview(sidebarSectionTitle("Meetings"))
-        menuStack.addArrangedSubview(sidebarItem("Join Meetings", icon: "􀉣", selected: true))
+        menuStack.addArrangedSubview(sidebarItem("Join Meetings", icon: "􀉣", selected: true, logoImageName: "JoinMeetingsLogo", logoIconWidth: 24, logoHeightMultiplier: 56.0 / 52.0))
         menuStack.addArrangedSubview(sidebarSectionTitle("Backgrounds"))
-        menuStack.addArrangedSubview(sidebarItem("Photo", icon: "􀏂", selected: false))
-        menuStack.addArrangedSubview(sidebarItem("Video", icon: "􀎚", selected: false))
+        menuStack.addArrangedSubview(sidebarItem("Photo", icon: "􀏂", selected: false, logoImageName: "SidebarPhotoLogo", logoIconWidth: 24, logoHeightMultiplier: 82.0 / 62.0, logoTemplate: false))
+        menuStack.addArrangedSubview(sidebarItem("Video", icon: "􀎚", selected: false, logoImageName: "SidebarVideoLogo", logoIconWidth: 28, logoHeightMultiplier: 52.0 / 60.0))
         menuStack.addArrangedSubview(sidebarSectionTitle("Additional"))
-        menuStack.addArrangedSubview(sidebarItem("Tutorials", icon: "􀛩", selected: false))
-        menuStack.addArrangedSubview(sidebarItem("Settings", icon: "􀍟", selected: false))
+        menuStack.addArrangedSubview(sidebarItem("Tutorials", icon: "􀛩", selected: false, logoImageName: "SidebarTutorialsLogo", logoIconWidth: 24, logoHeightMultiplier: 50.0 / 60.0, logoTemplate: false))
+        menuStack.addArrangedSubview(sidebarItem("Settings", icon: "􀍟", selected: false, logoImageName: "SidebarSettingsLogo", logoIconWidth: 28, logoHeightMultiplier: 68.0 / 62.0))
 
         sidebar.addSubview(titleRow)
         sidebar.addSubview(menuStack)
@@ -365,7 +365,7 @@ private extension ViewController {
         textLabel(text, font: typography.sidebarSection, color: palette.textMuted)
     }
 
-    func sidebarItem(_ text: String, icon: String, selected: Bool) -> NSView {
+    func sidebarItem(_ text: String, icon: String, selected: Bool, logoImageName: String? = nil, logoIconWidth: CGFloat = 18, logoHeightMultiplier: CGFloat = 1, logoTemplate: Bool = true) -> NSView {
         let item = roundedContainer(cornerRadius: 9, color: selected ? palette.sidebarItemSelectedBackground : .clear)
         item.translatesAutoresizingMaskIntoConstraints = false
         item.heightAnchor.constraint(equalToConstant: 36).isActive = true
@@ -373,18 +373,41 @@ private extension ViewController {
             styleSurface(item, borderColor: palette.sidebarItemSelectedBorder, borderWidth: 1, shadow: false)
         }
 
-        let iconLabelView = textLabel(icon, font: typography.sidebarIcon, color: selected ? palette.textPrimary : palette.textSecondary)
-        let titleLabel = textLabel(text, font: typography.sidebarItem, color: selected ? palette.textPrimary : palette.textSecondary)
+        let tint = selected ? palette.textPrimary : palette.textSecondary
+        let leadingView: NSView
+        if let name = logoImageName, let logo = NSImage(named: name) {
+            let imageView = NSImageView(image: logo)
+            imageView.translatesAutoresizingMaskIntoConstraints = false
+            imageView.imageScaling = .scaleProportionallyDown
+            imageView.imageAlignment = .alignCenter
+            imageView.isEditable = false
+            if logoTemplate {
+                imageView.contentTintColor = tint
+            }
+            leadingView = imageView
+        } else {
+            leadingView = textLabel(icon, font: typography.sidebarIcon, color: tint)
+        }
+
+        let titleLabel = textLabel(text, font: typography.sidebarItem, color: tint)
 
-        item.addSubview(iconLabelView)
+        item.addSubview(leadingView)
         item.addSubview(titleLabel)
 
-        NSLayoutConstraint.activate([
-            iconLabelView.leadingAnchor.constraint(equalTo: item.leadingAnchor, constant: 12),
-            iconLabelView.centerYAnchor.constraint(equalTo: item.centerYAnchor),
-            titleLabel.leadingAnchor.constraint(equalTo: iconLabelView.trailingAnchor, constant: 8),
+        var constraints: [NSLayoutConstraint] = [
+            leadingView.leadingAnchor.constraint(equalTo: item.leadingAnchor, constant: 12),
+            leadingView.centerYAnchor.constraint(equalTo: item.centerYAnchor),
+            titleLabel.leadingAnchor.constraint(equalTo: leadingView.trailingAnchor, constant: 8),
             titleLabel.centerYAnchor.constraint(equalTo: item.centerYAnchor)
-        ])
+        ]
+        if logoImageName != nil {
+            let h = logoIconWidth * logoHeightMultiplier
+            constraints.append(contentsOf: [
+                leadingView.widthAnchor.constraint(equalToConstant: logoIconWidth),
+                leadingView.heightAnchor.constraint(equalToConstant: h)
+            ])
+        }
+        NSLayoutConstraint.activate(constraints)
 
         return item
     }