Skip to content

Update dashboard shell with Tailwind #73

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

Open
BojayL wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update dashboard shell with Tailwind #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
43 changes: 0 additions & 43 deletions frontend/src/components/Navbar/LinkNavbar/LinkNavbar.module.css
View file
Open in desktop

This file was deleted.

8 changes: 5 additions & 3 deletions frontend/src/components/Navbar/LinkNavbar/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
//styles
import Styles from './LinkNavbar.module.css';

const LinkNavbar = ({ to, text, close, path = '' }) => {
const navigate = useNavigate();
const { pathname } = useLocation();
const active = `/${path}/${to}` === pathname;
const handlerClicks = () => {
navigate(`/${path}/${to}`);
if (close) {
Expand All @@ -14,8 +13,11 @@ const LinkNavbar = ({ to, text, close, path = '' }) => {
};
return (
<button
className={Styles[`link-${`/dashboard/${to}` === pathname ? '1' : '0'}`]}
className={`mr-8 flex items-start rounded-full border-0 px-2.5 py-2.5 text-sm text-white max-[800px]:ml-4 max-[800px]:mr-0 max-[800px]:p-[14.8px] max-[800px]:text-xl ${
active ? 'bg-[#335065]' : 'bg-transparent'
}`}
onClick={handlerClicks}
type="button"
>
{text}
</button>
Expand Down
59 changes: 0 additions & 59 deletions frontend/src/components/Navbar/MenuNavbar/MenuNavbar.module.css
View file
Open in desktop

This file was deleted.

45 changes: 30 additions & 15 deletions frontend/src/components/Navbar/MenuNavbar/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
//styles
import Styles from './MenuNavbar.module.css';
//actions
import { logOut } from './../../../redux/actions/auth';
//icons
Expand All @@ -23,16 +21,25 @@ const MenuNavbar = ({ setMenu, options = [], path = '' }) => {
setMenu(false);
};
const handleSetting = () => {
navigate('setting');
navigate(`/${path}/setting`);
setMenu(false);
};
return (
<div className={Styles[`main`]}>
<div className={Styles[`head`]}>
<p className={Styles[`title`]}>Menu</p>{' '}
<RxCross2 onClick={handleClose} className={Styles[`close`]} />
<div className="fixed left-0 top-0 z-[100] flex h-full w-4/5 flex-col overflow-hidden bg-[#7291a0] text-white min-[801px]:hidden">
<div className="flex h-24 justify-between">
<p className="ml-4 mt-8 text-[32px] [font-family:'SourceSansPro-Bold',serif]">
Menu
</p>
<button
className="mr-4 mt-[35px] border-0 bg-transparent p-0 text-white"
onClick={handleClose}
type="button"
aria-label="Cerrar menu"
>
<RxCross2 className="h-8 w-8" aria-hidden="true" />
</button>
</div>
<div className={Styles[`options`]}>
<div className="h-[calc(100%-208px)] overflow-y-auto">
{options.map((link, index) => {
return link.permissions.every((permission) =>
user.permissions.includes(permission)
Expand All @@ -47,15 +54,23 @@ const MenuNavbar = ({ setMenu, options = [], path = '' }) => {
) : null;
})}
</div>
<div className={Styles[`footer`]}>
<div className={Styles[`footer-option`]} onClick={handleSetting}>
<AiOutlineSetting className={Styles[`icon`]} />
<div className="h-28 w-full">
<button
className="mb-8 ml-[31px] flex w-min items-center border-0 bg-transparent pr-2.5 text-white"
onClick={handleSetting}
type="button"
>
<AiOutlineSetting className="mr-2 h-6 w-6 text-white" aria-hidden="true" />
<p>Configuración</p>
</div>
<div className={Styles[`footer-option`]} onClick={handleLogOut}>
<TbLogout className={Styles[`icon`]} />
</button>
<button
className="mb-8 ml-[31px] flex w-min items-center border-0 bg-transparent pr-2.5 text-white"
onClick={handleLogOut}
type="button"
>
<TbLogout className="mr-2 h-6 w-6 text-white" aria-hidden="true" />
<p>Logout</p>
</div>
</button>
</div>
</div>
);
Expand Down
81 changes: 0 additions & 81 deletions frontend/src/components/Navbar/Navbar.module.css
View file
Open in desktop

This file was deleted.

49 changes: 32 additions & 17 deletions frontend/src/components/Navbar/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate, Link } from 'react-router-dom';
//styles
import Styles from './Navbar.module.css';
//components
import LinkNavbar from './LinkNavbar';
import MenuNavbar from './MenuNavbar';
Expand All @@ -22,16 +20,22 @@ const Navbar = ({ options = [], path = '' }) => {
return (
<>
{menu && <MenuNavbar setMenu={setMenu} options={options} path={path} />}
<div className={Styles[`main`]}>
<div className={Styles[`navbar`]}>
<div className={Styles[`menu-left`]}>
<img
className={Styles[`logo`]}
src="/images/logo-core-code.png"
alt="core code"
<div className="flex h-24 w-full items-center justify-center bg-[#233d54] max-[800px]:h-[60px]">
<div className="mb-4 mt-auto flex w-[90%] max-w-[1236px] items-center justify-between text-sm text-[#ebf3f7] [font-family:'SourceSansPro-Regular',serif] max-[800px]:m-auto">
<div className="flex items-center">
<button
className="mr-[54px] w-[132px] shrink-0 border-0 bg-transparent p-0"
onClick={() => navigate('/dashboard')}
/>
<div className={Styles[`menu-left-option`]}>
type="button"
aria-label="Ir al dashboard"
>
<img
className="w-full select-none"
src="/images/logo-core-code.png"
alt="core code"
/>
</button>
<div className="flex max-[800px]:hidden">
{options.map((link, index) => {
return link.permissions.every((permission) =>
user.permissions.includes(permission)
Expand All @@ -46,23 +50,34 @@ const Navbar = ({ options = [], path = '' }) => {
})}
</div>
</div>
<div className={Styles[`menu-right`]}>
<div className="flex items-center justify-center max-[800px]:hidden">
{user.permissions &&
['read:dashboard'].every((permission) =>
user.permissions.includes(permission)
) && (
<Link className={Styles[`link`]} to="/admin">
<Link className="mr-8 text-[#ebf3f7] no-underline" to="/admin">
Admin
</Link>
)}
<Link className={Styles[`link`]} to="setting">
<Link className="mr-8 text-[#ebf3f7] no-underline" to="setting">
Configuración
</Link>
<p className={Styles[`logout`]} onClick={handleLogOut}>
<button
className="border-0 bg-transparent p-0 text-[#ebf3f7]"
onClick={handleLogOut}
type="button"
>
Logout
</p>
</button>
</div>
<BiMenu className={Styles[`menu-mobile`]} onClick={() => setMenu(true)} />
<button
className="hidden border-0 bg-transparent p-0 text-[#ebf3f7] max-[800px]:block"
onClick={() => setMenu(true)}
type="button"
aria-label="Abrir menu"
>
<BiMenu className="h-[30px] w-[30px]" aria-hidden="true" />
</button>
</div>
</div>
</>
Expand Down
Loading