Skip to content

Commit

Permalink
Added Navbar component to Layout (#62)
Browse files Browse the repository at this point in the history 
Navbar added
  • Loading branch information
@deveshsawant05
deveshsawant05 authored Jul 26, 2024
1 parent e0d1ed0 commit cc20124
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 1 deletion.
2 changes: 2 additions & 0 deletions src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Inter } from "next/font/google";
import "./globals.css";
import { Analytics } from "@vercel/analytics/react"
import { SpeedInsights } from "@vercel/speed-insights/next"
import Navbar from "@/components/navbar"

const inter = Inter({ subsets: ["latin"] });

Expand All @@ -29,6 +30,7 @@ export default function RootLayout({
</head>

<body className={inter.className}>
<Navbar />
<Suspense fallback={<Loading />}>{children}</Suspense>
<Analytics />
<SpeedInsights />
Expand Down
2 changes: 1 addition & 1 deletion src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@ export default function Home() {
<h1>Home</h1>
</div>
);
}
}
57 changes: 57 additions & 0 deletions src/components/navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
"use client"
import React, { use, useState } from "react";
import "@/styles/navbar.css";
import Link from "next/link";

function Navbar() {
const [hiddenMenu,setHiddenMenu] = useState(true);
function MenuToggle(){
setHiddenMenu(!hiddenMenu);
}

const eventsLink = "/events";
const projectsLink = "/projects";
const membersLink = "/members";
const contactUsLink = "/contact_us";

return (
<>
<div id="pseudo"></div>
<div className="navbar">
<a href="/" className="logo-container">
<img className="logo-img" src="https://avatars.githubusercontent.com/u/9347727?s=200&v=4" alt="IIITV Logo" />
<h1 className="logo-title">Coding Club</h1>
</a>
<div className="menu-container">
<Link href={eventsLink} className="text-primary">Events</Link>
<Link href={projectsLink} className="text-primary">Projects</Link>
<Link href={membersLink} className="text-primary">Members</Link>
<Link href={contactUsLink} className="text-primary">Contact Us</Link>
</div>
<div className="mobile-menu">
<div className="menu-icon">
<input type="checkbox" id="hi" hidden onChange={MenuToggle} value={!hiddenMenu} />
<label className="menu" htmlFor="hi">
<div className="bar"></div>
<div className="bar"></div>
<div className="bar"></div>
</label>

</div>

<div className="mobile-menu-container" style={{display : (hiddenMenu ? "none" : "") }}>
<div className="mobile-menu-container2">
<p><Link href={eventsLink} className="text-primary">Events </Link></p>
<p><Link href={projectsLink} className="text-primary">Projects </Link></p>
<p><Link href={membersLink} className="text-primary">Members </Link></p>
<p><Link href={contactUsLink} className="text-primary">Contact Us </Link></p>
</div>
</div>

</div>
</div>
</>
);
}

export default Navbar;
143 changes: 143 additions & 0 deletions src/styles/navbar.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital@0;1&display=swap');

#pseudo{
width: 100%;
height: 65px;
}
.navbar{
height:65px;
width: 100%;
position: fixed;
float: left;
display: block;
top: 0px;
box-shadow: 0px 5px 29.4px rgba(0, 0, 0, 0.25);
background-color: var(--background);

display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 50px;
z-index: 10;
}
.navbar>*>*{
cursor: pointer;
transition: transform 0.3s;
}
.navbar>*>*:not(.mobile-menu-container):hover{
transform: scale(1.15);
}
.logo-container{
display: flex;
align-items: center;
gap: 15px;
transition: transform 0.3s;
}

.logo-img{
height: 50px;
cursor :pointer;
}

.logo-title{
font-family: "Noto Sans", sans-serif;
font-size: 30px;
letter-spacing: -0.05em;
}

.menu-container{
display: flex;
justify-content: space-evenly;
gap: 50px;
font-family: "Noto Sans", sans-serif;
font-size: 18px;
}

.mobile-menu{
display: none;
}
.mobile-menu-container{
position: fixed;
top: 75px;
right: 10px;
width: 200px;
height: 250px;
background: var(--primary-foreground);
box-shadow: 5px 5px 4.5px rgba(0, 0, 0, 0.25);
border: #ffbade59 solid 1px;
border-radius: 10px;
z-index: 100;
}

.mobile-menu-container2{
height: 100%;

display: flex;
flex-direction: column;
gap: 30px;
justify-content: center;
align-items: center;
}

@media screen and (max-width:860px){
.navbar{
padding: 0px 10px 0px 0px;
}
.logo-container{
scale: 75%;
margin: 0;
}
.menu-container{
display: none;
}
.mobile-menu-container{
display: block;
}
.mobile-menu{
display: block;
}

.menu {
transform: translate(-50%, -50%);
cursor: pointer;
transition: 0.5s ease;
height: 30px;
}
.menu:hover .bar {
box-shadow: 1px 1px 7px 1px RGBa(0, 0, 0, 0.3);
}
.menu .bar {
width: 25px;
height: 3px;
background: #fff;
box-shadow: 1px 1px 3px RGBa(0, 0, 0, 0.4);
border-radius: 2px;
transition: 0.4s ease;
}
.menu .bar:not(:first-child) {
margin-top: 5px;
}

#hi:checked + .menu {
transform: translate(-50%,50%) rotatey(180deg);
}
#hi:checked + .menu .bar {
transform: rotatey(180deg) rotatex(360deg);
}
#hi:checked + .menu .bar:first-child {
transform: rotate(-45deg);
margin-top: 5px;
}
#hi:checked + .menu .bar:nth-child(2) {
opacity: 0;
}
#hi:checked + .menu .bar:nth-child(3) {
margin-top: -11px;
transform: rotate(45deg);
}
.menu-icon{
scale : 80%;
margin-right: 10px;
}

}

1 comment on commit cc20124

@github-actions
Copy link

Choose a reason for hiding this comment

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

Deploy preview for iiitvcc ready!

✅ Preview
https://iiitvcc-cgi9iz0om-iiitv-coding-clubs-projects.vercel.app

Built with commit cc20124.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.