v.korobtsev/vkorobtsev-nextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[first commit] head page and layout

Browse source
This commit is contained in:
Alvalen 2023-08-30 19:06:48 +07:00
parent e6273abfbd
commit 54a7c858e3
10 changed files with 391 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

88
components/Navbar.js Normal file
View file

@ -0,0 +1,88 @@
"use client";
import { useRef, useState } from "react";
const Navbar = () => {
const navRef = useRef(null);
const [isNavOpen, setIsNavOpen] = useState(false);
const toggleNav = () => {
setIsNavOpen(!isNavOpen);
};
return (
<>
<nav
ref={navRef}
className={`navbar px-5 md:px-24 w-screen fixed inset-0 backdrop-blur-sm opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
<div className="">
<h1 className="text-2xl">Alvalens</h1>
</div>
{/* toggler */}
<div className="flex flex-row items-center">
<button
className="burger button flex flex-col justify-center items-center space-y-2"
onClick={toggleNav}>
<div
className={`w-8 h-1 bg-black rounded-full
}`}></div>
<div
className={`w-8 h-1 bg-black rounded-full`}></div>
<div
className={`w-8 h-1 bg-black rounded-full`}></div>
</button>
</div>
</nav>
{/* items */}
<NavItems
isNavOpen={isNavOpen}
navRef={navRef}
setIsNavOpen={setIsNavOpen}
/>
</>
);
};
export default Navbar;
const NavItems = ({ isNavOpen, navRef, setIsNavOpen }) => {
const closeNav = () => {
navRef.current.classList.remove("bg-gray-700");
setIsNavOpen(false);
};
return (
<div
className={`fixed z-50 w-full h-screen flex m-auto items-center justify-center backdrop-blur-sm ${
isNavOpen ? "" : "opacity-0 pointer-events-none"
}`}>
<div className="relative backdrop-blur-sm opacity-95 m-auto flex flex-col items-center space-x-8 min-h-[80vh] bg-gray-700 min-w-[90vw] rounded-3xl">
{/* close buton */}
<div className="absolute top-0 right-0 m-4">
<button className=" button" onClick={closeNav}>
<div className="w-8 h-1 bg-white rounded-full rotate-45 transform translate-x-[2px] translate-y-1 "></div>
<div className="w-8 h-1 bg-white rounded-full -rotate-45 transform translate-x-[2px]"></div>
</button>
</div>
<div className="flex flex-col items-center space-y-8 m-auto">
{/* title */}
<h1 className="text-6xl font-bold text-white">Menu</h1>
<a href="#home" className="text-2xl font-bold text-white">
<h2>Home</h2>
</a>
<a href="#about" className="text-2xl font-bold text-white">
<h2>About</h2>
</a>
<a
href="#project"
className="text-2xl font-bold text-white">
<h2>Projects</h2>
</a>
<a
href="#contact"
className="text-2xl font-bold text-white">
<h2>Contact</h2>
</a>
</div>
</div>
</div>
);
};

57
components/Sidebar.js Normal file
View file

@ -0,0 +1,57 @@
"use client";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faHome,
faUser,
faFolderOpen,
faEnvelope,
} from "@fortawesome/free-solid-svg-icons";
import { fullpageApi } from "@fullpage/react-fullpage";
const Sidebar = () => {
const handleMoveToSection = (index) => {
fullpage_api.moveTo(index);
fullpage_api.getActiveSection();
};
const containIsActive = (index) => {
if (fullpage_api.getActiveSection().index === index) {
return "bg-gray-500";
}
return "";
};
return (
<div className="fixed z-50 bg-gray-600 h-[50vh] w-14 flex flex-col justify-between items-center p-4 left-0 top-1/4 rounded-e-3xl">
<ul className="flex flex-col justify-center items-center h-full space-y-16 text-gray-200">
<li>
<button onClick={() => handleMoveToSection(1)}>
<FontAwesomeIcon icon={faHome} className="text-xl" />
</button>
</li>
<li>
<button onClick={() => handleMoveToSection(2)}>
<FontAwesomeIcon icon={faUser} className="text-xl" />
</button>
</li>
<li>
<button onClick={() => handleMoveToSection(3)}>
<FontAwesomeIcon
icon={faFolderOpen}
className="text-xl"
/>
</button>
</li>
<li>
<button onClick={() => handleMoveToSection(4)}>
<FontAwesomeIcon
icon={faEnvelope}
className="text-xl"
/>
</button>
</li>
</ul>
</div>
);
};
export default Sidebar;