add navbar

web/src/features/navbar/index.ts

+export * from './navbar'

web/src/features/navbar/nav-button.tsx

+import React from 'react'
+
+import { Button, ButtonProps, Text } from '@chakra-ui/react'
+
+import { Link } from '@redwoodjs/router'
+
+export type NavButtonProps = {
+  label: string
+  to: string
+} & ButtonProps
+
+export const NavButton: React.FC<NavButtonProps> = ({
+  label,
+  to,
+  ...props
+}) => {
+  return (
+    <Link to={to}>
+      <Button {...props} justifyContent="start" w="full">
+        <Text>{label}</Text>
+      </Button>
+    </Link>
+  )
+}

web/src/features/navbar/navbar.spec.tsx

+import * as RTL from '@redwoodjs/testing/web'
+
+import { Navbar } from './navbar'
+
+describe('HomePage', () => {
+  it('renders successfully', () => {
+    RTL.render(<Navbar />)
+
+    RTL.screen.getByText(/Componentes/i)
+  })
+})

web/src/features/navbar/navbar.stories.tsx

+import type { StoryObj } from '@storybook/react'
+
+import { Navbar } from './navbar'
+
+type Args = {}
+
+export default {
+  component: Navbar,
+}
+
+type Story = StoryObj<Args>
+
+export const Default: Story = {}

web/src/features/navbar/navbar.tsx

+import { Flex, Stack, Text } from '@chakra-ui/react'
+
+import { NavButton } from './nav-button'
+
+export const Navbar: React.FC = () => {
+  return (
+    <Flex as="section" minH="100vh" bg="bg.canvas">
+      <Flex
+        flex="1"
+        bg="bg.surface"
+        boxShadow="sm"
+        maxW={{ base: 'full', sm: 'xs' }}
+        py={{ base: '6', sm: '8' }}
+        px={{ base: '4', sm: '6' }}
+      >
+        <Stack justify="space-between" spacing="1" width="full">
+          <Stack spacing="8" shouldWrapChildren>
+            <Stack spacing="1">
+              <NavButton label="Inicio" to="/" />
+            </Stack>
+            <Stack>
+              <Text textStyle="sm" color="fg.subtle" fontWeight="medium">
+                Componentes
+              </Text>
+              <Stack spacing="1">
+                <NavButton label="Patrones" to="/patrones" />
+                <NavButton label="Implementaciones" to="/implementaciones" />
+                <NavButton label="Reportes" to="/reportes" />
+                <NavButton label="Test" to="/tests" />
+              </Stack>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Flex>
+    </Flex>
+  )
+}

web/src/layouts/layout.tsx

@@ -2,12 +2,15 @@ import React from 'react'
 
 import { Box, Container, Flex, HStack } from '@chakra-ui/react'
 
+import { Navbar } from 'src/features/navbar'
 import Routes from 'src/Routes'
 
 export const Layout: React.FC = () => {
   return (
     <HStack>
-      <Box bgColor="teal.50">{/* navbar */}</Box>
+      <Box bgColor="teal.50">
+        <Navbar />
+      </Box>
       <Flex h="100vh" flexGrow="1" bgColor="white">
         <Container maxW="lg" py="10" flexGrow="1">
           <Routes />

web/src/pages/HomePage/home-page.stories.tsx

-import type { Meta, StoryObj } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 
 import { HomePage } from './home-page'
 
-const meta: Meta = {
+export default {
   component: HomePage,
   title: 'Home',
 }
 
-export default meta
-
 export const Default: StoryObj<typeof HomePage> = {
   render: () => <HomePage />,
 }