Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions components/commons/Navbar/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,24 @@
import { FC } from "react";
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"

@FaizBShah FaizBShah Apr 1, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this line: import { NavbarProps as Props } from "./Navbar.types" as we are not using any props for this component

import styles from "./styles/Navbar.module.scss"

const Navbar: FC<Props> = ({}) => {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const Navbar: FC<Props> = ({}) => {
const Navbar: FC = () => {

Change it like this as suggested

return <div>Navbar here</div>;
return (
<div>
<div className={styles.navbar}>
<ul>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<img className={styles.logo} src="public/images/logo.svg"></img>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<img className={styles.logo} src="public/images/logo.svg"></img>
<img className={styles.logo} src="images/logo.svg"></img>

<ul className={styles.left}>Squeryll</ul>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above. Use div instead.

<li><a href="#">Product</a>
<a href="#">Docs</a>
<a href="#">Pricing</a>
<a href="#">Blog</a>
<a href="#">Support</a>
<a href="#">Log in</a>
<button type="button">Sign up</button></li>
</ul>
</div>
</div>);
};

export default Navbar;
60 changes: 60 additions & 0 deletions components/commons/Navbar/styles/Navbar.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
@import url('https://fonts.googleapis.com/css?family=Inter');
.navbar{
background-color:black;
top:0;
left:0;
width:100%;
position:fixed;
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-size: 14px;
}

.navbar ul.left{
color:white;
float:left;
margin-left: 40px;
}

.navbar button{
background-color: #EBAA15;
text-decoration: none;
float:right;
text-align: center;
border-radius: 25px;
padding-left:10px;
padding-right:10px;
padding-top: 5px;
padding-bottom: 5px;
margin-right: 100px;
margin-top: -3px;
color:#010200;
display: flex;
flex-direction: row;
align-items: flex-start;
border:none;
}

.navbar a{
padding-left: 30px;
text-decoration:none;
color:white;
}

.navbar a:first-child{
padding-left: 300px;
}

.navbar a:nth-last-child(2){
padding-left:300px;
padding-right: 30px;
}

.logo{
position: relative;
float:left;
position: absolute;
top:10px;
margin-left: 50px;
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@
"sass": "^1.59.2",
"typescript": "4.9.5"
}
}
}
5 changes: 4 additions & 1 deletion pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import Navbar from "../components/commons/Navbar/Navbar"
export default function Home() {
return (
<div>Squeryll</div>
<div>
<Navbar/>
</div>
Comment on lines +4 to +6

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div>
<Navbar/>
</div>
<>
<Navbar/>
</>

That div was just adding an unnecessary element in the DOM. Use Fragments instead for such cases.

)
}
3 changes: 3 additions & 0 deletions public/images/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.