Adding navigation and sidebar

frontend/public/images/360_F_106476142_zMZkkTkhMeq0DIjV20oJI00e3QXLYIGN.jpg:Zone.Identifier

@@ -0,0 +1,4 @@
+[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

frontend/src/app/components/navigation/index.tsx

@@ -0,0 +1,20 @@
+"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} />
+    </>
+  );
+};
+
+export default Navigation;

frontend/src/app/components/navigation/navbar/button.tsx

@@ -0,0 +1,6 @@
+const Button = () => {
+  return (
+    <button className="h-12 rounded-lg bg-white font-bold px-5">Sign In</button>
+  );
+};
+export default Button;

frontend/src/app/components/navigation/navbar/index.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import Link from "next/link";
+import Logo from "./logo";
+import Button from "./button";
+
+const Navbar = ({ toggle }: { toggle: () => void }) => {
+  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">
+                  <p>Albums</p>
+                </Link>
+              </li>
+            </ul>
+            <div className="hidden md:block">
+              <Button />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Navbar;

frontend/src/app/components/navigation/navbar/logo.tsx

@@ -0,0 +1,56 @@
+"use client";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import Button from "./button";
+
+const Logo = () => {
+  const [width, setWidth] = useState(0);
+
+  const updateWidth = () => {
+    const newWidth = window.innerWidth;
+    setWidth(newWidth);
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", updateWidth);
+    updateWidth();
+  }, []);
+
+  const [showButton, setShowButton] = useState(false);
+
+  const changeNavButton = () => {
+    if (window.scrollY >= 400 && window.innerWidth < 768) {
+      setShowButton(true);
+    } else {
+      setShowButton(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", changeNavButton);
+  }, []);
+
+  return (
+    <>
+      <Link href="/" style={{ display: showButton ? "none" : "block" }}>
+        <Image
+          src="/images/logo.jpg"
+          alt="Logo"
+          width={width < 1024 ? "150" : "250"}
+          height={width < 1024 ? "150" : "250"}
+          className="relative"
+        />
+      </Link>
+      <div
+        style={{
+          display: showButton ? "block" : "none",
+        }}
+      >
+        <Button />
+      </div>
+    </>
+  );
+};
+
+export default Logo;

frontend/src/app/components/navigation/sidebar/index.tsx

@@ -0,0 +1,56 @@
+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;

frontend/src/app/globals.css

@@ -1,26 +1,3 @@
-@import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Navigation from './components/navigation';
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -27,6 +28,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        <Navigation />
         {children}
       </body>
     </html>