feat(styles): add navigation style (#180)

Note: we need to use both this style and Tab style to create a
navigation component in each application. Also make sure that you use
"large" size TabList.

styles/src/index.ts

@@ -1,3 +1,4 @@
+export * from "./navigation/navigation.styles";
 export * from "./static/static.styles";
 export * from "./tab-list/tab-list.styles";
 export * from "./tab-list/tab.styles";

styles/src/navigation/navigation.styles.ts

@@ -0,0 +1,36 @@
+import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
+
+/**
+ * How to use:
+ * ```
+ * <div className={navStyles.container}>
+ *   <TabList
+ *     className={navStyles.tabList}
+ *     size="large"
+ *     vertical
+ *   >
+ *     <Tab />
+ *     <Tab />
+ *     <div className={navStyles.spacer}/>
+ *     <Tab />
+ *   </TabList>
+ * </div>
+ * ```
+ */
+export const useNavigationStyles = makeStyles({
+  container: {
+    ...shorthands.padding(
+      tokens.spacingVerticalXXL,
+      tokens.spacingHorizontalS,
+      tokens.spacingVerticalL
+    ),
+    backgroundColor: tokens.colorNeutralBackground4,
+  },
+  spacer: {
+    flexGrow: 1,
+  },
+  tabList: {
+    height: "100%",
+    rowGap: tokens.spacingVerticalXS,
+  },
+});