Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/Dun-sin/anon-chat-app
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dun-sin
Dun-sin committed Oct 29, 2023
2 parents 55cf367 + 7d66793 commit 57e8154
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 69 deletions.
89 changes: 34 additions & 55 deletions client/src/components/NavBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,13 @@ import { useAuth } from 'context/AuthContext';
import { SocketContext } from 'context/Context';

// Lib
import { createClassesFromArray } from 'src/lib/utils';
import { useApp } from 'src/context/AppContext';
import { NEW_EVENT_LOGOUT } from '../../../constants.json';

const linkStyle = `md:h-[60px] h-full w-full flex items-center justify-center hover:bg-primary rounded-[15px] `;
const activeStyle = linkStyle + 'bg-primary shadow-2xl';
const linkStyle = `h-full w-full flex items-center justify-center hover:bg-primary rounded-[15px] md:max-h-[60px] md:h-[60px] md:min-h-[60px] `;
const activeStyle = linkStyle + 'bg-primary';

const NavBar = ({ className }) => {
const NavBar = () => {
const { authState, dispatchAuth } = useAuth();
const { logout } = useKindeAuth();
const socket = useContext(SocketContext);
Expand Down Expand Up @@ -68,30 +67,14 @@ const NavBar = ({ className }) => {

return (
<div
className={createClassesFromArray([
className,
hideNavbar && 'hidden',
'navContainer',
'bg-secondary',
'md:w-[120px]',
'min-h-[55px]',
'md:min-h-screen',
'items-center',
'md:flex-col',
'flex-row',
'justify-center',
'shadow-[0_0_100px_0_rgba(0,0,0,1)]',
'p-2',
'md:p-5',
'sticky bottom-0',
'md:flex',
'h-[70px]',
])}
className={
`${hideNavbar && 'hidden'} bg-secondary md:w-[120px] md:min-h-screen md:max-h-screen items-center md:flex-col flex-row justify-between shadow-[rgb(0,_0,_0)_12px_0px_18px_-18px] p-2 md:p-5 sticky bottom-0 md:flex max-h-[70px] h-[70px] min-h-[70px]`
}
>
<div className='hidden md:flex'>
<img src='favicon.ico'/>
<img src='favicon.ico' />
</div>
<div className="justify-between md:justify-center flex items-center md:flex-col flex-row h-full w-full gap-2 flex-nowrap overflow-auto md:h-full">
<div className="justify-between md:justify-center flex items-center md:flex-col flex-row w-full gap-2 flex-nowrap overflow-auto">
<Whisper
placement="auto"
controlId="control-id-hover"
Expand All @@ -100,7 +83,6 @@ const NavBar = ({ className }) => {
>
<NavLink to="/" className={getLinkStyle}>
<Icon icon="fluent:people-search-20-regular" color="white" height="24" width="24" />
{className}
</NavLink>
</Whisper>
<Whisper
Expand All @@ -125,37 +107,34 @@ const NavBar = ({ className }) => {
</Whisper>

{/* show only on mobile screen */}
<div className='flex w-full md:hidden'>
<Whisper
placement="auto"
controlId="control-id-hover"
trigger="hover"
speaker={<Tooltip>Settings</Tooltip>}
>
<NavLink to="/settings" className={getLinkStyle}>
<Icon icon="ic:outline-settings" color="white" height="24" width="24" />
</NavLink>
</Whisper>
<div className='flex w-full md:hidden h-full'>
<Whisper
placement="auto"
controlId="control-id-hover"
trigger="hover"
speaker={<Tooltip>Settings</Tooltip>}
>
<NavLink to="/settings" className={getLinkStyle}>
<Icon icon="ic:outline-settings" color="white" height="24" width="24" />
</NavLink>
</Whisper>
</div>

<div className='flex w-full md:hidden h-full'>
<Whisper
placement="auto"
controlId="control-id-hover"
trigger="hover"
speaker={<Tooltip>Logout</Tooltip>}
>
<button className={linkStyle} onClick={() => handleLogout()}>
<Icon icon="majesticons:logout-half-circle" color="white" height={24} width={24} />
</button>
</Whisper>
</div>

<div className='flex w-full md:hidden'>
<Whisper
placement="auto"
controlId="control-id-hover"
trigger="hover"
speaker={<Tooltip>Logout</Tooltip>}
>
<button className={linkStyle} onClick={() => handleLogout()}>
<Icon icon="majesticons:logout-half-circle" color="white" height={24} width={24} />
</button>
</Whisper>
</div>



</div>
<div className='hidden md:block w-full'>
<Whisper
<div className='hidden md:flex w-full flex-col gap-2'>
<Whisper
placement="auto"
controlId="control-id-hover"
trigger="hover"
Expand Down
15 changes: 1 addition & 14 deletions client/src/pages/ComingSoon.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,9 @@
import React from 'react';
import { createClassesFromArray } from 'src/lib/utils';

const ComingSoon = () => {
return (
<div
className={createClassesFromArray(
'bg-light',
'dark:bg-primary',
'md:min-w-[calc(100%-120px)]',
'flex items-center',
'justify-center',
'flex-col',
'md:min-h-screen',
'min-h-[calc(100vh-70px)]',
'text-primary',
'dark:text-white',
'text-[calc(1.2vh+1.2vh+1.2vmin)]'
)}
className='bg-light dark:bg-primary md:min-w-[calc(100%-120px)] flex items-center justify-center flex-col md:min-h-screen min-h-full text-primary dark:text-white text-[calc(1.2vh+1.2vh+1.2vmin)]'
>
Feature Coming Soon
</div>
Expand Down

1 comment on commit 57e8154

@vercel
Copy link

@vercel vercel bot commented on 57e8154 Oct 29, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

whisper – ./

whisper-git-main-dun-sin.vercel.app
whisper-dun-sin.vercel.app
whischat.vercel.app
anon-chat-app.vercel.app

Please sign in to comment.