From a9845266caf89a38eaa6f88eeffc8062f9baed44 Mon Sep 17 00:00:00 2001 From: ARJUN C RAMESH Date: Sun, 17 Oct 2021 19:36:03 +0530 Subject: [PATCH 1/2] feat(navbar):added navigation bar --- client/src/App.js | 2 + client/src/components/navbar.js | 374 +++++++++++++++++++++-- client/src/components/user-posts/post.js | 1 - client/tailwind.config.js | 8 +- 4 files changed, 362 insertions(+), 23 deletions(-) diff --git a/client/src/App.js b/client/src/App.js index 11c044e..6d0424d 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -3,6 +3,7 @@ import Signin from './components/Signin'; import Signup from './components/Signup'; import UserCard from './components/user-card/user-card'; import Post from './components/user-posts/post'; +import Navbar from './components/navbar'; function App() { return ( @@ -10,6 +11,7 @@ function App() { + ); } diff --git a/client/src/components/navbar.js b/client/src/components/navbar.js index 7c9bdd9..da42408 100644 --- a/client/src/components/navbar.js +++ b/client/src/components/navbar.js @@ -1,28 +1,360 @@ +import { useState } from "react"; +import React from "react"; +import { faLessThanEqual } from "@fortawesome/free-solid-svg-icons"; +const Navbar = () => { + const naveSearchbaropen = () => { + setnavSearchbar(true); + }; + const naveSearchbarclose = () => { + setnavSearchbar(false); + }; + const profileiconNavbarfuntion = () => { + setprofileiconNavbar(!profileiconNavbar); + }; + // const responsiveNavbarprofilepopupfuntion =() => { + // setresponsiveNavbarprofilepopup(true) + // setthreeDotmenu(true) -const navbar = () => { - return ( - + ); +}; -export default navbar +export default Navbar; diff --git a/client/src/components/user-posts/post.js b/client/src/components/user-posts/post.js index 30b52f2..7caefa2 100644 --- a/client/src/components/user-posts/post.js +++ b/client/src/components/user-posts/post.js @@ -59,7 +59,6 @@ const Post = () => { className="h-12 rounded-full w-12 mr-4" >
- {" "} diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 86feeb6..e6905c2 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -40,7 +40,13 @@ module.exports = { '496':'31rem', '350':'21.8rem', '680':'42.5rem', - '400':'25rem' + '400':'25rem', + '280':'17.5rem', + '52' :'3.25rem', + '425':'26.563rem', + '369.400':'23.088rem', + '264':'16.5rem', + '380':'23.75rem' }, borderRadius: { 'round':'50%' From 13acb5c951e7b1dbc1c4b34f45e5953b594b6297 Mon Sep 17 00:00:00 2001 From: ARJUN C RAMESH Date: Tue, 19 Oct 2021 19:54:30 +0530 Subject: [PATCH 2/2] Update navbar.js corrected the mistakes in navbar.js (camelcase , pascal case and classname ) --- client/src/components/navbar.js | 48 +++++++++++++-------------------- 1 file changed, 19 insertions(+), 29 deletions(-) diff --git a/client/src/components/navbar.js b/client/src/components/navbar.js index da42408..f2af3d5 100644 --- a/client/src/components/navbar.js +++ b/client/src/components/navbar.js @@ -2,36 +2,26 @@ import { useState } from "react"; import React from "react"; import { faLessThanEqual } from "@fortawesome/free-solid-svg-icons"; const Navbar = () => { - const naveSearchbaropen = () => { + const naveSearchBarOpen = () => { setnavSearchbar(true); }; - const naveSearchbarclose = () => { + const naveSearchbarClose = () => { setnavSearchbar(false); }; - const profileiconNavbarfuntion = () => { + const profileiconNavBarFuntion = () => { setprofileiconNavbar(!profileiconNavbar); }; - // const responsiveNavbarprofilepopupfuntion =() => { - // setresponsiveNavbarprofilepopup(true) - // setthreeDotmenu(true) - - // } - const threeDotmenufuntion = () => { + const threeDotMenuFuntion = () => { setthreeDotmenu(!threeDotmenu); setresponsiveNavbarprofilepopup(false); }; - const workPopupfuntion = () => { + const workPopupFuntion = () => { setworkPopup(!workPopup); } - const threeDotmenuprofilefuntion = () => { + const threeDotMenuProfileFuntion = () => { setthreeDotmenu(false); setresponsiveNavbarprofilepopup(true); }; - const threeDotmenuonblur = () => { - setthreeDotmenu(false); - setresponsiveNavbarprofilepopup(false); - }; - const [navSearchbar, setnavSearchbar] = useState(false); const [profileiconNavbar, setprofileiconNavbar] = useState(false); const [responsiveNavbarprofilepopup, setresponsiveNavbarprofilepopup] = useState(false); @@ -48,7 +38,7 @@ const Navbar = () => {
-
) : null} {!threeDotmenu && responsiveNavbarprofilepopup ? ( -
+
@@ -174,7 +164,7 @@ const Navbar = () => {
- + Sign out
@@ -184,7 +174,7 @@ const Navbar = () => {
  • - + Sign out
    • ) : null}
    -
    -
    +
    @@ -337,7 +327,7 @@ const Navbar = () => {