Skip to content
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

added the sidenavbar #81

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

added the sidenavbar #81

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
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.tsdk": "node_modules\\typescript\\lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
99 changes: 99 additions & 0 deletions app/dashboard/SideNavbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
"use client";
import React from "react";

import Image from "next/image";
import Link from "next/link";
import useTweetStore from "../store/tweetStore";
import { AiOutlineSearch } from "react-icons/ai";
import { BsPeopleFill } from "react-icons/bs";
import DonutLargeIcon from "@mui/icons-material/DonutLarge";
import { usePathname } from "next/navigation";

import { Disclosure } from "@headlessui/react";
import { GiHamburgerMenu } from "react-icons/gi";

const links = [
{
name: "Progress",
url: "/dashboard",
icon: <DonutLargeIcon className="text-xl text-ourPink" />,
},
{
name: "Search",
url: "/search",
icon: <AiOutlineSearch className="text-xl text-ourPink" />,
},
{
name: "Discover",
url: "/discover",
icon: <BsPeopleFill className="text-2xl text-ourPink" />,
},
];

const activeLink =
"flex items-center gap-3 text-ourPink bg-[#343434] rounded-lg cursor-pointer py-4 px-4 text-lg transition-all duration-300 ease-in-out";
const normalLink =
"flex items-center gap-3 text-ourPink hover:bg-[#343434] rounded-lg cursor-pointer py-4 px-4 text-lg transition-all duration-300 ease-in-out";
const SideNavbar = () => {
const pathname = usePathname();
const { userProfile, count } = useTweetStore((state) => ({
userProfile: state.userProfile,
count: state.count,
}));
return (
<div>
<Disclosure>
<Disclosure.Button className="absolute top-5 right-5 inline-flex items-center peer justify-center rounded-md p-3 text-gray-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white group hover:bg-gray-900">
<GiHamburgerMenu
className="block md:hidden h-6 w-6"
aria-hidden="true"
/>
</Disclosure.Button>
<div className="p-6 w-1/2 h-screen bg-gray-400 z-20 fixed top-20 -left-96 lg:w-60 lg:left-0 peer-focus:left-0 peer-transition ease-out delay-150 duration-200 md:block md:h-screen md:w-1/6">
<div className="flex flex-col gap-10 justify-start items-center">
<div className="flex items-center gap-2 ">
<div className="relative">
<Image
alt={`${userProfile.name}'s profile image`}
src={userProfile.profile_img}
width={200}
height={200}
className="rounded-full w-12 object-cover"
/>
<span className="absolute -top-1 -right-1 w-5 h-5 flex items-center justify-center rounded-full bg-ourPink text-white text-xs font-medium">
{count}
</span>
</div>
<div className="flex flex-col">
<p className="text-ourDarkGray text-lg font-semibold">
{userProfile.name}
</p>
<p className="text-ourDarkGray opacity-90 text-sm">
@{userProfile.username}
</p>
</div>
</div>
<div className="flex flex-col gap-2 w-full ">
{links.map((link) => (
<Link
key={link.name}
href={link.url}
className=""
>
<div
className={pathname === link.url ? activeLink : normalLink}
>
{link.icon}
<p className="text-xl font-medium">{link.name}</p>
</div>
</Link>
))}
</div>
</div>
</div>
</Disclosure>
</div>
);
};

export default SideNavbar;
49 changes: 44 additions & 5 deletions app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
"use client";

import { useState } from "react";
import Badges from "./Badges";
import Card from "./Card";
import Sidebar from "./Sidebar";
Expand All @@ -9,27 +9,66 @@ import Streak from "./Streak";
import Loading from "../components/Loading";
import Navbar from "../components/Navbar";
import { Poppins } from "@next/font/google";
import SideNavbar from "./SideNavbar";

const poppins = Poppins({
subsets: ["latin"],
weight: ["100", "200", "300", "400", "500", "600", "700"],
variable: "--font-Poppins",
});

const dashboardPage = () => {
const DashboardPage = () => {
const { tweets, dates, username, loading } = useTweetStore((state) => ({
tweets: state.tweets,
dates: state.dates,
username: state.username,
loading: state.loading,
}));

const [navbar, setNavbar] = useState(false);
return (
<div className="px-8">
<Navbar />
{/* <div className="md:hidden">
<button
className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
onClick={() => setNavbar(!navbar)}
>
{navbar ? (
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-black"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-black"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
)}
</button>
</div> */}
<div className="md:flex w-full bg-white">
<Sidebar />
<div className="w-full md:w-5/6 p-9">
<SideNavbar />

<div className="w-full p-9 md:ml-32 lg:ml-56">
<div className="md:flex mb-5 md:space-x-5 space-y-5 md:space-y-0">
<div className="w-full md:w-2/3 p-8 rounded-md shadow-md shadow-[#bcbcbc29] border-[#bcbcbc20] border-[1px] bg-white">
<p className="text-[#5f6577] text-base font-bold">
Expand Down Expand Up @@ -70,4 +109,4 @@ const dashboardPage = () => {
);
};

export default dashboardPage;
export default DashboardPage;
16 changes: 16 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"dependencies": {
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@headlessui/react": "^1.7.12",
"@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.6",
"@next/font": "^13.1.3",
Expand Down