Creating a sidebar
Our navigation will only have three pages: the dashboard, roster, and schedule. Inside of the Navigation folder, open AppSidebarNavigation
and let's first create an enum to represent each of these pages.
Inside the struct, above the body
variable, add the following enum
:
enum NavigationItem { case dashboard case roster case schedule }
Our enum will allow us a way to keep track of the currently selected navigation item when using the sidebar. From the designs, we know that the dashboard will be the first page we want to load.
We need to create a variable to keep track of the selected NavigationItem
. After the enum, add the following private
variable:
@State private var selection: Set<NavigationItem> = [.dashboard]
We now have what we need to create a sidebar. Let's create our sidebar now by adding the following after the body
variable:
var sidebar...