docs: update README

Closes #352
macosui · Feb 16, 2023 · 6d57a89 · 6d57a89
1 parent 427c773
commit 6d57a89
Showing 1 changed file with 56 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -50,6 +50,7 @@ should avoid allowing your application window to be resized below the height of
 
 - [Layout](#layout)
   - [MacosWindow](#macoswindow)
+  - [Sidebar](#sidebar)
   - [MacosScaffold](#macosscaffold)
   - [Modern Window Look](#modern-window-look)
   - [ToolBar](#toolbar)
@@ -148,6 +149,56 @@ your `MacosScaffold` in a `Builder` widget in order for this to work properly.
 
 <img src="https://imgur.com/IBbp5rN.gif" width="75%">
 
+## Sidebar
+A sidebar enables app navigation and provides quick access to top-level collections of content in your app.
+
+Sidebars may be placed at the left or right of your app. To place a sidebar on the left, use the `MacosWindow.sidebar` property. To place a sidebar on the right, use the `MacosWindow.endSidebar` property.
+
+<img src="https://imgur.com/sz4VPNR.png" width="75%"/>
+
+Example usage:
+
+```dart
+int pageIndex = 0;
+
+...
+
+MacosWindow(
+  sidebar: Sidebar(
+    minWidth: 200,
+    builder: (context, scrollController) {
+      return SidebarItems(
+        currentIndex: pageIndex,
+        scrollController: scrollController,
+        itemSize: SidebarItemSize.large,
+        onChanged: (i) {
+          setState(() => pageIndex = i);
+        },
+        items: const [
+          SidebarItem(
+            label: Text('Page One'),
+          ),
+          SidebarItem(
+            label: Text('Page Two'),
+          ),
+        ],
+      );
+    },
+  ),
+  endSidebar: Sidebar(
+    startWidth: 200,
+    minWidth: 200,
+    maxWidth: 300,
+    shownByDefault: false,
+    builder: (context, _) {
+      return const Center(
+        child: Text('End Sidebar'),
+      );
+    },
+  ),
+),
+```
+
 ## MacosScaffold
 
 The `MacosScaffold` is what you might call a "page".
@@ -355,7 +406,7 @@ CustomToolbarItem(
 
 ## MacosListTile
 
-A widget that aims to approximate the [ListTile] widget found in
+A widget that aims to approximate the [`ListTile`](https://api.flutter.dev/flutter/material/ListTile-class.html) widget found in
 Flutter's material library.
 
 ![MacosListTile](https://imgur.com/pQB99M2.png)
@@ -862,10 +913,10 @@ You can set `discrete` to `true` to make it a discrete capacity indicator.
 
 A slider is a control that lets people select a value from a continuous or discrete range of values by moving the slider thumb.
 
- Continuous                                                                                                                                                         | Discrete                                                                                                                                                                                                         |
-|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| ![Continuous Slider Example](https://i.imgur.com/dc4YjoX.png) | ![Discrete Slider Example](https://i.imgur.com/KckOTUf.png)                                                                                   |
-| A horizontal slider where any value continuous value between a min and max can be selected | A horizontal slider where only discrete values between a min and max can be selected. Tick marks are often displayed to provide context. |
+ | Continuous                                                                                 | Discrete                                                                                                                                 |
+ | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
+ | ![Continuous Slider Example](https://i.imgur.com/dc4YjoX.png)                              | ![Discrete Slider Example](https://i.imgur.com/KckOTUf.png)                                                                              |
+ | A horizontal slider where any value continuous value between a min and max can be selected | A horizontal slider where only discrete values between a min and max can be selected. Tick marks are often displayed to provide context. |
 
 
 Here's an example of how to create an interactive continuous slider: