nav: rework for mobile

swat-sccs · Mar 27, 2024 · 21a4867 · 21a4867
1 parent 8dd0e4b
commit 21a4867
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 71 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -33,10 +33,6 @@ body {
 .ml-a {
     margin-left: auto;
 }
-.pad {
-    margin-left: 30px;
-    margin-right: 30px;
-}
 .margin-spacing {
     margin-top: 100px;
 }
@@ -180,7 +176,7 @@ select {
 }
 
 .text-selected {
-    color: #44608F;
+    color: #44608F !important;
 }
 
 .ml-2 {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,24 +1,27 @@
 import Nav from '@/components/nav'
 import './globals.css'
+import Script from 'next/script'
 
 export const metadata = {
-  title: 'Cygnet',
-  description: 'Generated by create next app',
+    title: 'Cygnet',
+    description: 'Generated by create next app',
 }
 
 export default function RootLayout({
-  children,
+    children,
 }: {
-  children: React.ReactNode
-}) { 
-  return (
-    <html lang="en">
-      <body className="bg">
-        <Nav />
-        <div className="container mont">
-          {children}
-        </div>
-      </body>
-    </html>
-  )
+    children: React.ReactNode
+}) {
+    return (
+        <html lang="en">
+            <body className="bg">
+                <Nav />
+                <div className="container mont">
+                    {children}
+                </div>
+            </body>
+            {/*@ts-ignore*/}
+            <Script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"/>
+        </html>
+    )
 }
diff --git a/components/nav.tsx b/components/nav.tsx
@@ -6,32 +6,38 @@ import Image from 'next/image';
 import { useRouter, usePathname } from 'next/navigation';
 
 export default function Nav() {
-  const router = useRouter();
-  const pathName = usePathname();
+    const router = useRouter();
+    const pathName = usePathname();
 
-  return (
-  <div className="bg-white shadow-sm mont position-fixed w-full z-max">
-    <ul className="nav container">
-      <li className="mr-auto">
-        <p className="play h1 mt-2 cursor-pointer" onClick={() => router.push("/")}>CYGNET<span className="h4 grad"> by SCCS</span></p>
-      </li>
-      <li className="nav-item my-auto ml-a pt-3 h5">
-        <a href="https://www.sccs.swarthmore.edu/docs" target="_blank" className="text-decoration-none text-black">
-          <p>About</p>
-        </a>
-      </li>
-      <li className="nav-item my-auto pt-3 h5 pad">
-        <p 
-          onClick={() => router.push("/settings")}
-          className={pathName == "/settings"?"text-selected":""}
-        >Settings</p>
-      </li>
-      <li className="nav-item my-auto">
-        <a href="https://www.instagram.com/swatsccs/" target="_blank">
-        <Image src={insta} alt="insta" className="insta-size" />
-        </a>
-      </li>
-    </ul>  
-  </div>
-  )
+    return (
+        <div className="bg-white navbar navbar-expand-lg shadow-sm mont position-fixed w-full z-max">
+            <div className="container">
+                <p className="play h1 mt-2 cursor-pointer" onClick={() => router.push("/")}>CYGNET<span className="h4 grad"> by SCCS</span></p>
+                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                    <span className="navbar-toggler-icon"></span>
+                </button>
+
+                <div className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
+                    <ul className="navbar-nav ms-auto mb-2 mb-lg-0 gap-md-4">
+                        <li className="nav-item my-auto ml-a pt-3 h5">
+                            <a href="https://www.sccs.swarthmore.edu/docs" target="_blank" className="text-decoration-none text-black">
+                                <p>About</p>
+                            </a>
+                        </li>
+                        <li className="nav-item ms-auto my-auto pt-3 h5">
+                            <p
+                                onClick={() => router.push("/settings")}
+                                className={pathName == "/settings" ? "text-selected" : ""}
+                            >Settings</p>
+                        </li>
+                        <li className="nav-item ms-auto my-auto">
+                            <a href="https://www.instagram.com/swatsccs/" target="_blank">
+                                <Image src={insta} alt="insta" className="insta-size" />
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    )
 }
diff --git a/components/searchbar.tsx b/components/searchbar.tsx
@@ -9,8 +9,8 @@ import { useState } from 'react';
 import { useSearchParams, usePathname, useRouter } from 'next/navigation';
 
 interface SearchbarProps {
-  setSearchQuery: (query: string) => void;
-  setFilters: (query: string) => void;
+    setSearchQuery: (query: string) => void;
+    setFilters: (query: string) => void;
 }
 
 export default function SearchBar() {
@@ -21,41 +21,43 @@ export default function SearchBar() {
     function handleSearch(term: string) {
         const params = new URLSearchParams(searchParams);
         if (term) {
-          params.set('query', term);
+            params.set('query', term);
         } else {
-          params.delete('query');
+            params.delete('query');
         }
         replace(`${pathname}?${params.toString()}`);
     }
 
     function handleFilters(term: string) {
         const params = new URLSearchParams(searchParams);
         if (term) {
-          params.set('filters', term);
+            params.set('filters', term);
         } else {
-          params.delete('filters');
+            params.delete('filters');
         }
         replace(`${pathname}?${params.toString()}`);
     }
 
     const [filterOn, setFilterOn] = useState(false);
 
-  return (
-    <>
-        <div className="bg-white margin-spacing rounded-pill d-inline-flex align-items-center w-full px-4 shadow-sm py-3 position-relative">
-          <Image src = {search} alt = "search" className="search-size-g"/>
-          <input
-          type = "search"
-          className = "flex-grow-1 mx-4 mont border-0 searchbar"
-          onChange={(e) => {
-            handleSearch(e.target.value);
-          }}
-          placeholder="Search for Swarthmore College students..."
-          defaultValue={searchParams.get('query')?.toString()}/>
-          <Image src={line} alt="|" className="search-size-g" />
-          <Image src={chevron} alt="filters" onClick={()=>setFilterOn(!filterOn)} className={filterOn?"chevron-down chevron":"chevron"}/>
-          <Filter filterOn={filterOn} setFilters={handleFilters}/>
-        </div>
-    </> 
-  )
+    return (
+        <>
+            <div className="container">
+                <div className="bg-white margin-spacing rounded-pill d-inline-flex align-items-center w-full px-4 shadow-sm py-3 position-relative">
+                    <Image src={search} alt="search" className="search-size-g" />
+                    <input
+                        type="search"
+                        className="flex-grow-1 mx-4 mont border-0 searchbar"
+                        onChange={(e) => {
+                            handleSearch(e.target.value);
+                        }}
+                        placeholder="Search for Swarthmore College students..."
+                        defaultValue={searchParams.get('query')?.toString()} />
+                    <Image src={line} alt="|" className="search-size-g" />
+                    <Image src={chevron} alt="filters" onClick={() => setFilterOn(!filterOn)} className={filterOn ? "chevron-down chevron" : "chevron"} />
+                    <Filter filterOn={filterOn} setFilters={handleFilters} />
+                </div>
+            </div>
+        </>
+    )
 }