Skip to content

Commit

Permalink
Merge pull request #467 from MeetDOD/issue-462
Browse files Browse the repository at this point in the history 
Bug: Modified the whole navbar and adjust the google translator button successfully issue 462
  • Loading branch information
@Ultimateutkarsh11
Ultimateutkarsh11 authored Jul 21, 2024
2 parents 948edc2 + f490d39 commit fc6d000
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 127 deletions.
6 changes: 5 additions & 1 deletion frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import CodeEditor from "./pages/CodeEditor";
import Contributors from "./pages/Contributors";
import userBlock from "./hooks/userBlock";
import Blocked from "./pages/Blocked";
import GoogleTranslate from "./components/GoogleTranslate";
// import axios from "axios";
// axios.defaults.baseURL = "http://localhost:3001/";

Expand All @@ -51,7 +52,10 @@ function App() {
<div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000435', color: theme === 'light' ? '#000435' : '#fff'}}>
<Navbar theme={theme} toggleTheme={toggleTheme} />
<ScrollToTopWhenRouteChanges/>
<div className="min-h-[80vh] mt-12 pt-12">
<div className="min-h-[80vh] pt-20">
<div className="ml-2 fixed z-40">
<GoogleTranslate/>
</div>
<Routes>
<Route path="/app" element={<Home />} />
<Route path="/app/posts/:id" element={<Post />} />
Expand Down
233 changes: 130 additions & 103 deletions frontend/src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import React, { useState } from "react";
import { useRecoilValue, useSetRecoilState } from "recoil";
import { loggedInState, tokenState } from "../store/atoms/auth";
import { loggedInState, tokenState, userState } from "../store/atoms/auth";
import { Link, useLocation } from "react-router-dom";
import toast from "react-hot-toast";
import logo from '../assets/favicon.png';
import { FaSun, FaMoon } from 'react-icons/fa';
import GoogleTranslate from "./GoogleTranslate";

interface NavbarProps {
theme: 'light' | 'dark';
Expand All @@ -14,16 +13,23 @@ interface NavbarProps {

const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isProfileDropdownOpen, setIsProfileDropdownOpen] = useState(false);
const setTokenState = useSetRecoilState(tokenState);
const isLoggedIn = useRecoilValue(loggedInState);
const location = useLocation();
const user = useRecoilValue(userState);

const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};

const toggleProfileDropdown = () => {
setIsProfileDropdownOpen(!isProfileDropdownOpen);
};

const closeMenu = () => {
setIsMenuOpen(false);
setIsProfileDropdownOpen(false);
};

const handleLogout = () => {
Expand All @@ -35,129 +41,150 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {

const getNavLinkClass = (path: string) => {
return location.pathname === path
? "block py-2 px-3 bg-blue-600 rounded md:bg-transparent md:p-0 text-white md:text-blue-300"
: "block py-2 px-3 rounded md:border-0 md:p-0 text-white md:hover:text-blue-300 hover:bg-blue-400 hover:text-white md:hover:bg-transparent";
? "block rounded-md px-3 py-2 text-base font-medium text-gray-50 dark:text-gray-50 bg-[#2575fc]"
: "block rounded-md px-3 py-2 text-base font-medium text-gray-50 dark:text-gray-50 hover:bg-[#2575fc] ";
};

return (
<nav className={`bg-gradient-to-r from-[#6a11cb] via-[#ab67df] to-[#2575fc] fixed w-full z-20 top-0 start-0 `}>

<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
<Link to="/app" className="flex items-center space-x-3 rtl:space-x-reverse" onClick={closeMenu}>
<div className="flex items-center space-x-3 rtl:space-x-reverse dark:text-black mr-4">
<img src={logo} className="h-8" alt="Styleshare Logo" />
<span className="self-center text-2xl font-bold text-white font-mono notranslate">
Style Share
</span>
</div>
<div className="Translator">
<GoogleTranslate />
</div>
</Link>
<button
onClick={toggleMenu}
type="button"
className="relative inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-100 rounded-lg lg:hidden hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-gray-200"
aria-controls="navbar-default"
aria-expanded={isMenuOpen ? "true" : "false"}
>
<span className="sr-only">Open Menu</span>
<div className="flex flex-col gap-1">
<span className={`h-0.5 w-4 bg-white transform transition duration-200 ease-in ${isMenuOpen ? "rotate-[45deg]" : "rotate-0"}`}></span>
<span className={`h-0.5 w-4 ${isMenuOpen ? "bg-transparent" : "bg-white"} transition duration-200 ease-in ${isMenuOpen ? "absolute" : "relative"}`}></span>
<span className={`h-0.5 w-4 bg-white transform transition duration-200 ease-in ${isMenuOpen ? "rotate-[-45deg]" : "rotate-0"} ${isMenuOpen ? "absolute" : "relative"}`}></span>
</div>
</button>
<div
className={`${isMenuOpen ? "block" : "hidden"} w-full lg:block lg:w-auto transition-all duration-300 ease-in-out`}
id="navbar-default"
>
<ul className="font-medium flex flex-col p-0 text-lg lg:p-4 mt-4 border rounded-lg lg:flex-row lg:space-x-8 rtl:space-x-reverse lg:mt-0 lg:border-0">
<li className={`mt-2 lg:mb-0 ${isMenuOpen ? "ml-3" : ""}`}>
<nav className="bg-gradient-to-r from-[#6a11cb] via-[#ab67df] to-[#2575fc] fixed w-full z-50">
<div className="mx-auto max-w-7xl px-2 md:px-6 lg:px-8">
<div className="relative flex h-16 items-center justify-between">
<Link to="/app" className="flex flex-shrink-0 items-center">
<img src={logo} className="h-8 w-auto mr-3" alt="Styleshare Logo" />
<span className="self-center sm:text-2xl font-bold text-white font-mono notranslate mr-2">Style Share</span>
</Link>
<div className="flex flex-1 items-center justify-center md:items-stretch md:justify-start">
<div className="hidden lg:block md:ml-2">
<div className="flex space-x-4">
<Link to="/app" className={getNavLinkClass("/app")} aria-current="page" onClick={closeMenu}>
Home
</Link>
</li>
<li className={`mt-2 ${isMenuOpen ? "ml-3" : ""}`}>
</Link>
<Link to="/app/posts" className={getNavLinkClass("/app/posts")} onClick={closeMenu}>
Posts
</Link>
</li>
<li className={`mt-2 ${isMenuOpen ? "ml-3" : ""}`}>
</Link>
<Link to="/app/leaderboard" className={getNavLinkClass("/app/leaderboard")} onClick={closeMenu}>
Leaderboard
</Link>
</li>
{!isLoggedIn ? (
<div className="flex flex-col lg:flex-row lg:space-x-4">
<li className="mb-2 lg:mb-0">
<Link to="/app/signin" onClick={closeMenu}>
<button className={`relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 ${isMenuOpen ? "ml-3 mt-2" : ""}`}>
<span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
<span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-gradient-to-l from-[#c779e8] to-indigo-500 px-5 text-lg font-small text-white backdrop-blur-3xl">
Sign in
</span>
</button>
</Link>
</li>
<li>
<Link to="/app/signup" onClick={closeMenu}>
<button className={`relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 ${isMenuOpen ? "ml-3" : ""}`}>
<span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
<span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-gradient-to-l from-[#c779e8] to-indigo-500 px-5 text-lg font-small text-white backdrop-blur-3xl">
Sign up
</span>
</button>
</Link>
</li>
<li>
<button
onClick={toggleTheme}
className={`inline-flex mt-1 border-2 border-white items-center justify-center w-10 h-10 text-gray-100 rounded-lg hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-gray-200 ${isMenuOpen ? "ml-3 mt-2 my-2" : ""}`}
>
{theme === 'light' ? <FaMoon className="w-4 h-4 " /> : <FaSun className="w-4 h-4" />}
</button>
</li>
{!isLoggedIn ?
<>
<Link to="/app/signin" className="block rounded-md px-3 py-2 text-base font-medium bg-sky-500 hover:bg-sky-600 text-white" onClick={closeMenu}>
SignIn
</Link>
<Link to="/app/signup" className="block rounded-md px-3 py-2 text-base font-medium bg-sky-500 hover:bg-sky-600 text-white" onClick={closeMenu}>
SignUp
</Link>
</>
:
<>
<Link to="/app/new-post" className={getNavLinkClass("/app/new-post")} onClick={closeMenu}>
NewPost
</Link>
<Link to="/app/code" className={getNavLinkClass("/app/code")} onClick={closeMenu}>
CodeEditor
</Link>
</>
}
</div>
) : (
<>
<li className={`mt-2 ${isMenuOpen ? "ml-3" : ""}`}>
<Link to="/app/new-post" className={getNavLinkClass("/app/new-post")} onClick={closeMenu}>
New Post
</Link>
</li>
<li className={`mt-2 ${isMenuOpen ? "ml-3" : ""}`}>
<Link to="/app/code" className={getNavLinkClass("/app/code")} onClick={closeMenu}>
Code Editor
</Link>
</li>
<li className={`mt-2 ${isMenuOpen ? "ml-3" : ""}`}>
</div>
</div>
<div className="absolute inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:ml-6 md:pr-0">
<div className="relative ml-3">
<div>
{isLoggedIn &&
<button
type="button"
className="relative mr-1 flex rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
id="user-menu-button"
aria-expanded={isProfileDropdownOpen ? "true" : "false"}
aria-haspopup="true"
onClick={toggleProfileDropdown}
>
<span className="sr-only">Open user menu</span>
<img
className="h-10 w-10 rounded-full"
src={`https://ui-avatars.com/api/?name=${user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`}
alt={user?.username}
/>
</button>}
</div>
{isProfileDropdownOpen && (
<div
className="absolute right-0 z-10 mt-2 p-2 pb-2 space-y-1 w-48 origin-top-right rounded-md border-2 border-[#000435] bg-sky-500 dark:border-sky-500 dark:bg-[#000435] py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu-button "
>
<Link to="/app/profile" className={getNavLinkClass("/app/profile")} onClick={closeMenu}>
Profile
</Link>
</li>
<li className={`mt-2 ${isMenuOpen ? "ml-3" : ""}`}>
<Link to="/app/fav" className={getNavLinkClass("/app/fav")} onClick={closeMenu}>
Favorite
</Link>
</li>
<li className="mt-1">
<button
className={`text-white px-4 py-2 -mt-3 rounded-lg bg-blue-500 hover:bg-blue-600 ${isMenuOpen ? "ml-3" : ""}`}
onClick={handleLogout}
className="block w-full text-left rounded-md px-3 py-2 font-semibold text-red-500 hover:bg-red-700 hover:text-white"
role="menuitem"
id="user-menu-item-2"
>
Logout
</button>
<button
onClick={toggleTheme}
className={`inline-flex mx-1 border-2 border-white items-center justify-center w-10 h-10 text-gray-100 rounded-lg hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-gray-200 ${isMenuOpen ? "ml-3 mt-2 my-2" : ""}`}
>
{theme === 'light' ? <FaMoon className="w-4 h-4 " /> : <FaSun className="w-4 h-4" />}
</button>
</li>
</>
)}
</ul>
</div>
)}
</div>
<button
onClick={toggleTheme}
className={`inline-flex mx-1 border-2 border-white items-center justify-center w-10 h-10 text-gray-100 rounded-lg hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-gray-200 ${isMenuOpen ? "ml-3 mt-2 my-2" : ""}`}>
{theme === 'light' ?
<FaMoon className="w-4 h-4 " />
:
<FaSun className="w-4 h-4" />}
</button>
<button
onClick={toggleMenu}
type="button"
className="border-2 border-white inline-flex items-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white lg:hidden"
aria-controls="mobile-menu"
aria-expanded={isMenuOpen ? "true" : "false"}
>
<span className="sr-only">Open main menu</span>
<svg className="block h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={isMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16m-7 6h7"} />
</svg>
</button>
</div>
</div>
</div>
<div className={`${isMenuOpen ? "block" : "hidden"} lg:hidden`} id="mobile-menu">
<div className="space-y-1 px-2 pt-2 pb-3">
<Link to="/app" className={getNavLinkClass("/app")} aria-current="page" onClick={closeMenu}>
Home
</Link>
<Link to="/app/posts" className={getNavLinkClass("/app/posts")} onClick={closeMenu}>
Posts
</Link>
<Link to="/app/leaderboard" className={getNavLinkClass("/app/leaderboard")} onClick={closeMenu}>
Leaderboard
</Link>
{isLoggedIn &&
<>
<Link to="/app/new-post" className={getNavLinkClass("/app/new-post")} onClick={closeMenu}>
New Post
</Link>
<Link to="/app/code" className={getNavLinkClass("/app/code")} onClick={closeMenu}>
Code Editor
</Link>
</>
}
{!isLoggedIn &&
<div className="grid grid-cols-2 text-center pt-1">
<Link to="/app/signin" className="px-2 mr-1 rounded-md py-2 text-base font-medium bg-sky-500 hover:bg-sky-600 text-white" onClick={closeMenu}>
SignIn
</Link>
<Link to="/app/signup" className="px-2 ml-1 rounded-md py-2 text-base font-medium bg-sky-500 hover:bg-sky-600 text-white" onClick={closeMenu}>
SignUp
</Link>
</div>
}
</div>
</div>
</nav>
Expand Down
42 changes: 19 additions & 23 deletions frontend/src/styles/Translate.css
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,42 @@
body {
top: 0 !important;
top: 0 !important;
}

font {
background-color: transparent !important;
box-shadow: none !important;
}

.google-translate-container {
display: flex;
align-items: center;
margin-left: 20px;
background-color: transparent !important;
box-shadow: none !important;
}

.goog-logo-link,
.goog-te-banner-frame,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
display: none !important;
display: none !important;
}

.goog-te-gadget {
color: transparent !important;
color: transparent !important;
}

.goog-te-gadget .goog-te-combo {
background-color: transparent !important;
color: white !important;
font-size: 15px;
border: 1px solid white;
padding: 5px;
background-color: rgb(14 165 233) !important;
color: white !important;
font-size: 15px;
border: 2px solid #000435;
border-radius: 5px;
padding: 4px;
}

.goog-te-gadget .goog-te-combo option {
color: black;
color: white;
}

#goog-gt-tt, .goog-te-balloon-frame{
display: none !important;
}
#goog-gt-tt,
.goog-te-balloon-frame {
display: none !important;
}

.goog-text-highlight {
background: none !important;
box-shadow: none !important;
.goog-text-highlight {
background: none !important;
box-shadow: none !important;
}

0 comments on commit fc6d000

Please sign in to comment.