➡️ 1027 navbar top right buttons #1034
Conversation
## About - Basic template wanting inputs - Used primary button as template - Need to fix text sizing
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hi 👋 Here's a preview environment 🚀 https://next-reworkd-agentgpt-1034.env.ergomake.link Environment Summary 📑
Here are your environment's logs For questions or comments, join Discord. Click here to disable Ergomake. |
- Made the width the same as the footer the right side is aligned but the the left isnt
next/src/components/NavLayout.tsx
Outdated
| <Disclosure as="nav" className="absolute top-0 z-50 w-full bg-transparent text-white"> | ||
| <Disclosure | ||
| as="nav" | ||
| className="hidden:overlay absolute top-0 z-50 w-full bg-transparent text-white" |
There was a problem hiding this comment.
Ideally we want to be using absolute as less as possible as this will cause problems down the road with small screens. I think we can do the header - content - footer all with flex
| {icon} | ||
| {children} |
There was a problem hiding this comment.
Maybe we should just make this children and pass everything in for max configurability :)
## not sure how to make it look okay without absolute
next/src/pages/landing-page.tsx
Outdated
| @@ -7,7 +7,7 @@ const HomePage = () => { | |||
| <NavLayout> | |||
| <div className="flex w-full justify-center"> | |||
| <div className="flex max-w-screen-2xl flex-col items-center justify-center overflow-x-hidden px-5 text-white"> | |||
| <div className="flex h-screen w-full flex-col items-start justify-center overflow-x-hidden px-4 text-white lg:pl-16"> | |||
There was a problem hiding this comment.
lets keep this. Good to have some padding
| import clsx from "clsx"; | ||
| import Button from "../ui/button"; | ||
| import type { ReactNode } from "react"; | ||
| import React from "react"; | ||
|
|
||
| type PrimaryButtonProps = { | ||
| children: ReactNode | string; | ||
| icon?: React.ReactNode; | ||
| onClick?: () => void; | ||
| }; | ||
| export default function NavbarContactButton({ children, onClick, icon }: PrimaryButtonProps) { | ||
| return ( | ||
| <Button | ||
| onClick={onClick} | ||
| className={clsx( | ||
| "flex h-8 items-center justify-center rounded-full pl-2 shadow-sm", | ||
| "ml-4 transition duration-200 ease-in-out hover:hover:bg-white/80", | ||
| "bg-white text-black" | ||
| )} | ||
| > | ||
| {children} | ||
| </Button> | ||
| ); | ||
| } |
There was a problem hiding this comment.
We should be reusing the same Button as the hero text. Why do we need to make custom ones?
next/src/components/NavLayout.tsx
Outdated
| <Menu as="div" className="relative ml-3"> | ||
| <div></div> | ||
| </Menu> | ||
| <div className="ml-auto hidden sm:ml-6 sm:flex sm:items-center"> |
There was a problem hiding this comment.
Why do we need the ml-auto?
##About
Used the primary buttons as a template,
Font styling not apply to button wondering if this was the correct approach
Still working on screen alignment for nav layout, Looking for review.