feat: add main-menu styles and examples (#255)

examples/src/components/main-menu/main-menu.tsx

@@ -0,0 +1,76 @@
+import {
+  useMainMenuContainerStyles,
+  useMainMenuTabListStyles,
+  useMainMenuTabStyles,
+} from "@axiscommunications/fluent-styles";
+import {
+  Tab,
+  TabList,
+  TabProps,
+  useTabListContext_unstable,
+} from "@fluentui/react-components";
+import {
+  bundleIcon,
+  CardUiFilled,
+  CardUiRegular,
+  HomeFilled,
+  HomeRegular,
+  SettingsFilled,
+  SettingsRegular,
+} from "@fluentui/react-icons";
+import React, { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { routes } from "../../routing/routes";
+
+const HomeIcon = bundleIcon(HomeFilled, HomeRegular);
+const RandomIcon = bundleIcon(CardUiFilled, CardUiRegular);
+const SettingsIcon = bundleIcon(SettingsFilled, SettingsRegular);
+
+const HOME_VALUE = "1";
+
+export function MainMenu() {
+  const [selectedTab, setSelectedTab] = useState(HOME_VALUE);
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    if (pathname === routes.Home) {
+      setSelectedTab(HOME_VALUE);
+    }
+  }, [pathname]);
+
+  const { rootStyle: containerRootStyle } = useMainMenuContainerStyles();
+  const { rootStyle, spacerStyle } = useMainMenuTabListStyles();
+
+  return (
+    <div className={containerRootStyle}>
+      <TabList
+        className={rootStyle}
+        size="large"
+        vertical
+        defaultSelectedValue={selectedTab}
+        selectedValue={selectedTab}
+        onTabSelect={(_, { value }) => {
+          setSelectedTab(value as unknown as string);
+        }}
+      >
+        <MainMenuTab
+          onClick={() => navigate(routes.Home)}
+          icon={<HomeIcon />}
+          value={HOME_VALUE}
+        />
+        <MainMenuTab icon={<RandomIcon />} value="2" />
+        <div className={spacerStyle} />
+        <MainMenuTab icon={<SettingsIcon />} value="3" />
+      </TabList>
+    </div>
+  );
+}
+
+type TMainMenuTab = TabProps;
+
+function MainMenuTab({ children, ...props }: TMainMenuTab) {
+  const selected = useTabListContext_unstable((c) => c.selectedValue);
+  const { rootStyle } = useMainMenuTabStyles(selected === props.value);
+  return <Tab className={rootStyle} {...props}>{children}</Tab>;
+}

examples/src/components/story/story-status.tsx

@@ -24,7 +24,7 @@ const STATUS_BADGES: Record<EStoryStatus, JSX.Element> = {
   [EStoryStatus.WIP]: (
     <Tooltip
       key={EStoryStatus.PUBLIC}
-      content={"Packages is not yet fully completed. Work is still in progress."}
+      content={"Feature(s) is not yet fully completed. Work is still in progress."}
       withArrow
       relationship={"label"}
     >
@@ -34,7 +34,7 @@ const STATUS_BADGES: Record<EStoryStatus, JSX.Element> = {
   [EStoryStatus.NEW]: (
     <Tooltip
       key={EStoryStatus.NEW}
-      content={"Packages was newly added, beware of hick-ups!"}
+      content={"Feature(s) was newly added, beware of hick-ups!"}
       withArrow
       relationship={"label"}
     >
@@ -44,7 +44,7 @@ const STATUS_BADGES: Record<EStoryStatus, JSX.Element> = {
   [EStoryStatus.STABLE]: (
     <Tooltip
       key={EStoryStatus.STABLE}
-      content={"Packages is considered stable, tho please report problems if found!"}
+      content={"Feature(s) is considered stable, tho please report problems if found!"}
       withArrow
       relationship={"label"}
     >
@@ -54,7 +54,7 @@ const STATUS_BADGES: Record<EStoryStatus, JSX.Element> = {
   [EStoryStatus.UNSTABLE]: (
     <Tooltip
       key={EStoryStatus.UNSTABLE}
-      content={"Packages is considered unstable, experimental."}
+      content={"Feature(s) is considered unstable, experimental."}
       withArrow
       relationship={"label"}
     >

examples/src/main-page.tsx

@@ -1,26 +1,35 @@
-import { makeStyles, tokens } from "@fluentui/react-components";
+import { makeStyles } from "@fluentui/react-components";
 import React from "react";
 import { Outlet } from "react-router-dom";
+import { MainMenu } from "./components/main-menu/main-menu";
+import { NavigationMenu } from "./components/navigation-menu/navigation-menu";
 import { Navbar } from "./components/top-bar";
 import { Layout } from "./layout";
-import { useStaticStyles } from "./styles/static";
-import { NavigationMenu } from "./components/navigation-menu/navigation-menu";
 import { useScrollToAnchor } from "./routing/use-scroll-to-anchor";
+import { useStaticStyles } from "./styles/static";
 
-export const useStyles = makeStyles({
-  navigation: {
-    paddingRight: tokens.spacingHorizontalL,
+const useStyles = makeStyles({
+  navigationContainer: {
+    display: "flex",
+    height: "100%",
   },
 });
 
 export const MainPage = () => {
   useStaticStyles();
   useScrollToAnchor();
 
+  const styles = useStyles();
+
   return (
     <Layout
       header={<Navbar />}
-      navigation={<NavigationMenu />}
+      navigation={
+        <div className={styles.navigationContainer}>
+          <MainMenu />
+          <NavigationMenu />
+        </div>
+      }
       content={<Outlet />}
     />
   );

examples/src/routing/route-map.tsx

@@ -9,7 +9,7 @@ import { ThemePage } from "../stories/theme-page";
 import { routes, TRoute } from "./routes";
 import { TableUtilitiesPage } from "../stories/table-utilities/table-utlities-page";
 import { IllustrationPage } from "../stories/illustrations/illustration-page";
-import { FluentImplementationPage } from "../stories/fluent-implementations/fluent-implementation-page";
+import { MainMenuPage } from "../stories/main-menu/main-menu-page";
 
 export enum RouteGroup {
   MISC,
@@ -35,10 +35,10 @@ type TRouteData = {
 
 export const routeMap: Map<TRoute, TRouteData> = new Map([
   [
-    routes.fluentImplementations,
+    routes.mainMenu,
     {
-      label: "Fluent implementations",
-      element: <FluentImplementationPage />,
+      label: "Main menu",
+      element: <MainMenuPage />,
       group: RouteGroup.STORY,
       category: RouteCategory.STYLE,
       ghInfo: {

examples/src/routing/routes.ts

@@ -8,7 +8,7 @@ export const routes = {
   PasswordInput: "/password-input",
   TabListUtilities: "/tab-list-utilities",
   Illustrations: "/illustrations-catalog",
-  fluentImplementations: "/fluent-implementations",
+  mainMenu: "/main-menu",
 } as const;
 
 export type TRoute = (typeof routes)[keyof typeof routes];