Skip to content

Commit

Permalink
Merge branch 'sidebar-starttour' of https://github.com/codercake/pale…
Browse files Browse the repository at this point in the history 
…ttegram into codercake-sidebar-starttour
  • Loading branch information
@Sanchitbajaj02
Sanchitbajaj02 committed Jun 7, 2024
2 parents 56e4410 + e6dd1cf commit 7cec66a
Show file tree
Hide file tree
Showing 4 changed files with 256 additions and 320 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
"framer-motion": "~10.18.0",
"html-react-parser": "~5.1.1",
"lucide-react": "~0.316.0",
"next": "13.5.4",
"next": "^13.5.4",
"next-themes": "~0.2.1",
"nookies": "~2.5.2",
"postcss": "8.4.31",
Expand Down
1 change: 1 addition & 0 deletions palettegram
Submodule palettegram added at 49276e
73 changes: 45 additions & 28 deletions src/components/core/navbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@ const Navbar = ({ starCount }: { starCount?: number }) => {

const currentUser = useCallback(
(userIdFromCookies: string) => {
console.log("inside currentUser");

if (userIdFromCookies) {
getUserByUserId(userIdFromCookies)
.then((currUser: any) => {
Expand All @@ -54,8 +52,6 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
);

const getPostsFromDatabase = useCallback(() => {
console.log("inside getPostsFromDatabase");

if (userIdFromCookies) {
getAllPosts()
.then((posts) => {
Expand All @@ -71,8 +67,6 @@ const Navbar = ({ starCount }: { starCount?: number }) => {

const getBookmarksFromDatabase = useCallback(
(userIdFromCookies: string) => {
console.log("inside getBookmarksFromDatabase");

if (userIdFromCookies) {
getBookmarks(userIdFromCookies)
.then((bookmarks) => {
Expand Down Expand Up @@ -117,11 +111,10 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
<>
<nav className="w-full sticky top-0 shadow-md py-2 px-4 md:px-10 backdrop-blur-sm dark:shadow-gray-600 z-50">
{/* Desktop menu items */}

<div className="max-w-screen-lg mx-auto flex items-center content-center justify-between backdrop-blur-sm bg-grey-100 bg-opacity-20 h-16 my-2">
<Link href={userAuth.creds?.userId ? "/feed" : "/"}>
<Image
className="navbar-brand fw-bold w-10 h-10 cursor pointer dark:shadow-md dark:shadow-gray-500 rounded-full ml-2 md:ml-0 hero"
className="navbar-brand fw-bold w-10 h-10 cursor-pointer dark:shadow-md dark:shadow-gray-500 rounded-full ml-2 md:ml-0 hero"
src={"/assets/logo.png"}
alt="settings"
width={100}
Expand All @@ -130,8 +123,7 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
</Link>

{/* Hamburger menu button for small screens */}

<div className="md:hidden flex justify-end items-center ">
<div className="md:hidden flex justify-end items-center">
<div className="mr-2">
<ThemeButton iconSize={18} />
</div>
Expand All @@ -151,7 +143,7 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
<ThemeButton iconSize={22} />
<button
type="button"
className="px-10 py-2 text-base rounded-full bg-primary text-white hover:bg-primary-light hover:scale-105"
className="px-10 py-2 text-base rounded-full bg-primary text-white hover:bg-primary-light hover:scale-105"
onClick={() => startTour().start()}
>
Start Tour
Expand All @@ -163,24 +155,25 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
href="/feed"
className="mx-2 px-2 py-2 rounded-full bg-primary text-white hover:bg-primary-light hover:scale-105"
>
<Home size={22} className="transition-all duration-300 " />
<Home size={22} className="transition-all duration-300" />
</Link>
)}
<Link
href={`/user/${userAuth.data?.$id}`}
className="mx-2 px-2 py-2 rounded-full bg-primary text-white hover:bg-primary-light hover:scale-105"
className="mx-2 px-2 py-2 rounded-full bg-primary text-white hover:bg-primary-light hover:scale-105"
>
<User size={22} className="transition-all duration-300 " />
<User size={22} className="transition-all duration-300" />
</Link>

<Link
href={`/user/bookmarks`}
className="mx-2 px-2 py-2 rounded-full bg-primary text-white hover:bg-primary-light hover:scale-105"
className="mx-2 px-2 py-2 rounded-full bg-primary text-white hover:bg-primary-light hover:scale-105"
>
<Bookmark size={22} className="transition-all duration-300 " />
<Bookmark size={22} className="transition-all duration-300" />
</Link>

<button
type="button"
className="mx-2 px-2 py-2 rounded-full bg-primary transition hover:bg-primary-light hover:scale-105 text-white"
onClick={logout}
>
Expand Down Expand Up @@ -222,42 +215,65 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
onClick={() => setMenuOpen(!isMenuOpen)}
className={`absolute right-2 top-6 text-white dark:hover:text-primary focus:outline-none ${
isMenuOpen ? "open" : "closed"
} hover:text-primary lg:hidden`}
} hover:text-primary lg:hidden`}
>
<X size={32} />
</button>

<div className="grid grid-cols-1 gap-4 mt-24 backdrop-blur-sm ">
<div className="grid grid-cols-1 gap-4 mt-24 backdrop-blur-sm">
<button
type="button"
className="mx-2 px-6 py-2 text-sm rounded-full bg-primary text-white hover:border-2 hover:bg-transparent"
onClick={() => startTour().start()}
>
Start Tour
</button>

<Link
href="https://github.com/Sanchitbajaj02/palettegram"
target="_blank"
rel="noopener noreferrer"
className="flex items-center text-sm mx-2 px-10 py-2 rounded-full bg-primary text-white hover:border-2 hover:bg-transparent"
className="flex items-center text-sm mx-2 px-10 py-2 rounded-full bg-primary text-white hover:border-2 hover:bg-transparent"
>
<Github size={20} className="mr-4" /> {starCount} Stars
</Link>

<Link
href="/register"
className="inline-block mx-2 px-6 py-2 text-sm rounded-full text-white bg-primary text-center hover:border-2 hover:bg-transparent "
className="inline-block mx-2 px-6 py-2 text-sm rounded-full text-white bg-primary text-center hover:border-2 hover:bg-transparent"
>
Register
</Link>

<Link
href="/login"
className="inline-block mx-2 px-6 py-2 text-sm rounded-full text-white bg-primary text-center hover:border-2 hover:bg-transparent"
className="inline-block mx-2 px-6 py-2 text-sm rounded-full text-white bg-primary text-center hover:border-2 hover:bg-transparent"
>
Login
</Link>

{userAuth && userAuth.data?.$id && (
<Link
href={`/user/${userAuth.data?.$id}`}
className="mx-2 px-2 py-2 rounded-full bg-primary hover text-white "
>
<User size={22} className="transition-all duration-300 " />
</Link>
{userAuth?.data?.$id && (
<>
<Link
href={`/user/${userAuth.data?.$id}`}
className="mx-2 px-2 py-2 rounded-full bg-primary text-white"
>
<User size={22} className="transition-all duration-300" />
</Link>
<Link
href={`/user/bookmarks`}
className="mx-2 px-2 py-2 rounded-full bg-primary text-white"
>
<Bookmark size={22} className="transition-all duration-300" />
</Link>
<button
type="button"
className="mx-2 px-2 py-2 rounded-full bg-primary transition text-white"
onClick={logout}
>
<LogOut size={22} className="transition-all duration-300" />
</button>
</>
)}
</div>
</div>
Expand All @@ -266,4 +282,5 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
</>
);
};

export default Navbar;
Loading

0 comments on commit 7cec66a

Please sign in to comment.