Skip to content

Home page Updates #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
RafaelCenzano wants to merge 8 commits into from
Closed

Home page Updates #81

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
af05138
updated home.js
athalm Sep 24, 2024
6857f57
home page update
athalm Sep 24, 2024
c20cbfe
Merge branch 'main' into home-page-mrunal
athalm Nov 22, 2024
960d3e9
Merge branch 'main' into home-page-mrunal
athalm Nov 23, 2024
1499b91
updated home page
athalm Nov 23, 2024
05bf50f
delete home.js
athalm Nov 23, 2024
48f8802
deleted extra footer
athalm Nov 23, 2024
1c2d574
updated nav bar
athalm Nov 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 50 additions & 46 deletions src/shared/components/Navigation/MainNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,74 +5,78 @@
import { useAuth } from "../../../context/AuthContext.tsx";

export default function MainNavigation() {

const { auth } = useAuth();

const location = useLocation().pathname;

const routes = auth.isAuthenticated
? [
{ name: "Jobs", href: "/jobs", current: true },
{ name: "Create", href: "/create", current: false },
{ name: "Staff", href: "/staff", current: false },
{ name: "Profile", href: "/profile", current: false },
{ name: "Sign Out", href: "/signout", current: false },
]
{ name: "Jobs", href: "/jobs", current: location === "/jobs" },
{ name: "Create", href: "/create", current: location === "/create" },
{ name: "Staff", href: "/staff", current: location === "/staff" },
{ name: "Profile", href: "/profile", current: location === "/profile" },
{ name: "Sign Out", href: "/signout", current: false },
]
: [{ name: "Sign In", href: "/signin", current: false }];

return (
<Disclosure as="nav" className="bg-slate-100">
<Disclosure as="nav" className="bg-white shadow-md sticky top-0 z-50">
{({ open }) => (
<>
<div className="mainnav sm:px-6 lg:px-8">
<div className="mainnav-header">
<div className="mainnav-desc sm:hidden">
{/* Mobile menu button*/}
<Disclosure.Button className="btn-disclosure hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
<span className="absolute -inset-0.5" />
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
{/* Logo */}
<div className="flex-shrink-0">
<Link to="/" className="text-2xl font-bold text-blue-600 hover:text-blue-800 transition-all duration-200">
LabConnect
</Link>
</div>

{/* Desktop Navigation */}
<div className="hidden sm:flex sm:items-center">
<div className="flex space-x-8">
{routes.map((item) => (
<NavLink
key={item.name}
to={item.href}
className={({ isActive }) =>

Check failure on line 41 in src/shared/components/Navigation/MainNavigation.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'isActive' is defined but never used
Copy link
Member Author

@RafaelCenzano RafaelCenzano Nov 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like it's missing isActive

location === item.href
? "text-blue-600 font-semibold border-b-2 border-blue-600"
: "text-gray-600 hover:text-blue-600 transition-all duration-200"
}
>
{item.name}
</NavLink>
))}
</div>
</div>

{/* Mobile Menu Button */}
<div className="flex sm:hidden">
<Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 transition-all duration-200">
<span className="sr-only">Open main menu</span>
{open ? (
<XMarkIcon className="blck66" aria-hidden="true" />
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
) : (
<Bars3Icon className="blck66" aria-hidden="true" />
<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
)}
</Disclosure.Button>
</div>
<div className="mainnav-desc2 sm:items-stretch sm:justify-start">
<div className="mainnav-title-link">
<Link to="/" className="blue-link hover:text-blue-900 focus:text-blue-900">
LabConnect
</Link>
</div>
<div className="hidden sm:ml-6 sm:block">
<div className="flex space-x-4 ">
{routes.map((item) => (
<NavLink
key={item.name}
to={item.href}
className={`${location === item.href
? "text-black"
: "text-gray-600"
} hover:text-gray-800 hover:bg-gray-200 mainnav-link`}
aria-current={item.current}
>
{item.name}
</NavLink>
))}
</div>
</div>
</div>
</div>
</div>

{/* Mobile Navigation */}
<Disclosure.Panel className="sm:hidden">
<div className="space-y-1 px-2 pb-3 pt-2">
<div className="space-y-1 px-4 pt-2 pb-3">
{routes.map((item) => (
<Disclosure.Button
key={item.name}
as="a"
href={item.href}
className="btn-disclosure2 hover:bg-gray-200"
aria-current={item.current ? "page" : undefined}
as={Link}
to={item.href}
className={`${
location === item.href
? "block text-blue-600 font-semibold py-2 border-l-4 border-blue-600 pl-4 transition-all duration-200"
: "block text-gray-600 hover:text-blue-600 py-2 pl-4 transition-all duration-200"
}`}
>
{item.name}
</Disclosure.Button>
Expand Down
19 changes: 0 additions & 19 deletions src/shared/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import AOS from "aos";
import "aos/dist/aos.css";

const Home = ({ signOut, signIn }) => {

Check failure on line 10 in src/shared/pages/Home.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'signOut' is defined but never used

Check failure on line 10 in src/shared/pages/Home.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'signOut' is missing in props validation

Check failure on line 10 in src/shared/pages/Home.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'signIn' is defined but never used

Check failure on line 10 in src/shared/pages/Home.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'signIn' is missing in props validation
Copy link
Member Author

@RafaelCenzano RafaelCenzano Nov 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure what signOut and signIn are but there is a new AuthContext for knowing if someone is authenticated, make sure to fix any listing errors

useEffect(() => {
// Initialize AOS
AOS.init();
Expand Down Expand Up @@ -92,25 +92,6 @@
</div>
</div>

{/* Footer Section */}
<footer className="bg-gray-900 text-gray-100 py-8">
<div className="container mx-auto text-center">
<p className="text-sm">
© 2024 LabConnect. All Rights Reserved. | <Link to="/privacy" className="text-blue-400 hover:underline">Privacy Policy</Link>
</p>
<div className="flex justify-center mt-4 space-x-4">
<Link to="https://facebook.com" className="text-gray-400 hover:text-gray-200 transition-all">
<FontAwesomeIcon icon={["fab", "facebook"]} size="2x" />
</Link>
<Link to="https://twitter.com" className="text-gray-400 hover:text-gray-200 transition-all">
<FontAwesomeIcon icon={["fab", "twitter"]} size="2x" />
</Link>
<Link to="https://linkedin.com" className="text-gray-400 hover:text-gray-200 transition-all">
<FontAwesomeIcon icon={["fab", "linkedin"]} size="2x" />
</Link>
</div>
</div>
</footer>

{/* Background Elements */}
<div className="absolute inset-0 bg-gradient-to-b from-indigo-200 to-blue-300 opacity-30 z-0"></div>
Expand Down
Loading