Skip to content
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.

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

Fix RWD && Add BurgerMenu #13

Merged
merged 3 commits into from
Apr 22, 2022
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
144 changes: 144 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@
"clsx": "^1.1.1",
"emoji-picker-react": "^3.5.1",
"firebase": "^9.6.9",
"framer-motion": "^6.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-firebase-hooks": "^5.0.3",
"react-hot-toast": "^2.2.0",
"react-icons": "^4.3.1",
Copy link
Collaborator

Choose a reason for hiding this comment

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

ogólnie, u mnie na branchu dodałem inną libkę do ikonek, potem to przepisze

"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"sass": "^1.49.9",
Expand Down
4 changes: 2 additions & 2 deletions src/Components/AnswerTable/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import IconButton, { IconButtonVariant } from '../../Components/IconButton';
function AnswerTable({ children }: React.HTMLProps<HTMLButtonElement>) {
return (
<div className="flex flex-col items-center justify-center py-4">
<table className="w-3/4 table-auto drop-shadow-lg">
<table className="table-auto w:4/6 sm:w-3/4 drop-shadow-lg">
<thead>
<tr>
<th className="p-8">ID</th>
<th className="p-8">Time</th>
<th className="p-8">Score</th>
<th className="w-1/3 p-8">Text</th>
<th className="px-8">
<th className="hidden px-8 sm:table-cell">
<IconButton
variant={IconButtonVariant.PRIMARY}
icon={
Expand Down
12 changes: 6 additions & 6 deletions src/Components/AnswerTableRow/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ function AnswerTableRow({
text,
}: AnswerTableRowProps & React.HTMLProps<HTMLButtonElement>) {
return (
<tr className="py-4 bg-white text-zinc-500">
<td className="p-4">{ID}</td>
<td className="p-4">{time}</td>
<td className="p-4">{score}</td>
<td className="p-4">{text}</td>
<td className="p-2"></td>
<tr className="bg-white sm:py-4 text-zinc-500">
<td className="sm:p-4">{ID}</td>
<td className="sm:p-4">{time}</td>
<td className="sm:p-4">{score}</td>
<td className="sm:p-4">{text}</td>
<td className="hidden sm:p-2 sm:table-cell"></td>
</tr>
);
}
Expand Down
22 changes: 22 additions & 0 deletions src/Components/BurgerMenu/BurgerMenu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { motion } from 'framer-motion';


// eslint-disable-next-line react/prop-types
Copy link
Collaborator

Choose a reason for hiding this comment

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

dodaj te typy :trollface:

const BurgerMenu = ({ isOpen, children }) => {
const variants = {
open: { x: 0, transition: { type: 'linear' } },
closed: { x: '100%', transition: { type: 'linear' } },
};
return (
<motion.div
animate={isOpen ? 'open' : 'closed'}
initial='closed'
variants={variants}
id='burger_menu'
className='fixed top-0 left-0 z-10 flex flex-col items-center justify-center w-screen bg-zinc-100 md:hidden'
>
{children}
</motion.div>
);
};
export default BurgerMenu;
1 change: 1 addition & 0 deletions src/Components/Button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export enum ButtonVariant {
FLAT = 'btn-flat',
}
export enum ButtonSize {
SMALL = 'w-16',
DEFAULT = '',
NORMAL = 'w-24',
MEDIUM = 'w-32',
Expand Down
42 changes: 38 additions & 4 deletions src/Layouts/Navigation/index.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,63 @@
import { useAuthState } from 'react-firebase-hooks/auth';
import { Link } from 'react-router-dom';
import { useState } from 'react';
import { FaBars } from 'react-icons/fa';
import Button, { ButtonSize, ButtonVariant } from '../../Components/Button';
import { auth, logout } from '../../firebase';
import { auth } from '../../firebase';
import {signOut} from 'firebase/auth';
import Logo from '../Logo';
import BurgerMenu from '../../Components/BurgerMenu/BurgerMenu';

function Navigation() {
const [user, loading] = useAuthState(auth);
const [isOpen, setIsOpen] = useState(false);
const logoutDesktop = () => {
signOut(auth);
};

const logoutMobile = () => {
signOut(auth);
setIsOpen(!isOpen);
};
return (
<nav className="py-5 border-b border-neutral-200">
<div className="flex justify-between px-4 md:px-8">
<Logo />
{!loading && user ? (
<div className='flex space-x-2'>
<p className='sm:flex truncate items-center justify-left hidden sm:w-fit'>{user.email}</p>
<Button onClick={logout} sizeType={ButtonSize.MEDIUM} variant={ButtonVariant.OUTLINE_PRIMARY}>
<div className='flex md:space-x-20'>
<div className='hidden space-x-4 md:block'>
<Link to={'/surveys'}>
<Button variant={ButtonVariant.FLAT}>Create Survey</Button>
</Link>
<Link to={'/login'}>
<Button variant={ButtonVariant.FLAT}>My Surveys</Button>
</Link>
</div>
<Button className="hidden md:block"onClick={logoutDesktop} sizeType={ButtonSize.MEDIUM} variant={ButtonVariant.OUTLINE_PRIMARY}>
Sign Out
</Button>
<FaBars
onClick={() => setIsOpen(!isOpen)}
className='z-50 w-8 h-8 cursor-pointer md:hidden'
/>
</div>
) : (
<Link to={'/login'}>
<Button variant={ButtonVariant.OUTLINE_PRIMARY}>Sign In</Button>
</Link>
)}
</div>
<BurgerMenu isOpen={isOpen}>
<Link className="mb-4" to={'/surveys'}>
<Button onClick={() => setIsOpen(!isOpen)} variant={ButtonVariant.FLAT}>Create Survey</Button>
</Link>
<Link className="mb-4" to={'/login'}>
<Button onClick={() => setIsOpen(!isOpen)} variant={ButtonVariant.FLAT}>My Surveys</Button>
</Link>
<Button onClick={logoutMobile} sizeType={ButtonSize.MEDIUM} variant={ButtonVariant.OUTLINE_PRIMARY}>
Sign Out
</Button>
</BurgerMenu>
</nav>
);
}
Expand Down
Loading