remove burger menu, improve responsive progress bar

This commit is contained in:
martin-mfg
2025-11-30 20:23:02 +01:00
parent 8171b4b53a
commit 9ba160aa9e
4 changed files with 1 additions and 112 deletions
@@ -49,7 +49,7 @@ const ProgressBar = ({ items, currItem, setCurrItem }) => {
const rightDisabled = currItem === items.length - 1;
return (
<div className="w-full flex items-center sticky top-0 bg-gray-200 z-50 pt-3 pb-1 px-20 shadow-md">
<div className="w-full flex items-center sticky top-0 bg-gray-200 z-50 pt-3 pb-1 px-1 md:px-20 shadow-md">
<LeftArrowIcon
className={classnames(
'w-8 h-8',
-54
View File
@@ -98,60 +98,6 @@ const Header = ({ mode, stage, setStage }) => {
</button>
</a>
</div>
{/* Hamburger Menu */}
<div className="md:hidden flex ml-auto items-center">
<button
type="button"
className="outline-none"
onClick={() => setToggle(!toggle)}
>
<HamburgerIcon className="w-6 h-6 text-gray-700" />
</button>
</div>
</div>
{/* Hamburger Dropdown */}
<div className={classnames('p-5 pt-0', !toggle && 'hidden')}>
{mode === 'trends' && (
<>
<MobileLink to="/user" onClick={() => setToggle(false)}>
Dashboard
</MobileLink>
</>
)}
{isAuthenticated ? (
<>
{mode === 'trends' && (
<MobileLink to="/settings" onClick={() => setToggle(false)}>
Settings
</MobileLink>
)}
<MobileLink
to="/"
onClick={() => {
setToggle(false);
logout();
}}
>
Sign Out
</MobileLink>
</>
) : (
<>
<a
className="block text-sm px-2 my-2 py-2 rounded-sm bg-gray-800 text-gray-700"
href={GITHUB_PUBLIC_AUTH_URL}
>
Login
</a>
<Link
to="/signup"
onClick={() => setToggle(false)}
className="block text-sm px-2 my-2 py-2 rounded-sm bg-blue-500 text-white"
>
Sign Up
</Link>
</>
)}
</div>
</div>
<ProgressBar
@@ -1,54 +0,0 @@
import React from 'react';
import { FaGithub as GithubIcon } from 'react-icons/fa';
import { Button } from '../../components';
import {
GITHUB_PUBLIC_AUTH_URL,
GITHUB_PRIVATE_AUTH_URL,
} from '../../constants';
import { classnames } from '../../utils';
import mockup from '../../assets/mockup.png';
const SignUpScreen = () => {
return (
<div className="h-full flex flex-wrap">
<div className="hidden lg:block lg:w-3/5 lg:p-8 lg:my-auto">
<div className="w-4/5 mx-auto">
<img src={mockup} alt="preview" />
</div>
</div>
<div className="w-full h-full lg:w-2/5 flex lg:flex-col lg:p-8">
<div
className={classnames(
'bg-gray-100 rounded-sm w-full h-full m-auto p-8 shadow',
'lg:w-80 lg:h-auto',
)}
>
<h3 className="text-3xl font-semibold text-gray-900 mb-12 text-center">
Sign up for <br />
GitHub Trends
</h3>
<div>
<a href={GITHUB_PUBLIC_AUTH_URL} className="flex justify-center">
<Button className="h-12 flex justify-center items-center text-white bg-blue-500 hover:bg-blue-600">
<GithubIcon className="w-6 h-6" />
<span className="ml-2 xl:text-lg">GitHub Public Access</span>
</Button>
</a>
<div className="mt-4" />
<a href={GITHUB_PRIVATE_AUTH_URL} className="flex justify-center">
<Button className="h-12 flex justify-center items-center text-black border border-black bg-white hover:bg-gray-100">
<GithubIcon className="w-6 h-6" />
<span className="ml-2 xl:text-lg">GitHub Private Access</span>
</Button>
</a>
</div>
</div>
</div>
</div>
);
};
export default SignUpScreen;
@@ -1,3 +0,0 @@
import SignUpScreen from './SignUp';
export { SignUpScreen };