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

Autclose navbar on small screens #67

Merged
merged 2 commits into from
Nov 11, 2024
Merged

Autclose navbar on small screens #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
da7e82b
feat: autoclose sidebar dropdown on small screens
Bi1ku Oct 27, 2024
b63ed61
Whitespace
achoi51 Nov 11, 2024
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
80 changes: 38 additions & 42 deletions components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,49 +7,45 @@ import Sidebar from "./Sidebar";
import { useState } from "react";

const Navbar = () => {
const [viewSubSection, setViewSubSection] = useState(false);
function toggleMenu() {
setViewSubSection(!viewSubSection);
}
const [viewSubSection, setViewSubSection] = useState(false);
function toggleMenu() {
setViewSubSection(!viewSubSection);
}

return (
<div id={styles.nav_parent}>
<nav id={styles.nav}>
<div
id={styles.hamburgerMenu}
className="button"
onClick={toggleMenu}
>
<Image
src="/images/hamburger-menu.svg"
width={30}
height={30}
id={styles.hamburgerMenu}
className="button"
alt="Button to view the departments"
/>
</div>
return (
<div id={styles.nav_parent}>
<nav id={styles.nav}>
<div id={styles.hamburgerMenu} className="button" onClick={toggleMenu}>
<Image
src="/images/hamburger-menu.svg"
width={30}
height={30}
id={styles.hamburgerMenu}
className="button"
alt="Button to view the departments"
/>
</div>

<span
id={styles.logo_container}
className={styles.clickable_nav_element}
>
<Link passHref href="/">
<div>
<span id={styles.logo_the}>The </span>Spectator
</div>
</Link>
</span>
<div
id={styles.subscribe_parent}
className={styles.clickable_nav_element}
>
<Link href="/subscribe">
<p id={subscribe_button_styles.subscribe_button_navbar}>
Subscribe
</p>
</Link>
</div>
<span
id={styles.logo_container}
className={styles.clickable_nav_element}
>
<Link passHref href="/">
<div>
<span id={styles.logo_the}>The </span>Spectator
</div>
</Link>
</span>
<div
id={styles.subscribe_parent}
className={styles.clickable_nav_element}
>
<Link href="/subscribe">
<p id={subscribe_button_styles.subscribe_button_navbar}>
Subscribe
</p>
</Link>
</div>

<div className={styles.clickable_nav_element}>
<CollapsibleSearch />
Expand Down Expand Up @@ -85,7 +81,7 @@ const Navbar = () => {
</span>
</div>
<div>
<Sidebar showSidebar={viewSubSection} />
<Sidebar showSidebar={viewSubSection} setShowSidebar={setViewSubSection} />
</div>
</div>
);
Expand Down
117 changes: 59 additions & 58 deletions components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,31 @@ import Image from "next/image";
import LatestPreviewImage from "./LatestPreviewImage";
import ThemeToggle from "./ThemeToggle";
import {
BsSpotify,
BsFacebook,
BsInstagram,
BsLinkedin,
BsGithub,
BsSpotify,
BsFacebook,
BsInstagram,
BsLinkedin,
BsGithub,
} from "react-icons/bs";

const Sidebar = (props: { showSidebar: boolean }) => {
const Sidebar = (props: { showSidebar: boolean; setShowSidebar: (v: boolean) => void }) => {
const { showSidebar, setShowSidebar } = props;
const autoClose = () => window.innerWidth <= 940 && setShowSidebar(false);

return (
<div
id={styles.sidebar_parent}
className={props.showSidebar ? "" : styles.hide}
>
<div id={styles.sidebar}>
<span className={styles.maindepartment}>
<Link passHref href="/">
<Link passHref href="/" onClick={autoClose}>
Home
</Link>
</span>
<div className={styles.department}>
<span className={styles.maindepartment}>
<Link href="/department/news">News</Link>
<Link href="/department/news" onClick={autoClose}>News</Link>
</span>
<div className={styles.subdepartment}>
<span>
Expand All @@ -51,7 +54,7 @@ const Sidebar = (props: { showSidebar: boolean }) => {

<div className={styles.department}>
<span className={styles.maindepartment}>
<Link href="/department/features">Features</Link>
<Link href="/department/features" onClick={autoClose}>Features</Link>
</span>
<div className={styles.subdepartment}>
<span>
Expand All @@ -74,7 +77,7 @@ const Sidebar = (props: { showSidebar: boolean }) => {

<div className={styles.department}>
<span className={styles.maindepartment}>
<Link href="/department/opinions">Opinions</Link>
<Link href="/department/opinions" onClick={autoClose}>Opinions</Link>
</span>
<div className={styles.subdepartment}>
<span>
Expand All @@ -93,12 +96,12 @@ const Sidebar = (props: { showSidebar: boolean }) => {
</div>

<span className={styles.maindepartment}>
<Link href="/department/science">Science</Link>
<Link href="/department/science" onClick={autoClose}>Science</Link>
</span>

<div className={styles.department}>
<span className={styles.maindepartment}>
<Link href="/department/ae">Arts & Entertainment</Link>
<Link href="/department/ae" onClick={autoClose}>Arts & Entertainment</Link>
</span>
<div className={styles.subdepartment}>
<span>
Expand Down Expand Up @@ -155,7 +158,7 @@ const Sidebar = (props: { showSidebar: boolean }) => {

<div className={styles.department}>
<span className={styles.maindepartment}>
<Link href="/department/humor">Humor</Link>
<Link href="/department/humor" onClick={autoClose}>Humor</Link>
</span>
<div className={styles.subdepartment}>
<span>
Expand All @@ -180,7 +183,7 @@ const Sidebar = (props: { showSidebar: boolean }) => {

<div className={styles.department}>
<span className={styles.maindepartment}>
<Link href="/department/sports">Sports</Link>
<Link href="/department/sports" onClick={autoClose}>Sports</Link>
</span>
<div className={styles.subdepartment}>
<span>
Expand All @@ -204,59 +207,57 @@ const Sidebar = (props: { showSidebar: boolean }) => {
</div>

<span className={styles.maindepartment}>
<Link href="/department/spec-plus">Spec+</Link>
<Link href="/department/spec-plus" onClick={autoClose}>Spec+</Link>
</span>
<span className={styles.maindepartment}>
<Link href="/about/recruitments">Recruitments</Link>
<Link href="/about/recruitments" onClick={autoClose}>Recruitments</Link>
</span>

<span className={styles.maindepartment}>
<Link href="https://pdf.stuyspec.com">
<Link href="https://pdf.stuyspec.com" onClick={autoClose}>
Virtual Archives
</Link>
</span>

<div id={styles.additional_features}>
<div className={styles.clickable_nav_element}>
<Link href="/subscribe">
<p id={subscribe_button_styles.subscribe}>
Subscribe
</p>
</Link>
</div>
<div className={styles.clickable_nav_element}>
<ThemeToggle />
</div>
</div>
<div id={styles.socialsBar}>
<div id={styles.column}>
<LatestPreviewImage
imageIndex={0}
imageClass={styles.archiveImage1}
/>
</div>
<div id={styles.additional_features}>
<div className={styles.clickable_nav_element}>
<Link href="/subscribe">
<p id={subscribe_button_styles.subscribe}>Subscribe</p>
</Link>
</div>
<div className={styles.clickable_nav_element}>
<ThemeToggle />
</div>
</div>
<div id={styles.socialsBar}>
<div id={styles.column}>
<LatestPreviewImage
imageIndex={0}
imageClass={styles.archiveImage1}
/>
</div>

<div id={styles.mediaButtons}>
<Link href="https://open.spotify.com/show/1D0i5KdRFdMNNUwsKVfpYb">
<BsSpotify id={styles.mediaButton} />
</Link>
<Link href="https://www.facebook.com/stuyspectator">
<BsFacebook id={styles.mediaButton} />
</Link>
<Link href="https://www.instagram.com/stuyspectator/">
<BsInstagram id={styles.mediaButton} />
</Link>
<Link href="https://www.linkedin.com/company/the-stuyvesant-spectator">
<BsLinkedin id={styles.mediaButton} />
</Link>
<Link href="https://github.com/stuyspec">
<BsGithub id={styles.mediaButton} />
</Link>
</div>
</div>
</div>
</div>
);
<div id={styles.mediaButtons}>
<Link href="https://open.spotify.com/show/1D0i5KdRFdMNNUwsKVfpYb">
<BsSpotify id={styles.mediaButton} />
</Link>
<Link href="https://www.facebook.com/stuyspectator">
<BsFacebook id={styles.mediaButton} />
</Link>
<Link href="https://www.instagram.com/stuyspectator/">
<BsInstagram id={styles.mediaButton} />
</Link>
<Link href="https://www.linkedin.com/company/the-stuyvesant-spectator">
<BsLinkedin id={styles.mediaButton} />
</Link>
<Link href="https://github.com/stuyspec">
<BsGithub id={styles.mediaButton} />
</Link>
</div>
</div>
</div>
</div>
);
};

export default Sidebar;
export default Sidebar;