SwiftUI - Catalyst translucent sidebar

Question

Goal is to make a translucent sidebar on Mac Catalyst.

The code bellow gives a not translucent sidebar (image 1).

On Mac (not catalyst) the sidebar looks fine (image 2).

is it possible to have a translucent sidebar on Mac Catalyst?

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        NavigationView {
            
            //sidebar
            List {
                Label("Books", systemImage: "book.closed")
                Label("Tutorials", systemImage: "list.bullet.rectangle")
         
            }
            .background(Color.clear)

            .listStyle(SidebarListStyle())
            
            //content
            Text("Sidebar")
            .navigationTitle("Sidebar")
        }
        
        
    }
}

nope, seems only UIKit can do it, as apple documentation... https://developer.apple.com/documentation/uikit/mac_catalyst/optimizing_your_ipad_app_for_mac — Mane Manero, Apr 13 '21 at 17:13
what about adding background blur modifier? I tried but didn't work... — Mane Manero, May 07 '21 at 09:19
You need to wrap you views in a UISplitViewController. See https://stackoverflow.com/a/68162268/3211135 — Que20, Jun 28 '21 at 11:10

score 3 · Answer 1 · answered Jan 11 '22 at 06:13

3

You should select "Optimize Interface for Mac" in your target's General settings tab. Then the sidebar will be translucent.

answered Jan 11 '22 at 06:13

BlueSky335

31
4

This solved it for me, thanks! – Vatsal Manot Jan 30 '22 at 18:43

score 1 · Answer 2 · answered May 09 '21 at 01:09

Start with the AppDelegate main and follow Apple's tutorial re: UISplitViewController "Apply a Translucent Background to Your Primary View Controller".

https://developer.apple.com/documentation/uikit/mac_catalyst/optimizing_your_ipad_app_for_mac

In wrapping UISplitViewController in a UIViewControllerRepresentable, I wasn't able to get translucency, but did get full-height sidebar.

Danny Aaron · Answer 3 · 2021-11-27T09:42:38.127

I figured out that using .background(Color.clear) on sidebar View makes possible translucent background even if ListStyle is not specified as SidebarListStyle(). Works in Xcode 13.1 for me

struct ContentView: View {
    var body: some View {
        NavigationView { // without wrapping to NavigationView it won't work
            List { // can be VStack or HStack
                Text("Hello, world!")
                  .padding()
            }
            .listStyle(SidebarListStyle()) // works with other styles
        Text("")
    }
  }
}

struct YourApp: App {
   var body: some Scene {
      WindowGroup {
        ContentView()
            .toolbar {
                Button {
                    
                } label: {
                    Image(systemName: "gear")
                }

            }
            .background(Color.clear) // 3 <-- MUST HAVE!
      }
   }
}

SwiftUI - Catalyst translucent sidebar

3 Answers3