Merge pull request #46 from csesoc/I2-14/sticky-nav

[I2-14] - Standardised navbar across all pages

Author: dlynz

frontend/src/components/Landing/index.tsx

@@ -1,13 +1,12 @@
 import Background from '@/components/Background';
-import Navbar from '@/components/Navbar';
 
 const Landing = () => {
   return (
     <section
-      className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden"
+      className="flex flex-col min-h-screen justify-end py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden"
       id="landing"
     >
-      <Navbar />
+      
       <Background />
       <div className="flex justify-between items-end">
         <div>

frontend/src/components/Layout.tsx

@@ -4,10 +4,14 @@ import React from 'react';
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
+    <section className="flex flex-col min-h-screen justify-between py-8 relative">
       <Navbar />
-      {children}
-      <Footer />
+      
+      <div className='xl:px-24 md:px-10 px-5 '>
+        {children}
+        <Footer />
+      </div>
+      
     </section>
   );
 };

frontend/src/components/Navbar.tsx

@@ -12,7 +12,7 @@ const Navbar = () => {
   }, []);
 
   return (
-    <nav className="flex justify-between items-center relative z-10">
+    <nav className="sticky top-0 flex justify-between items-center relative z-10 shadow-lg rounded-md bg-black/15 backdrop-blur-md xl:px-24 md:px-10 px-5 py-6">
       <Link href="/">
         <Image
           src="/assets/csesoc_logo.svg"

frontend/src/pages/404.tsx

@@ -3,7 +3,7 @@ import Navbar from '@/components/Navbar';
 
 export default function Custom404() {
   return (
-    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
+    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative">
       <div className="items-center text-center">
         <Navbar />
         <h1 className="text-5xl font-bold pt-24">404 - Page Not Found</h1>

frontend/src/pages/events.tsx

@@ -5,10 +5,14 @@ import Events from '@/components/Event';
 
 export default function EventsPage() {
   return (
-    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
+    <section className="flex flex-col min-h-screen justify-between py-8 relative">
       <Navbar />
-      <Events/>
-      <Footer />
+      
+      <div className='xl:px-24 md:px-10 px-5 '>
+        <Events/>
+        <Footer />
+      </div>
+      
     </section>
   );
 }

frontend/src/pages/index.tsx

@@ -1,3 +1,4 @@
+import Navbar from '@/components/Navbar';
 import Landing from '@/components/Landing';
 import Sponsors from '@/components/Sponsors/index';
 import AboutHomePage from '@/components/About/AboutHomepage';
@@ -6,10 +7,17 @@ import EventsBrief from '@/components/Event/EventsBrief';
 export default function HomePage() {
   return (
     <section>
-      <Landing />
-      <AboutHomePage />
-      <EventsBrief />
-      <Sponsors />
+        <div className="h-8"></div>
+        
+        <Navbar />
+
+        <div className="-mt-36">
+            <Landing />
+        </div>
+
+        <AboutHomePage />
+        <EventsBrief />
+        <Sponsors />
     </section>
   );
 }