mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 10:51:20 +00:00
Fixes for menus, sizing fixes general css finagling, added cool hamburger buttons
This commit is contained in:
austinkelsay
austinkelsay
parent
79a0559995
commit
d353e948f7
@ -103,7 +103,7 @@ const HeroBanner = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${getHeroHeight()} ${isTabView ? 'mx-0 w-full' : 'm-4'} relative flex justify-center items-center overflow-hidden drop-shadow-2xl rounded-lg`}>
|
||||
<div className={`${getHeroHeight()} ${isTabView ? 'mx-0 w-full' : 'mt-4 mx-12'} relative flex justify-center items-center overflow-hidden drop-shadow-2xl rounded-lg`}>
|
||||
<Image
|
||||
src={HeroImage}
|
||||
alt="Banner"
|
||||
|
||||
@ -18,7 +18,7 @@ const responsiveOptions = [
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '575px',
|
||||
breakpoint: '675px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ const responsiveOptions = [
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '575px',
|
||||
breakpoint: '675px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ const responsiveOptions = [
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '575px',
|
||||
breakpoint: '675px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useRef } from 'react';
|
||||
import Image from 'next/image';
|
||||
import UserAvatar from './user/UserAvatar';
|
||||
import { Menubar } from 'primereact/menubar';
|
||||
import { Menu } from 'primereact/menu';
|
||||
import { useRouter } from 'next/router';
|
||||
import SearchBar from '../search/SearchBar';
|
||||
import 'primereact/resources/primereact.min.css';
|
||||
@ -14,6 +15,31 @@ const Navbar = () => {
|
||||
const windowWidth = useWindowWidth();
|
||||
const navbarHeight = '60px';
|
||||
const {ndk} = useNDKContext();
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const menu = useRef(null);
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
label: 'Content',
|
||||
icon: 'pi pi-play-circle',
|
||||
command: () => router.push('/content?tag=all')
|
||||
},
|
||||
{
|
||||
label: 'Feeds',
|
||||
icon: 'pi pi-comments',
|
||||
command: () => router.push('/feeds?channel=global')
|
||||
},
|
||||
{
|
||||
label: 'Subscribe',
|
||||
icon: 'pi pi-star',
|
||||
command: () => router.push('/subscribe')
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
icon: 'pi pi-info-circle',
|
||||
command: () => router.push('/about')
|
||||
}
|
||||
];
|
||||
|
||||
const start = (
|
||||
<div className='flex items-center'>
|
||||
@ -25,8 +51,28 @@ const Navbar = () => {
|
||||
height={50}
|
||||
className="rounded-full mr-2 max-tab:hidden max-mob:hidden"
|
||||
/>
|
||||
<h1 className="text-white text-xl font-semibold max-tab:text-2xl max-mob:text-2xl">PlebDevs</h1>
|
||||
<h1 className="text-white text-xl font-semibold max-tab:text-2xl max-mob:text-2xl pb-1">PlebDevs</h1>
|
||||
</div>
|
||||
<div
|
||||
className={`ml-2 p-2 cursor-pointer transition-all duration-300 flex items-center justify-center ${isHovered ? 'bg-gray-700 rounded-full' : ''}`}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
onClick={(e) => menu.current.toggle(e)}
|
||||
style={{ width: '40px', height: '40px' }}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
{/* Show hamburger menu on mobile (< 600px) and up/down arrows on larger screens */}
|
||||
{windowWidth <= 600 ? (
|
||||
<i className="pi pi-bars text-white text-xl" />
|
||||
) : (
|
||||
<>
|
||||
<i className="pi pi-angle-up text-white text-base" />
|
||||
<i className="pi pi-angle-down text-white text-base" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Menu model={menuItems} popup ref={menu} />
|
||||
{ndk && windowWidth > 600 && <SearchBar />}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -70,7 +70,7 @@ const UserAvatar = () => {
|
||||
// Only show the "Create" option for admin users
|
||||
...(isAdmin ? [{
|
||||
label: 'Create',
|
||||
icon: 'pi pi-book',
|
||||
icon: 'pi pi-file-edit',
|
||||
command: () => router.push('/create')
|
||||
}] : []),
|
||||
{
|
||||
@ -84,14 +84,6 @@ const UserAvatar = () => {
|
||||
userAvatar = (
|
||||
<>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<GenericButton
|
||||
outlined
|
||||
rounded
|
||||
label="About"
|
||||
className='mr-4'
|
||||
onClick={() => router.push('/about')}
|
||||
size={windowWidth < 768 ? 'small' : 'normal'}
|
||||
/>
|
||||
<div onClick={(event) => menu.current.toggle(event)} className={`flex flex-row items-center justify-between cursor-pointer hover:opacity-75`}>
|
||||
<Image
|
||||
alt="logo"
|
||||
@ -112,14 +104,6 @@ const UserAvatar = () => {
|
||||
} else {
|
||||
userAvatar = (
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<GenericButton
|
||||
outlined
|
||||
rounded
|
||||
label="About"
|
||||
className='mr-4'
|
||||
onClick={() => router.push('/about')}
|
||||
size={windowWidth < 768 ? 'small' : 'normal'}
|
||||
/>
|
||||
<GenericButton
|
||||
label="Login"
|
||||
icon="pi pi-user"
|
||||
|
||||
@ -10,7 +10,6 @@ import { useContentSearch } from '@/hooks/useContentSearch';
|
||||
import { useCommunitySearch } from '@/hooks/useCommunitySearch';
|
||||
import { useRouter } from 'next/router';
|
||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||
import styles from './searchbar.module.css';
|
||||
|
||||
const SearchBar = () => {
|
||||
const { searchContent, searchResults: contentResults } = useContentSearch();
|
||||
@ -77,7 +76,7 @@ const SearchBar = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`absolute ${windowWidth < 700 ? "left-[40%]" : "left-[50%]"} transform -translate-x-[50%]`}>
|
||||
<div className={`absolute ${windowWidth < 950 ? "left-[55%]" : "left-[50%]"} transform -translate-x-[50%]`}>
|
||||
<IconField iconPosition="left">
|
||||
<InputIcon className="pi pi-search"> </InputIcon>
|
||||
<InputText
|
||||
@ -101,7 +100,6 @@ const SearchBar = () => {
|
||||
className: 'mx-0 px-0 shadow-lg'
|
||||
}
|
||||
}}
|
||||
className={styles.dropdown}
|
||||
value={selectedSearchOption}
|
||||
onChange={(e) => setSelectedSearchOption(e.value)}
|
||||
options={searchOptions}
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
/* .dropdown {
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.dropdown:focus,
|
||||
.dropdown:active,
|
||||
.dropdown:hover {
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
} */
|
||||
|
||||
/* Override any potential global styles */
|
||||
/* .dropdown * {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
} */
|
||||
@ -1,6 +1,5 @@
|
||||
import Head from 'next/head';
|
||||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
// import GenericCarousel from '@/components/content/carousels/GenericCarousel';
|
||||
import CoursesCarousel from '@/components/content/carousels/CoursesCarousel';
|
||||
import VideosCarousel from '@/components/content/carousels/VideosCarousel';
|
||||
import DocumentsCarousel from '@/components/content/carousels/DocumentsCarousel';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user