Custom(izable) Navigator Sidebar Implementation

[lukepistrol]

Description

The main problem of SwiftUI's implemented sidebar is, that it is not very customizable and only brings native selection state when using NavigationLink. This has the downside of opening a whole new detail view every time a file is selected from the sidebar.

The new Sidebar uses Lists selection property to get the current selected file and set the document in the Code Editor

Things that need to be fixed:

• When right clicking on a file or folder which is not currently selected, no blue border appears while the contextMenu is shown. (help wanted)
• Localization of contextMenu
• corner radius of selected sidebar item needs to be slightly larger
• make colors right

Releated Issue

#123

Checklist (for drafts):

• I read and understood the contributing guide as well as the code of conduct
• My changes generate no new warnings
• My code builds and runs on my machine
• Review requested

Screenshots:

Screen.Recording.2022-03-24.at.17.24.54.mov

[austincondiff]

Rounded corners need to be more rounded, 5px I believe

[austincondiff]

Also I think the blue or gray highlight has a blend mode applied. Give me a second and I will find that out for you.

[austincondiff]

Here is the list selection background specification (to my best understanding).

Light Mode Focused Selection Color

Color	Opacity	Blending Mode
#0A82FF	75%	normal
#0A82FF	100%	soft light

Dark Mode Focused Selection Color

Color	Opacity	Blending Mode
#0A82FF	55%	normal
#0A82FF	100%	soft light

Light Mode Unfocused Selection Color

Color	Opacity	Blending Mode
#000000	11%	normal

Dark Mode Unfocused Selection Color

Color	Opacity	Blending Mode
#FFFFFF	12%	normal

Other considerations

• This focused selection color is only applied when sidebar is in focus, the unfocused selection color is applied when sidebar is not in focus or window is inactive.
• Be sure to use the users preferred color in place of the blue for the hue.
• We may want to make this reusable in some way

References

To gather the above information, I referred to Apple's own Sketch design resource.

Despite my findings, I am seeing some inconsistency when I apply this in Sketch vs Figma. I have been searching to find if Apple provides a variable to get this exact background but haven't found anything yet. I have posted in the Apple developer forums here to see if anyone else has any insight on this.

[lukepistrol]

@austincondiff updated the colors & corner radius. also adjusted the spacing to match Xcodes sidebar.

[austincondiff]

@lukepistrol can we keep the sidebar named "NavigatorSidebar"? I would like to reference our sidebars by function (navigator, inspector - this is what Xcode calls them) rather than location (leading, trailing). If you have a particular reason why we shouldn't do that I am open to it though!

[RayZhao1998]

@lukepistrol can we keep the sidebar named "NavigatorSidebar"? I would like to reference our sidebars by function (navigator, inspector - this is what Xcode calls them) rather than location (leading, trailing). If you have a particular reason why we shouldn't do that I am open to it though!

Because I think the leading sidebar contains multiple functions(navigator, search...)

You can see more here

[RayZhao1998]

Oh sorry. I found that Xcode's leading sidebar is called 'Navigator'. My bad.😭

So you can rename LeadingSidebar -> NavigatorSidebar and NavigatorSidebar -> ProjectSidebar

[lukepistrol]

So you can rename LeadingSidebar -> NavigatorSidebar and NavigatorSidebar -> ProjectSidebar

I will rename like so:

• Navigator Sidebar
  • ProjectNavigator
  • FindNavigator (Previously: Search)

So that it matches Xcodes description

[austincondiff]

Outstanding work! One last thing I just noticed, when the window is inactive, the icons go to 50% opacity, at least I believe it is 50%, so do the sidebar dock icons - compare to Xcode.

[lukepistrol]

Outstanding work! One last thing I just noticed, when the window is inactive, the icons go to 50% opacity, at least I believe it is 50%, so do the sidebar dock icons - compare to Xcode.

I think it's more like 45%

[RayZhao1998]

Fantastic! LGTM

[lukepistrol]

@austincondiff just need your approval then I'll merge

[austincondiff]

Just pulled. it doesn't quite match your screenshots

[lukepistrol]

Just pulled. it doesn't quite match your screenshots

Oops. Forgot to update them. Spacing still needs to be fixed.
Haven't found a way yet to change this with the list implementation.