frontend: Created the Homepage with the hamburger

menu

I Created the home page with hamburger menu based
on the given figma design, i added the necessary
media in assets/src and also slightly modified
button component, also added some custom classes
in tailwind.config.js. I showed just for instance
the sidebar after login, which will be later
implemented.

Fixes: shivansh-bhatnagar18#78

frontend/src/Navbar.tsx

@@ -1,7 +1,113 @@
+import React, { useState } from 'react';
+import Button from './library/button';
 import './index.css';
 
-function Navbar() {
-    return <div className="flex flex-row">Navbar</div>;
-}
+type NavbarProps = {
+    isLoggedIn?: boolean;
+    username?: string;
+    onLogin?: () => void;
+    onLogout?: () => void;
+};
+
+const Navbar: React.FC<NavbarProps> = ({
+    isLoggedIn,
+    username = 'unknown',
+    onLogin,
+    onLogout,
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const toggleMenu = () => {
+        setIsOpen(!isOpen);
+    };
+
+    return (
+        <div>
+            <div className="flex justify-between items-center p-4 ml-4 mt-4 mr-2 relative z-10">
+                <div className="space-x-4">
+                    <button onClick={toggleMenu}>
+                        <img
+                            src="src/assets/hamburger.png"
+                            alt="hamburger menu"
+                            className="w-7 h-7 sm:w-6 sm:h-6 md:w-7 md:h-7 lg:w-9 lg:h-9"
+                        />
+                    </button>
+                </div>
+                <div className="text-xl font-bold mt-2">
+                    <Button
+                        text="Sign In /Login"
+                        buttonSize="w-56 h-11"
+                        className="border-4"
+                        rounded="rounded-2xl"
+                    />
+                </div>
+            </div>
+            {isOpen && (
+                <div className="fixed inset-0 flex z-20">
+                    <div className="bg-gray-300 text-black border-gray-600 w-64 p-4 shadow-lg pl-10 rounded-r-lg relative z-30">
+                        <button
+                            onClick={toggleMenu}
+                            className="absolute top-3 right-3"
+                        >
+                            <img
+                                src="src/assets/close.png"
+                                alt="Close menu"
+                                className="w-7 h-7 sm:w-8 sm:h-8 md:w-8 md:h-8 lg:w-10 lg:h-10"
+                            />
+                        </button>
+                        {isLoggedIn ? (
+                            <>
+                                <div className="mb-2 mt-20 text-2xl font-kavoon align-center text-stroke-2 text-white font-bold">
+                                    {username}
+                                </div>
+                                <Button
+                                    text="Logout"
+                                    onClick={onLogout}
+                                    className="border-4 mb-2 mt-5"
+                                    fontSize="text-2xl"
+                                    buttonSize="w-[170px] h-12"
+                                    px="px-0"
+                                />
+                            </>
+                        ) : (
+                            <>
+                                <Button
+                                    text="Login"
+                                    onClick={onLogin}
+                                    className="border-4 mb-2 mt-20"
+                                    fontSize="text-2xl"
+                                    buttonSize="w-[170px] h-12"
+                                    px="px-0"
+                                />
+                            </>
+                        )}
+                        <div className="mt-4">
+                            <Button
+                                text="About Us"
+                                className="border-4 mb-2"
+                                fontSize="text-2xl"
+                                buttonSize="w-[170px] h-12"
+                                px="px-0"
+                            />
+                        </div>
+                        <div className="mt-4">
+                            <Button
+                                text="Rules"
+                                className="border-4"
+                                fontSize="text-2xl"
+                                buttonSize="w-[170px] h-12"
+                                px="px-0"
+                            />
+                        </div>
+                    </div>
+                    <div
+                        className="flex-grow bg-black bg-opacity-50"
+                        onClick={toggleMenu}
+                    ></div>
+                </div>
+            )}
+        </div>
+    );
+};
 
 export default Navbar;

frontend/src/index.css

@@ -11,3 +11,17 @@ body::-webkit-scrollbar {
 .font-kavoon {
     font-family: 'Kavoon', 'serif';
 }
+
+.text-stroke {
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: black;
+    text-stroke-width: 1px;
+    text-stroke-color: black;
+}
+
+.text-stroke-2 {
+    -webkit-text-stroke-width: 1.5px;
+    -webkit-text-stroke-color: black;
+    text-stroke-width: 1.5px;
+    text-stroke-color: black;
+}

frontend/src/library/button.tsx

@@ -15,12 +15,12 @@ type ButtonProps = {
     fontSize?: string;
     rounded?: string;
     buttonSize?: string;
-    textStroke?: string;
     borderColor?: string;
     hoverColor?: string;
     hoverScale?: boolean;
     px?: string;
     py?: string;
+    className?: string;
     onClick?: () => void;
 };
 
@@ -29,21 +29,20 @@ const Button: React.FC<ButtonProps> = ({
     textColor = 'text-white',
     backgroundColor = 'bg-lime-500',
     fontSize = 'text-lg',
-    rounded = 'rounded-xl',
+    rounded = 'rounded-2xl',
     buttonSize = 'w-36 h-11',
     px = 'px-3',
     py = 'py-1',
-    textStroke,
     borderColor = 'border-black',
     hoverColor = 'hover:bg-lime-600',
     hoverScale = true,
     onClick,
+    className = '',
 }) => {
     return (
         <button
             onClick={onClick}
-            className={`shadow-xl border-3 ${borderColor} font-kavoon ${textColor} ${buttonSize} ${rounded} ${fontSize} ${px} ${py} ${backgroundColor} transition-all duration-300 ${hoverScale ? 'transform hover:scale-105' : ''} ${hoverColor}`}
-            style={{ textShadow: textStroke ? textStroke : 'none' }}
+            className={`text-stroke ${className} shadow-xl border-3 ${borderColor} font-kavoon ${textColor} ${buttonSize} ${rounded} ${fontSize} ${px} ${py} ${backgroundColor} transition-all duration-300 ${hoverScale ? 'transform hover:scale-105' : ''} ${hoverColor}`}
         >
             {text}
         </button>

frontend/src/pages/AppLayout.tsx

@@ -1,10 +1,8 @@
 import { Outlet } from 'react-router-dom';
-import Navbar from '../Navbar';
 
 function AppLayout() {
     return (
         <div>
-            <Navbar />
             <Outlet />
             {/* todo: Add a footer component */}
         </div>

frontend/src/pages/Home.tsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Button from '../library/button';
-import Heading from '../library/heading';
+import Navbar from '../Navbar';
 import '../index.css';
 
 const Home: React.FC = () => {
-    const [gameCode, setGameCode] = useState('');
     const navigate = useNavigate();
     const CreateGame = () => {
         // Logic to create a game
@@ -15,73 +14,56 @@ const Home: React.FC = () => {
 
     const JoinGame = () => {
         // Logic to join a game
-        console.log('Join Game with code:', gameCode);
+        console.log('Join Game with code');
+    };
+
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    const [username, setUsername] = useState('');
+
+    const handleLogin = () => {
+        setUsername('Username_7');
+        setIsLoggedIn(true);
+    };
+
+    const handleLogout = () => {
+        setUsername('');
+        setIsLoggedIn(false);
     };
 
     return (
-        <div className="flex flex-col items-center justify-center h-screen bg-gradient-to-r from-neutral-950 via-red-950 to-neutral-950">
-            <div className="max-h-screen w-screen max-w-screen-md p-1 md:items-center md:justify-center">
-                <div className="flex items-center justify-center p-3 mb-10 ">
+        <div className="min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative">
+            <Navbar
+                isLoggedIn={isLoggedIn}
+                username={username}
+                onLogin={handleLogin}
+                onLogout={handleLogout}
+            />
+            <div className="flex flex-col items-center justify-center flex-grow">
+                <div className="w-[520px] h-[180px] sm:w-[600px] sm:h-[200px] md:w-[720px] md:h-[235px] lg:w-[900px] lg:h-[300px] overflow-hidden mt-4 mb-5">
                     <img
-                        src="/UNO_Logo.svg"
+                        src="src/assets/Uno-Logo.png"
                         alt="UNO Logo"
-                        className="h-12 w-auto mr-2"
-                    />
-                    <Heading
-                        text="Ready for Action?"
-                        fontSize="text-4xl"
-                        fontWeight="font-bold"
-                        textColor="text-white"
-                        fontStyle="font-serif"
+                        className="w-full h-full object-cover"
                     />
                 </div>
-                <div className="flex flex-col md:flex-row w-full md:max-w-screen-md space-y-10 md:space-y-0 md:space-x-10 p-10">
-                    <div className="bg-gradient-to-r from-red-700 via-red-700 to-red-700 flex-1 w-full p-5 border-2 border-spacing-2 border-opacity-80 border-red-950 rounded-xl shadow-md flex flex-col items-center">
-                        <div className="pb-12 pt-3">
-                            <Heading
-                                text="Create a new game"
-                                fontSize="text-3xl"
-                                fontWeight="font-bold"
-                                textColor="text-white"
-                                fontStyle="font-serif"
-                            />
-                        </div>
-                        <Button
-                            textStroke="1.5px 1px black"
-                            text="Start Game"
-                            onClick={CreateGame}
-                        />
-                    </div>
-                    <div className="bg-gradient-to-r from-red-700 via-red-700 to-red-700 flex-1 w-full p-3 border-2 border-spacing-2 border-opacity-80 border-red-950 rounded-xl shadow-md flex flex-col items-center">
-                        <div className="pt-2 pb-2">
-                            <Heading
-                                text="Join an existing Game"
-                                fontSize="text-3xl"
-                                fontWeight="font-bold"
-                                textColor="text-white"
-                                fontStyle="font-serif"
-                            />
-                        </div>
-                        <div className="p-2 pb-2 w-full justify-self-center">
-                            <input
-                                placeholder="Enter the Game Code"
-                                value={gameCode}
-                                onChange={(e) => setGameCode(e.target.value)}
-                                className="border-2 border-red-600 rounded-lg p-1 mb-4 text-md w-full bg-black text-white"
-                            />
-                        </div>
-                        <Button
-                            buttonSize="w-64 h-9"
-                            py="py-0"
-                            textColor="text-white"
-                            text="Sign In using Google"
-                            backgroundColor="bg-gray-400"
-                            hoverColor="hover:bg-gray-500"
-                            textStroke="1.5px 1px black"
-                            onClick={JoinGame}
-                        />
-                    </div>
-                </div>
+                <Button
+                    text="Start Game"
+                    className="mb-6 w-48 border-4"
+                    buttonSize="w-[220px] h-16"
+                    fontSize="text-3xl"
+                    px="px-3"
+                    py="py-1"
+                    onClick={CreateGame}
+                />
+                <Button
+                    text="Join Game"
+                    className="mb-4 w-48 border-4"
+                    buttonSize="w-[220px] h-16"
+                    fontSize="text-3xl"
+                    px="px-3"
+                    py="py-1"
+                    onClick={JoinGame}
+                />
             </div>
         </div>
     );

frontend/tailwind.config.js

@@ -12,7 +12,12 @@ export default {
     },
     extend: {
       borderWidth: {
-        '3': '3px',
+        '3': "3px",
+      },
+    },
+    extend: {
+      backgroundImage: {
+        'uno-bg': "url('/src/assets/bg.jpg')",
       },
     },
   },