feat(ui): enhance navbar

apps/uikit/src/app/app.tsx

@@ -4,10 +4,10 @@ import { ThemeProvider } from 'styled-components';
 import { AppWrapper, GlobalStyle } from '@react-monorepo/shared-ui';
 import { Route, Routes } from 'react-router-dom';
 import { Layout } from './components/Layout';
-import Styleguide from './pages/styleguide';
 import ProdutCard from './pages/ProdutCard';
 import LoginForm from './pages/LoginForm';
 import NoMatch from './pages/NoMatch';
+import Styleguide from './pages/Styleguide';
 
 function App(): React.ReactElement {
 	return (

apps/uikit/src/app/components/Layout/index.tsx

@@ -8,7 +8,7 @@ import {
 	MainContent,
 } from '@react-monorepo/shared-ui';
 
-export const Layout = () => {
+export const Layout = (): React.ReactNode => {
 	return (
 		<AppWrapper>
 			<Header>

apps/uikit/src/app/components/Menu/index.tsx

@@ -1,19 +1,30 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import { NavBar } from '@react-monorepo/shared-ui';
+import * as Menubar from '@radix-ui/react-menubar';
+import {
+	MenubarRootWrapper,
+	MenubarTriggerWrapper,
+	MenuLinkWrapper,
+} from '@react-monorepo/shared-ui';
+
+interface MenuProps {
+	to: string;
+	children: React.ReactNode;
+}
+
+const MenuItem = ({ to, children }: MenuProps) => (
+	<Menubar.Menu>
+		<MenubarTriggerWrapper>
+			<MenuLinkWrapper to={to}>{children}</MenuLinkWrapper>
+		</MenubarTriggerWrapper>
+	</Menubar.Menu>
+);
 
 export const Menu = (): React.ReactNode => {
 	return (
-		<NavBar>
-			<li>
-				<Link to="/"> Style guide</Link>
-			</li>
-			<li>
-				<Link to="/product-card"> Login Form</Link>
-			</li>
-			<li>
-				<Link to="/login-form"> Produt Card</Link>
-			</li>
-		</NavBar>
+		<MenubarRootWrapper>
+			<MenuItem to="/">Style Guide</MenuItem>
+			<MenuItem to="/login-form">Login Form</MenuItem>
+			<MenuItem to="/product-card">Product Card</MenuItem>
+		</MenubarRootWrapper>
 	);
 };

apps/uikit/src/app/pages/Styleguide.tsx

@@ -1,7 +1,28 @@
 import React from 'react';
+import { BoxElement } from '@react-monorepo/shared-ui';
 
 const Styleguide = (): React.ReactNode => {
-	return <div>styleguide</div>;
+	return (
+		<BoxElement
+			style={{
+				display: 'flex',
+				flexDirection: 'row',
+				justifyContent: 'space-between',
+				justifyItems: 'space-between',
+				alignItems: 'flex-start',
+				flexWrap: 'wrap',
+				width: '33%',
+				height: '33%',
+			}}
+		>
+			<div>
+				<BoxElement style={{ backgroundColor: 'red' }} $isBig={false} />
+				<BoxElement style={{ backgroundColor: 'green' }} />
+				<BoxElement style={{ backgroundColor: 'pink' }} />
+				<BoxElement style={{ backgroundColor: 'yellow' }} />
+			</div>
+		</BoxElement>
+	);
 };
 
 export default Styleguide;

package.json

@@ -39,6 +39,7 @@
 		"@nx/workspace": "19.8.2",
 		"@playwright/test": "^1.36.0",
 		"@radix-ui/react-avatar": "^1.1.0",
+		"@radix-ui/react-menubar": "^1.1.1",
 		"@radix-ui/react-popover": "^1.1.1",
 		"@radix-ui/themes": "^3.1.4",
 		"@storybook/addon-essentials": "^8.2.8",