Removing sidebar
All checks were successful
Music Collection CI Workflow / test (./backend) (push) Successful in 22s
Music Collection CI Workflow / test (./frontend) (push) Successful in 19s
Music Collection CI Workflow / build-and-push-images (./backend/Dockerfile, git.anatid.net/tabris/msuic-collection-backend, ./backend) (push) Successful in 48s
Music Collection CI Workflow / build-and-push-images (./frontend/Dockerfile, git.anatid.net/tabris/music-collection-frontend, ./frontend) (push) Successful in 1m13s
Music Collection CI Workflow / deploy (push) Successful in 23s
All checks were successful
Music Collection CI Workflow / test (./backend) (push) Successful in 22s
Music Collection CI Workflow / test (./frontend) (push) Successful in 19s
Music Collection CI Workflow / build-and-push-images (./backend/Dockerfile, git.anatid.net/tabris/msuic-collection-backend, ./backend) (push) Successful in 48s
Music Collection CI Workflow / build-and-push-images (./frontend/Dockerfile, git.anatid.net/tabris/music-collection-frontend, ./frontend) (push) Successful in 1m13s
Music Collection CI Workflow / deploy (push) Successful in 23s
This commit is contained in:
parent
531b1cd2f2
commit
351b0542ca
@ -1,4 +0,0 @@
|
||||
[ZoneTransfer]
|
||||
ZoneId=3
|
||||
ReferrerUrl=https://t4.ftcdn.net/jpg/01/06/47/61/360_F_106476142_zMZkkTkhMeq0DIjV20oJI00e3QXLYIGN.jpg
|
||||
HostUrl=https://t4.ftcdn.net/jpg/01/06/47/61/360_F_106476142_zMZkkTkhMeq0DIjV20oJI00e3QXLYIGN.jpg
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
@ -1,18 +1,10 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import Navbar from "./navbar";
|
||||
import Sidebar from "./sidebar";
|
||||
|
||||
const Navigation = () => {
|
||||
// toggle sidebar
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const toggle = () => {
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Sidebar isOpen={isOpen} toggle={toggle} />
|
||||
<Navbar toggle={toggle} />
|
||||
<Navbar />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -3,30 +3,13 @@ import Link from "next/link";
|
||||
import Logo from "./logo";
|
||||
import Button from "./button";
|
||||
|
||||
const Navbar = ({ toggle }: { toggle: () => void }) => {
|
||||
const Navbar = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-20 bg-emerald-800 sticky top-0">
|
||||
<div className="container mx-auto px-4 h-full">
|
||||
<div className="flex justify-between items-center h-full">
|
||||
<Logo />
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center md:hidden"
|
||||
onClick={toggle}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul className="hidden md:flex gap-x-6 text-white ">
|
||||
<li>
|
||||
<Link href="/album">
|
||||
|
@ -1,56 +0,0 @@
|
||||
import Link from "next/link";
|
||||
|
||||
const Sidebar = ({
|
||||
isOpen,
|
||||
toggle,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
toggle: () => void;
|
||||
}): React.JSX.Element => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="sidebar-container fixed w-full h-full overflow-hidden justify-center bg-white grid pt-[120px] left-0 z-10"
|
||||
style={{
|
||||
opacity: `${isOpen ? "1" : "0"}`,
|
||||
top: ` ${isOpen ? "0" : "-100%"}`,
|
||||
}}
|
||||
>
|
||||
<button className="absolute right-0 p-5" onClick={toggle}>
|
||||
{/* Close icon */}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<ul className="sidebar-nav text-center leading-relaxed text-xl">
|
||||
<li>
|
||||
<Link href="/about" onClick={toggle}>
|
||||
<p>About Us</p>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/services" onClick={toggle}>
|
||||
<p>Services</p>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contacts" onClick={toggle}>
|
||||
<p>Contacts</p>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
Loading…
x
Reference in New Issue
Block a user