Navbar#13
Conversation
FaizBShah
left a comment
FaizBShah
left a comment
There was a problem hiding this comment.
You can delete the Navbar.types.ts file as its not being used. Also, a lot of styling issues is occuring due to the ul elements. Also, don't use float in css for styling. Try to use flexbox or css grid instead.
| import { NavbarProps as Props } from "./Navbar.types"; | ||
| import styles from "./styles/Navbar.module.scss"; | ||
| import { FC } from 'react' | ||
| import { NavbarProps as Props } from "./Navbar.types" |
There was a problem hiding this comment.
Remove this line: import { NavbarProps as Props } from "./Navbar.types" as we are not using any props for this component
| import { NavbarProps as Props } from "./Navbar.types" | ||
| import styles from "./styles/Navbar.module.scss" | ||
|
|
||
| const Navbar: FC<Props> = ({}) => { |
There was a problem hiding this comment.
| const Navbar: FC<Props> = ({}) => { | |
| const Navbar: FC = () => { |
Change it like this as suggested
| return ( | ||
| <div> | ||
| <div className={styles.navbar}> | ||
| <ul> |
There was a problem hiding this comment.
Don't use <ul> here. Its used when you when want to list items. Also <ul> can only have <li> as child elements. So you cannot add img or another ul inside it. Use a div instead.
| <div className={styles.navbar}> | ||
| <ul> | ||
| <img className={styles.logo} src="public/images/logo.svg"></img> | ||
| <ul className={styles.left}>Squeryll</ul> |
There was a problem hiding this comment.
Same as above. Use div instead.
| <div> | ||
| <div className={styles.navbar}> | ||
| <ul> | ||
| <img className={styles.logo} src="public/images/logo.svg"></img> |
There was a problem hiding this comment.
| <img className={styles.logo} src="public/images/logo.svg"></img> | |
| <img className={styles.logo} src="images/logo.svg"></img> |
| <div> | ||
| <Navbar/> | ||
| </div> |
There was a problem hiding this comment.
| <div> | |
| <Navbar/> | |
| </div> | |
| <> | |
| <Navbar/> | |
| </> |
That div was just adding an unnecessary element in the DOM. Use Fragments instead for such cases.
2 participants
Issue #7