diff --git a/frontend/public/images/360_F_106476142_zMZkkTkhMeq0DIjV20oJI00e3QXLYIGN.jpg:Zone.Identifier b/frontend/public/images/360_F_106476142_zMZkkTkhMeq0DIjV20oJI00e3QXLYIGN.jpg:Zone.Identifier new file mode 100644 index 0000000..04cce26 --- /dev/null +++ b/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 diff --git a/frontend/public/images/logo.jpg.jpg b/frontend/public/images/logo.jpg.jpg new file mode 100644 index 0000000..0a48677 Binary files /dev/null and b/frontend/public/images/logo.jpg.jpg differ diff --git a/frontend/src/app/components/navigation/index.tsx b/frontend/src/app/components/navigation/index.tsx new file mode 100644 index 0000000..903b7a4 --- /dev/null +++ b/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 ( + <> + + + + ); +}; + +export default Navigation; diff --git a/frontend/src/app/components/navigation/navbar/button.tsx b/frontend/src/app/components/navigation/navbar/button.tsx new file mode 100644 index 0000000..a2a7866 --- /dev/null +++ b/frontend/src/app/components/navigation/navbar/button.tsx @@ -0,0 +1,6 @@ +const Button = () => { + return ( + + ); +}; +export default Button; diff --git a/frontend/src/app/components/navigation/navbar/index.tsx b/frontend/src/app/components/navigation/navbar/index.tsx new file mode 100644 index 0000000..4a59aee --- /dev/null +++ b/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 ( + <> +
+
+
+ + +
    +
  • + +

    Albums

    + +
    • +
+
+
+
+
+
+ + ); +}; + +export default Navbar; diff --git a/frontend/src/app/components/navigation/navbar/logo.tsx b/frontend/src/app/components/navigation/navbar/logo.tsx new file mode 100644 index 0000000..760c2b0 --- /dev/null +++ b/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 ( + <> + + Logo + +
+
+ + ); +}; + +export default Logo; diff --git a/frontend/src/app/components/navigation/sidebar/index.tsx b/frontend/src/app/components/navigation/sidebar/index.tsx new file mode 100644 index 0000000..27294aa --- /dev/null +++ b/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 ( + <> +
+ + +
    +
  • + +

    About Us

    + +
    • +
  • + +

    Services

    + +
    • +
  • + +

    Contacts

    + +
    • +
+
+ + ); +}; + +export default Sidebar; diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index a2dc41e..b5c61c9 100644 --- a/frontend/src/app/globals.css +++ b/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; diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 0593c0f..c5a3730 100644 --- a/frontend/src/app/layout.tsx +++ b/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({ + {children}