added more

Author: bubulux

apps/frontend/ui/src/layout/partials/Sidebar/func.tsx

@@ -1,31 +1,68 @@
 import type { JSX } from "react";
 
-import { Flex, Divider } from "@lib-components";
+import {
+  LightbulbFilled,
+  SearchFilled,
+  HandshakeFilled,
+} from "@fluentui/react-icons";
+
+import { Flex, Divider, TabList, Tab, Tooltip } from "@lib-components";
 import { Logo } from "@lib-theme";
 
 import useSidebarClasses from "@app-ui/layout/partials/Sidebar/styles";
 
 type TProps = {
+  defaultTab: "overview" | "browse" | "contribute";
   isExpanded: boolean;
   toggleExpandAction: (isExpanded: boolean) => void;
+  overviewTabAction: () => void;
+  browseTabAction: () => void;
 };
 
 export default function Sidebar({
+  defaultTab,
   isExpanded,
   toggleExpandAction,
+  overviewTabAction,
+  browseTabAction,
 }: TProps): JSX.Element {
   const classes = useSidebarClasses();
   return (
     <Flex
       className={classes.root}
       direction="column"
       justifyContent="start"
+      alignItems="center"
       padding={["SNudge"]}
+      gap="S"
     >
       <Logo size="extraLarge" />
       <Divider appearance="subtle" />
-      <Flex shHeight="100%" shWidth="100%">
-        Content
+      <Flex
+        shHeight="100%"
+        shWidth="100%"
+        // justifyContent="center"
+        margin={["None", "XS", "None", "M"]}
+      >
+        <TabList vertical defaultSelectedValue={defaultTab}>
+          <Tab icon={<LightbulbFilled />} value="overview">
+            Overview
+          </Tab>
+          <Tab icon={<SearchFilled />} value="browse">
+            Browse
+          </Tab>
+          <Tooltip
+            content="Will be available in 2.0"
+            relationship="label"
+            appearance="inverted"
+            withArrow
+            positioning="below-end"
+          >
+            <Tab icon={<HandshakeFilled />} value="contribute" disabled>
+              Contribute
+            </Tab>
+          </Tooltip>
+        </TabList>
       </Flex>
     </Flex>
   );

apps/frontend/ui/src/layout/partials/Sidebar/stories.tsx

@@ -2,20 +2,24 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import Sidebar from "@app-ui/layout/partials/Sidebar";
 
-import { Flex } from "@lib-components";
 import { tokens } from "@lib-theme";
 
 const meta: Meta = {
   title: "App/UI/Layout/Partials/Sidebar",
   component: Sidebar,
+  args: {
+    defaultTab: "overview",
+    isExpanded: true,
+    toggleExpandAction: (_: boolean) => _,
+  },
 };
 
 export default meta;
 
 type TStory = StoryObj<typeof Sidebar>;
 
 export const Index: TStory = {
-  render: () => (
+  render: (args) => (
     <div
       style={{
         display: "flex",
@@ -25,7 +29,7 @@ export const Index: TStory = {
         height: "700px",
       }}
     >
-      <Sidebar />
+      <Sidebar {...args} />
       <div
         style={{
           width: "100%",

apps/frontend/ui/src/layout/partials/Sidebar/styles.ts

@@ -3,6 +3,7 @@ import { makeStyles, tokens } from "@lib-theme";
 const useSidebarClasses = makeStyles({
   root: {
     backgroundColor: tokens.colorNeutralBackground1,
+    borderRadius: tokens.borderRadiusLarge,
   },
 });
 

libs/components/src/atoms/Tooltipp/func.tsx

@@ -0,0 +1,14 @@
+import type { JSX } from "react";
+
+import { Tooltip as UnmountedTooltip } from "@fluentui/react-components";
+import type { TooltipProps } from "@fluentui/react-components";
+
+import { useFuiProviderNode } from "@lib-theme";
+
+type TProps = Omit<TooltipProps, "mountNode">;
+
+export default function Tooltip(props: TProps): JSX.Element {
+  const { fuiProviderNode } = useFuiProviderNode();
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <UnmountedTooltip {...props} mountNode={fuiProviderNode} />;
+}

libs/components/src/atoms/Tooltipp/index.ts

@@ -0,0 +1,3 @@
+import Tooltip from "@lib-components/atoms/Tooltipp/func";
+
+export default Tooltip;

libs/components/src/atoms/index.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from "@lib-components/atoms/Tooltipp";

libs/components/src/index.ts

@@ -1,3 +1,6 @@
 export { Divider } from "@fluentui/react-components";
+export { Tab } from "@fluentui/react-components";
+export { TabList } from "@fluentui/react-components";
 
+export { Tooltip } from "@lib-components/atoms";
 export { Flex } from "@lib-components/layout";

libs/theme/src/Provider/colors.ts

@@ -1,23 +1,42 @@
 import type { BrandVariants, Theme } from "@fluentui/react-components";
 import { createLightTheme, createDarkTheme } from "@fluentui/react-components";
 
+// const myNewTheme: BrandVariants = {
+//   10: "#020403",
+//   20: "#111B19",
+//   30: "#172E2A",
+//   40: "#1C3B36",
+//   50: "#1F4942",
+//   60: "#23574F",
+//   70: "#26665C",
+//   80: "#297569",
+//   90: "#2C8477",
+//   100: "#2E9485",
+//   110: "#30A493",
+//   120: "#31B4A2",
+//   130: "#56C2B0",
+//   140: "#7CCEBF",
+//   150: "#9DDACE",
+//   160: "#BDE6DD",
+// };
+
 const myNewTheme: BrandVariants = {
-  10: "#020403",
-  20: "#111B19",
-  30: "#172E2A",
-  40: "#1C3B36",
-  50: "#1F4942",
-  60: "#23574F",
-  70: "#26665C",
-  80: "#297569",
-  90: "#2C8477",
-  100: "#2E9485",
-  110: "#30A493",
-  120: "#31B4A2",
-  130: "#56C2B0",
-  140: "#7CCEBF",
-  150: "#9DDACE",
-  160: "#BDE6DD",
+  10: "#000405",
+  20: "#011B21",
+  30: "#002B36",
+  40: "#003746",
+  50: "#004558",
+  60: "#00526A",
+  70: "#00607E",
+  80: "#006E92",
+  90: "#007CA8",
+  100: "#008BBF",
+  110: "#0099D7",
+  120: "#31A7EA",
+  130: "#55B5F9",
+  140: "#7CC2FF",
+  150: "#A2CEFF",
+  160: "#C1DBFF",
 };
 
 const lightTheme: Theme = {

libs/theme/src/index.ts

@@ -2,6 +2,7 @@ import { makeStyles, tokens, mergeClasses } from "@fluentui/react-components";
 
 import ThemeProvider from "@lib-theme/Provider";
 import Logo from "@lib-theme/Logo";
+import { useFuiProviderNode } from "@lib-theme/hooks";
 
 export {
   EThemeDimensions,
@@ -15,6 +16,6 @@ export type {
   TThemeShorthandSpacing,
 } from "@lib-theme/types";
 
-export { ThemeProvider, Logo };
+export { ThemeProvider, Logo, useFuiProviderNode };
 
 export { makeStyles, mergeClasses, tokens };