navbar: added navbar to AppLayout to make it available app-wide

fixes: #121
shivansh-bhatnagar18 · Jun 18, 2024 · 7169c20 · 7169c20
1 parent 94de7c0
commit 7169c20
Showing 6 changed files with 7 additions and 7 deletions.
diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
@@ -26,7 +26,7 @@ const Navbar: React.FC = () => {
 
     return (
         <div>
-            <div className="flex justify-between items-center p-4 ml-4 mt-4 mr-2 relative z-10">
+            <div className="flex justify-between items-center p-4 ml-4 mt-4 mr-2 fixed z-10 w-full">
                 <div className="space-x-4">
                     <button onClick={toggleMenu}>
                         <img

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -4,6 +4,10 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+    overflow: hidden;
+}
+
 ::-webkit-scrollbar {
     width: 16px;
 }

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

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -1,7 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { useState } from 'react';
 import Button from '../library/button';
-import Navbar from '../Navbar';
 import Modal from '../library/modal';
 import '../index.css';
 
@@ -22,7 +21,6 @@ const Home: React.FC = () => {
 
     return (
         <div className="min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative">
-            <Navbar />
             <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

diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import Button from '../library/button';
 import Input from '../library/input';
-import Navbar from '../Navbar';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import '../index.css';
@@ -34,7 +33,6 @@ const Login: React.FC = () => {
     return (
         <>
             <div className="min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative">
-                <Navbar />
                 <div className=" w-full flex justify-center items-center grow">
                     <div className="flex flex-col justify-center items-center">
                         {/* <div className='flex justify-center'>

diff --git a/frontend/src/pages/SignUp.tsx b/frontend/src/pages/SignUp.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import Button from '../library/button';
 import Input from '../library/input';
-import Navbar from '../Navbar';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import '../index.css';
@@ -44,7 +43,6 @@ const SignUp: React.FC = () => {
     return (
         <>
             <div className="min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative">
-                <Navbar />
                 <div className=" w-full flex justify-center items-center grow">
                     <div className="flex flex-col justify-center items-center">
                         {/* <div className='flex justify-center'>