Merge pull request #134 from frontendcafe/main-fix/131-fix-navbar-des…

…ktop Main fix/131 fix navbar desktop
frontendcafe · Sep 9, 2022 · e7d36eb · e7d36eb
2 parents 0825d97 + af566a5
commit e7d36eb
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 28 deletions.
diff --git a/modules/shared/components/Menu/Menu.tsx b/modules/shared/components/Menu/Menu.tsx
@@ -17,8 +17,8 @@ import Hamburguer from "../Icons/Hamburguer";
 import MenuLogo from "../Icons/MenuLogo";
 
 const Links = [
-  { title: "Colecciones", href: "/" },
-  { title: "Sesión de estudio", href: "/SesiónEstudio" },
+  { title: "Colecciones", href: "/collections" },
+  { title: "Sesión de estudio", href: "/study-sessions" },
   { title: "Tienda", href: "/Tienda" },
   { title: "Perfil", href: "/Perfil" },
 ];
@@ -32,11 +32,19 @@ const Menu = () => {
         <Box>
           <MenuLogo fill="white" width={18} height={23} borderColor="primary.100" borderWidth={7} />
         </Box>
-        <Box onClick={onOpen} cursor="pointer">
+        <Box onClick={onOpen} cursor="pointer" display={{ lg: "none" }}>
           <Hamburguer />
         </Box>
+        <Box display={{ base: "none", lg: "flex" }}>
+          {Links.map((link) => (
+            <Text variant="navbar">
+              <Link href={link.href}>
+                <a>{link.title}</a>
+              </Link>
+            </Text>
+          ))}
+        </Box>
       </Flex>
-
       <Drawer onClose={onClose} isOpen={isOpen} size={{ base: "full", md: "sm" }}>
         <DrawerOverlay />
         <DrawerContent bg="primary.100">
@@ -49,13 +57,13 @@ const Menu = () => {
               borderColor="primary.100"
               borderWidth={2}
             />
-            {Links.map((link) => {
-              return (
-                <Text variant="menu" key={link.href}>
-                  <Link href={link.href}>{link.title}</Link>
-                </Text>
-              );
-            })}
+            {Links.map((link) => (
+              <Text variant="drawer">
+                <Link href={link.href}>
+                  <a>{link.title}</a>
+                </Link>
+              </Text>
+            ))}
           </DrawerBody>
         </DrawerContent>
       </Drawer>

diff --git a/modules/shared/theme/index.ts b/modules/shared/theme/index.ts
@@ -39,22 +39,7 @@ const colors: CustomColors = {
 };
 
 const components: Theme["components"] = {
-  Text: {
-    variants: {
-      menu: {
-        textAlign: "center",
-        color: "white",
-        fontWeight: 500,
-        fontSize: "1.5rem",
-        marginTop: "45px",
-      },
-      label: {
-        color: "label.50",
-        fontWeight: 600,
-        fontSize: "18px",
-      },
-    },
-  },
+
   Button: {
     baseStyle: {
       height: "auto",
@@ -101,6 +86,35 @@ const components: Theme["components"] = {
       size: "md",
     },
   },
+
+  Text: {
+    variants: {
+      label: {
+        color: "label.50",
+        fontWeight: 600,
+        fontSize: "18px",
+      },
+      drawer: {
+        textAlign: "center",
+        color: "white",
+        fontWeight: 500,
+        fontSize: "20px",
+        marginTop: "45px",
+      },
+      navbar: {
+        textAlign: "center",
+        color: "gray.300",
+        fontWeight: 400,
+        fontSize: "19px",
+        borderBottom: "3px solid white",
+        ml: "60px",
+        _hover: {
+          color: "primary.100",
+          borderBottom: "3px solid",
+        },
+      },
+    },
+  },
 
   Textarea: {
     // style object for base or default style

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -3,6 +3,7 @@ import Head from "next/head";
 import nookies from "nookies";
 
 import { verifyIdToken } from "@/firebaseAdminConfig";
+import LogoutButton from "@/modules/Auth/components/LogoutButton";
 import MyCollectionsPage from "@/modules/Collections/MyCollectionsPage";
 import Menu from "@/modules/shared/components/Menu/Menu";
 
@@ -14,11 +15,12 @@ const Home: NextPage & { requiresAuthentication: boolean } = () => {
         <meta name="description" content="Flashcards study app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
       <div>
         <Menu />
         <MyCollectionsPage />
       </div>
+      <LogoutButton />
+      <MyCollectionsPage />
     </div>
   );
 };