Added menu and content sample

app/components/BoxContent/BoxContent.stories.jsx

@@ -0,0 +1,27 @@
+import styles from './page.module.css';
+
+function BoxContent({ visible }) {
+  return (
+    <div
+      style={{ visibility: visible ? "visible" : "hidden" }}
+      className={styles.box}
+    > CONTENT </div>
+  );
+}
+
+export default {
+  component: BoxContent
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Desktop = {
+  render: () => <BoxContent visible/>
+};
+
+export const Mobile = {
+  render: () => <BoxContent visible/>
+};

app/components/BoxContent/page.module.css

@@ -0,0 +1,5 @@
+.box{
+  position: absolute;
+  right: 1rem;
+  background-color: red;
+}

app/components/Lang/test/LangTest.test.jsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from "@testing-library/user-event";
+import '@testing-library/jest-dom';
+import Lang from '../../Lang/Lang.stories';
+
+function setup(jsx) {
+  return {
+    lang: userEvent.setup(),
+    ...render(jsx),
+  };
+}
+
+test("Should renders successfully with EN and PT-BR languages", async () => {
+  const { lang } = setup(<Lang.component onSelectLanguage={()=>{}} />);
+
+  const expectedElementPtBR = screen.getByRole("option", { name: "Portuguese" }).selected;
+  expect(expectedElementPtBR).toBe(true);
+  expect(screen.getByRole("combobox")).toHaveValue("pt-br");
+
+  await lang.selectOptions(screen.getByRole("combobox"), "en");
+  const expectedElementEN = screen.getByRole("option", { name: "English" }).selected;
+  expect(expectedElementEN).toBe(true);
+})

app/components/Menu/Menu.stories.jsx

@@ -0,0 +1,66 @@
+import { Roboto_Mono } from 'next/font/google'
+import styles from './page.module.css'
+import en from './lang/en.json'
+import ptbr from './lang/pt-br.json'
+import socialmedia from './socialmedia.json'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+function Menu({lang, onClickStatus}) {
+  const list = (lang == 'en' ? en : ptbr).map((language) => 
+  <li 
+    key={language.id}
+    onClick={() => onClickStatus()}>
+  {language.content}
+</li>);
+
+  const socialMediaList = socialmedia.map((social) =>
+    <Link
+      key={social.id}
+      href={social.href}
+      target="_blank"
+      className={styles.menuSocialMedia}>
+      <Image
+        src={social.icon}
+        width={20}
+        height={20}
+        alt={social.alt} />
+    </Link>
+    )
+  return (
+    <div className={`${styles.menu} ${roboto_mono.className}`}>
+      <ol className={styles.menuList}>
+        {list}
+      </ol>
+      {socialMediaList}
+    </div>
+  );
+}
+
+export default {
+  component: Menu,
+  argTypes: {
+    lang: {
+      control: 'radio',
+      options: ['en', 'pt-br']
+    }
+  },
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Desktop = {
+  render: ({ lang }) => <Menu lang={lang} component={<></>}/>
+};
+
+export const Mobile = {
+  render: ({ lang }) => <Menu lang={lang} component={<></>}/>
+};

app/components/Menu/lang/en.json

@@ -0,0 +1,27 @@
+[
+  {
+    "id": "101",
+    "content": "Home",
+    "href": "/"
+  },
+  {
+    "id": "102",
+    "content": "Dev/TechLead",
+    "href": "/dev"
+  }, 
+  {
+    "id": "103",
+    "content": "Personal/Travel",
+    "href": "/personal"
+  }, 
+  {
+    "id": "104",
+    "content": "CV",
+    "href": "/CV"
+  }, 
+  {
+    "id": "105",
+    "content": "Contact",
+    "href": "/contact"
+  }
+]

app/components/Menu/lang/pt-br.json

@@ -0,0 +1,27 @@
+[
+  {
+    "id": "001",
+    "content": "Home",
+    "href": "/"
+  },
+  {
+    "id": "002",
+    "content": "Dev/TechLead",
+    "href": "/dev"
+  }, 
+  {
+    "id": "003",
+    "content": "Pessoal/Viagens",
+    "href": "/personal"
+  }, 
+  {
+    "id": "004",
+    "content": "CV",
+    "href": "/CV"
+  }, 
+  {
+    "id": "005",
+    "content": "Contato",
+    "href": "/contact"
+  }
+]

app/components/Menu/page.module.css

@@ -0,0 +1,13 @@
+.menu {
+  position: absolute;
+  left: 1.5rem;
+  color: #050505;
+}
+
+.menuList {
+  list-style-type:none;
+}
+
+.menuSocialMedia {
+  padding-right: 0.5rem;
+}

app/components/Menu/socialmedia.json

@@ -0,0 +1,23 @@
+[
+  {
+    "id": "1001",
+    "media": "instagram",
+    "href":  "https://www.instagram.com/enddefim/",
+    "alt": "Instagram icon",
+    "icon": "/instagram.png"
+  },
+  {
+    "id": "1002",
+    "media": "github",
+    "href":  "https://github.com/theendie/",
+    "alt": "Github icon",
+    "icon": "/github.png"
+  },
+  {
+    "id": "1003",
+    "media": "steam",
+    "href":  "https://steamcommunity.com/id/the_endi/",
+    "alt": "Steam icon",
+    "icon": "/steam.png"
+  }
+]

app/components/Menu/test/MenuTest.test.jsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Menu from '../../Menu/Menu.stories';
+
+test("Should renders successfully with the list of menu EN", async () => {
+  const menuList = ["Home", "Dev/TechLead", "Personal/Travel", "CV", "Contact"];
+
+  render(
+  <Menu.component 
+    lang="en" 
+    onClickStatus={()=>{}} />);
+
+    menuList.forEach((value)=>{
+      const regex = new RegExp(value, "i");
+      const element = screen.getByText(regex);
+      expect(element).toBeInTheDocument();
+    })
+})
+
+test("Should renders successfully with the list of menu PT-BR", async () => {
+  const menuList = ["Home", "Dev/TechLead", "Pessoal/Viagens", "CV", "Contato"];
+
+  render(
+  <Menu.component 
+    lang="pt-br" 
+    onClickStatus={()=>{}} />);
+
+    menuList.forEach((value)=>{
+      const regex = new RegExp(value, "i");
+      const element = screen.getByText(regex);
+      expect(element).toBeInTheDocument();
+    })
+})

app/components/Presentation/test/PresentationTest.test.jsx

@@ -1,31 +1,36 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Presentation from '../Presentation.stories';
-import media from '../media.json'
 
 test("Should renders successfully in english", () => {
-  render(<Presentation.component primary lang='en'/>);
+  render(<Presentation.component primary lang='en' />);
 
   const element = screen.getByText(/Hey, my name is Andressa/i);
 
   expect(element).toBeInTheDocument();
 })
 
 test("Should renders successfully in portuguese", () => {
-  render(<Presentation.component primary lang='pt-br'/>);
+  render(<Presentation.component primary lang='pt-br' />);
 
   const element = screen.getByText(/Olá! Meu nome é Andressa/i);
 
   expect(element).toBeInTheDocument();
 })
 
 test("Should renders successfully all the social media links", () => {
-  render(<Presentation.component primary lang='pt-br'/>);
-
-  media.links.forEach((socialmedia)=>{
-    const regex = new RegExp(socialmedia.media, "i");
-    const element = screen.getByText(/Linkedin/i);
-    expect(element).toBeInTheDocument();
+  const links = [
+    { "media": "Linkedin", "href": "https://www.linkedin.com/in/andressa-cruz-nepomuceno/" },
+    { "media": "Github", "href": "https://github.com/theendie" },
+    { "media": "Instagram", "href": "https://www.instagram.com/enddefim/" },
+    { "media": "Spotify", "href": "https://open.spotify.com/playlist/7hn6FZ0I1jinV3jL5LyEcK?si=a7718f924aa64240" }
+  ];
+
+  render(<Presentation.component primary lang='pt-br' />);
+
+  links.forEach((socialmedia) => {
+    const element = screen.getByRole('link', { name: socialmedia.media});
+    expect(element).toHaveAttribute('href', socialmedia.href);
   })
 
 })

app/page.js

@@ -2,31 +2,41 @@
 
 import Page from './components/Page/Page.stories'
 import Lang from './components/Lang/Lang.stories'
-import language from './language.json'
-import { useEffect, useState } from "react";
+import Menu from './components/Menu/Menu.stories'
+import BoxContent from './components/BoxContent/BoxContent.stories'
+
+import { useState } from "react";
 
 export default function Home() {
 
   const [language, setLanguage] = useState('pt-br');
 
-  // useEffect(() => {    
-  //   // Atualiza o título do documento usando a API do browser    
-  //   document.title = `Você clicou ${count} vezes`;  
-  // });
-
+  const [isVisible, setIsVisible] = useState(false);
+
   const handleLanguage = (langValue) => {
     setLanguage(langValue);
   }
 
+  const handleVisibility = () => {
+    console.log(!isVisible);
+    setIsVisible(!isVisible);
+  }
+
   return (
     <main>
       <Page.component>
-        AQUI: {language}
         <Lang.component onSelectLanguage={handleLanguage} />
-        {/* <Menu /> */}
+        <Menu.component
+          lang={language}
+          onClickStatus={handleVisibility} />
+        <BoxContent.component visible={isVisible}/>
+        {/* <div
+    style={{ visibility: visibility ? "visible" : "hidden" }}
+    className={style.box}
+  > AQUI </div> */}
         {/* <Content> */}
-          {/* <Post></Post> */}
-          {/* <Post></Post> */}
+        {/* <Post></Post> */}
+        {/* <Post></Post> */}
         {/* </Content> */}
       </Page.component>
     </main>

app/page.module.css

@@ -1,14 +0,0 @@
-.main {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  /* padding: 4rem; */
-  min-height: 100vh;
-
-  background-image: url("./assets/banner-multi.png");
-  /* filter: invert(1) */
-}
-
-.logo {
-  position: relative;
-}