Skip to content

Commit

Permalink
changed the appbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pratham271
Pratham271 committed Apr 3, 2024
1 parent 95d59c3 commit eded34c
Showing 1 changed file with 42 additions and 78 deletions.
120 changes: 42 additions & 78 deletions src/components/Appbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,10 @@ import { ThemeToggler } from './ThemeToggler';
import { NavigationMenu } from './landing/appbar/nav-menu';
import SearchBar from './search/SearchBar';
import MobileScreenSearch from './search/MobileScreenSearch';
import { useState } from 'react';

export const Appbar = () => {
const session = useSession();
const [sidebarOpen, setSidebarOpen] = useRecoilState(sidebarOpenAtom);
const [dropdownOpen, setDropdownOpen] = useState(false);
const currentPath = usePathname();
const params = useParams();
let bookmarkPageUrl = null;
Expand All @@ -47,89 +45,55 @@ export const Appbar = () => {
<div className="hidden md:block">
<SearchBar />
</div>

<div className="flex items-center space-x-2">
{/* Search Bar for smaller devices */}
{/* sm:flex md:w-auto md:block*/}
<MobileScreenSearch />

<div className="flex items-center space-x-2">
<div className="hidden sm:flex">
<div className="hidden sm:flex h-8 w-8 bg-slate-100 text-black dark:bg-gray-600 rounded-full items-center text-center dark:text-white flex-col justify-center">
<button
onClick={() => setDropdownOpen(!dropdownOpen)}
type="button"
id="dropdownHoverButton"
data-dropdown-toggle="dropdownHover"
data-dropdown-trigger="hover"
<div className="hidden sm:flex items-center justify-around md:w-auto md:block space-x-2">
{currentPath.includes('courses') && bookmarkPageUrl && (
<Button
variant="link"
className={
currentPath === bookmarkPageUrl
? 'font-bold underline'
: ''
}
size={'sm'}
asChild
>
<span className="user-name">
{session.data?.user?.name?.charAt(0).toUpperCase()}
</span>
</button>
</div>
{dropdownOpen && (
<div className=" z-20 dark:bg-gray-800 p-4 dark:text-white bg-white fixed top-[52px] right-[36px] divide-y divide-gray-100 rounded-lg shadow w-44 items-center justify-around space-x-2">
<ul
aria-labelledby="dropdownHoverButton"
className="w-full items-center text-center"
>
<li>
{currentPath.includes('courses') &&
bookmarkPageUrl && (
<Button
variant="link"
className={
currentPath === bookmarkPageUrl
? 'font-bold underline'
: ''
}
size={'sm'}
asChild
>
<Link href={bookmarkPageUrl}>Bookmarks</Link>
</Button>
)}
</li>
<li>
<Button variant={'link'} size={'sm'} asChild>
<JoinDiscord isNavigated={false} />
</Button>
</li>
<li>
<Button size={'sm'} variant={'link'} asChild>
<Link
href={'https://projects.100xdevs.com/'}
target="_blank"
>
Slides
</Link>
</Button>
</li>
<li>
<Button size={'sm'} variant={'link'} asChild>
<Link
href={
'https://github.com/100xdevs-cohort-2/assignments'
}
target="_blank"
>
Assignments
</Link>
</Button>
</li>
<li>
<Button size={'sm'} variant={'link'} asChild>
<Link href={'/history'}>Watch History</Link>
</Button>
</li>
<li>
<AppbarAuth />
</li>
</ul>
</div>
<Link href={bookmarkPageUrl}>Bookmarks</Link>
</Button>
)}

<Button variant={'link'} size={'sm'} asChild>
<JoinDiscord isNavigated={false} />
</Button>

<Button size={'sm'} variant={'link'} asChild>
<Link
href={'https://projects.100xdevs.com/'}
target="_blank"
>
Slides
</Link>
</Button>

<Button size={'sm'} variant={'link'} asChild>
<Link
href={
'https://github.com/100xdevs-cohort-2/assignments'
}
target="_blank"
>
Assignments
</Link>
</Button>
<Button size={'sm'} variant={'link'} asChild>
<Link href={'/history'}>Watch History</Link>
</Button>
<AppbarAuth />
</div>

<ThemeToggler />

<div className="block sm:hidden">
Expand Down

0 comments on commit eded34c

Please sign in to comment.