layout prblemes

zbjs · Nov 20, 2024 · ee95072 · ee95072
1 parent ea6fe61
commit ee95072
Show file tree

Hide file tree

Showing 8 changed files with 421 additions and 153 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,18 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "flowbite-react": "^0.10.2",
+    "framer-motion": "^11.11.17",
+    "next": "14.2.18",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.18"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.18",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.18"
+    "typescript": "^5"
   }
 }
diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
@@ -1,16 +1,3 @@
-export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js',
-}
+import RootLayout from "@/layouts/RootLayout";
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  )
-}
+export default RootLayout;
diff --git a/src/components/pages/home/Home.tsx b/src/components/pages/home/Home.tsx
@@ -1,8 +1,18 @@
 import React from 'react'
+import { Alert } from "flowbite-react";
+import Navbar from '@/components/ui/Navbar';
+
+
 
 const Home = () => {
   return (
-    <div>Home</div>
+    <div>
+
+<Alert color="info">Alert!</Alert>;
+
+
+
+    </div>
   )
 }
 

diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const menuItems = [
+  { label: 'Home', href: '#home' },
+  { label: 'About', href: '/about' },
+  { label: 'Services', href: '#services' },
+  { label: 'Contact', href: '#contact' },
+];
+
+const Navbar: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => setIsOpen((prev) => !prev);
+
+  return (
+    <nav className="bg-gray-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <div className="flex items-center">
+            <div className="flex-shrink-0">
+              <img
+                className="h-8 w-8"
+                src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
+                alt="Workflow"
+              />
+            </div>
+            {/* Desktop Menu */}
+            <div className="hidden md:flex ml-10 space-x-4">
+              {menuItems.map((item) => (
+                <a
+                  key={item.href}
+                  href={item.href}
+                  className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
+                >
+                  {item.label}
+                </a>
+              ))}
+            </div>
+          </div>
+
+          {/* Mobile Menu Toggle */}
+          <div className="flex md:hidden">
+            <button
+              onClick={toggleMenu}
+              className="text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
+              aria-expanded={isOpen}
+            >
+              <span className="sr-only">Open main menu</span>
+              {isOpen ? (
+                <svg
+                  className="h-6 w-6"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              ) : (
+                <svg
+                  className="h-6 w-6"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M4 6h16M4 12h16M4 18h16"
+                  />
+                </svg>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="md:hidden bg-gray-700"
+          >
+            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+              {menuItems.map((item) => (
+                <a
+                  key={item.href}
+                  href={item.href}
+                  className="block text-gray-300 hover:bg-gray-600 hover:text-white px-3 py-2 rounded-md text-base font-medium"
+                  onClick={() => setIsOpen(false)} // Close menu on selection
+                >
+                  {item.label}
+                </a>
+              ))}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/src/layouts/HomeLayout.tsx b/src/layouts/HomeLayout.tsx
@@ -2,16 +2,16 @@ import React from 'react'
 import "@/styles/globals.css";
 // import TopNavbar from "@/components/pages/Home/TopNavbar";
 
-
 export default async function HomeLayout({
     children,
   }: Readonly<{
     children: React.ReactNode;
   }>) {
     return (   
             <div>
-             
+
               <main className="flex-grow container mx-auto px-4 pt-20">
+
                 {children}
               </main>
 

diff --git a/src/layouts/RootLayout.tsx b/src/layouts/RootLayout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "@/styles/globals.css";
+import Navbar from '@/components/ui/Navbar';
+
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -18,7 +20,11 @@ export default async function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
+        <Navbar />
+        <div className="flex-grow container mx-auto px-4 pt-20">
         {children}
+        </div>
+
       </body>
     </html>
   );

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,10 +1,13 @@
 import type { Config } from "tailwindcss";
+import flowbite from "flowbite-react/tailwind";
+
 
 const config: Config = {
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    flowbite.content(),
   ],
   theme: {
     extend: {
@@ -14,6 +17,8 @@ const config: Config = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    flowbite.plugin(),
+  ],
 };
 export default config;