added side panel

README.md

@@ -15,6 +15,12 @@ yarn dev
 yarn test
 ```
 
+## Generate DB types
+Replace `abcd12345` with project ID.
+```sh
+npx supabase gen types typescript --project-id abcd12345 > database.types.ts
+```
+
 ## Deployment
 
 ```sh

app/components/Navbar.tsx

@@ -1,37 +1,21 @@
 import { useEffect, useState, useRef } from 'react'
 import { Link } from "@remix-run/react";
-import { useTheme } from '~/utils/ThemeProvider';
 
 import titleLogoImage from "~/assets/title_logo.png"
+import useScrollBehavior from '../utils/Navbar/useScrollBehavior';
 
-export default function Navbar(){
-    const [theme, setTheme] = useTheme();
-    const toggleTheme = () => {
-        setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
-    };
 
-    const lastScrollY = useRef<number>(0); // useRef allows handler to read updated data
-    const [navIsShown, setNavIsShown] = useState<boolean>(true);
+type Props = {
+    setSidePanelIsShown: React.Dispatch<React.SetStateAction<boolean>>;
+};
 
-    const handleScroll = () => {
-        setNavIsShown(window.scrollY <= lastScrollY.current);
-        lastScrollY.current = window.scrollY;
-    };
-
-    // set up scroll event listener
-    useEffect(()=>{
-        window.addEventListener("scroll", handleScroll);
-        return () => {
-            window.removeEventListener("scroll", handleScroll);
-        };
-    }, [])
-
-    const navShownStyle = navIsShown ? "top-0" : "-top-24";
-
-    return <div className={navShownStyle +
-    ' sticky transition-[top] ease-in-out duration-500 bg-red-800'}>
-            {/* <button onClick={toggleTheme}>Theme: {theme}</button> */}
+export default function Navbar(
+    {setSidePanelIsShown}
+: Props){
+    const {navIsShown} = useScrollBehavior();
 
+    return <div className={(navIsShown ? "top-0" : "-top-32") +
+    ' fixed transition-[top] ease-in-out duration-500 w-screen bg-red-800'}>
             <div className='
                 flex flex-row justify-between
                 max-w-screen-lg mx-auto h-auto
@@ -42,15 +26,15 @@ export default function Navbar(){
                 </Link>
                 <div>
                     <Link to="/profile">
-                        Profile
+                        <button className='btn'>Profile</button>
                     </Link>
                     <Link to="/store">
-                        Store
+                        <button className='btn'>Store</button>
                     </Link>
                     <Link to="/cart">
-                        Cart
+                        <button className='btn'>Cart</button>
                     </Link>
-                    <button>
+                    <button className='btn' onClick={()=>setSidePanelIsShown(true)}>
                         More
                     </button>
                 </div>

app/components/SidePanel.tsx

@@ -0,0 +1,25 @@
+import { useTheme } from '~/utils/Navbar/ThemeProvider';
+
+type Props = {
+    sidePanelIsShown: boolean;
+    setSidePanelIsShown: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export default function SidePanel(
+    {sidePanelIsShown, setSidePanelIsShown}
+: Props){
+    const [theme, setTheme] = useTheme();
+    const toggleTheme = () => {
+        setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+    };
+
+    return <div 
+    className={(sidePanelIsShown ? "right-0" : "-right-96") + 
+    ` fixed h-screen transition-[right] ease-in-out duration-500
+    w-96 max-w-full bg-gray-800 flex flex-col items-center`
+    }>
+        <button className='btn' 
+        onClick={()=>setSidePanelIsShown(false)}>CLOSE</button>
+        <button className='btn' onClick={toggleTheme}>Theme: {theme}</button>
+    </div>
+}

app/root.tsx

@@ -17,9 +17,13 @@ import { useLocation } from "@remix-run/react";
 
 
 import stylesheet from "~/tailwind.css";
-import { ThemeProvider, useTheme, ThemeType } from '~/utils/ThemeProvider';
-import { getThemeSession } from './utils/theme.server';
+import { ThemeProvider, useTheme, ThemeType } from '~/utils/Navbar/ThemeProvider';
+import { getThemeSession } from './utils/Navbar/theme.server';
+
+
 import Navbar from "./components/Navbar";
+import SidePanel from "./components/SidePanel";
+
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
@@ -67,10 +71,10 @@ function App() {
 
 
   const [theme] = useTheme();
+  const [sidePanelIsShown, setSidePanelIsShown] = useState<boolean>(false);
 
 
-
-  // hide nav for specific routes
+  // hide for specific routes
   const location = useLocation();
   const routesToHideNavigation = ['/login', '/signup'];
   const shouldHideNavigation = routesToHideNavigation.includes(location.pathname);
@@ -86,7 +90,10 @@ function App() {
         <Links />
       </head>
       <body>
-        {shouldHideNavigation ? null : <Navbar/>}
+        {shouldHideNavigation ? null : <>
+          <Navbar setSidePanelIsShown={setSidePanelIsShown}/>
+          <SidePanel sidePanelIsShown={sidePanelIsShown} setSidePanelIsShown={setSidePanelIsShown} />
+        </>}
 
         <Outlet  context={{ supabase }}  />
         <Scripts />

app/routes/action.set-theme.tsx

@@ -1,8 +1,8 @@
 import { json, redirect } from '@remix-run/node';
 import type { ActionFunction, LoaderFunction } from '@remix-run/node';
 
-import { getThemeSession } from '~/utils/theme.server';
-import { isTheme } from '~/utils/ThemeProvider';
+import { getThemeSession } from '~/utils/Navbar/theme.server';
+import { isTheme } from '~/utils/Navbar/ThemeProvider';
 
 export const action: ActionFunction = async ({ request }) => {
   const themeSession = await getThemeSession(request);

app/tailwind.css

@@ -22,6 +22,13 @@ body * {
 }
 
 
+/* CUSTOM CLASSES */
+.btn {
+    @apply font-bold py-2 px-4 rounded-lg text-secondary-color bg-primary-color;
+}
+
+
+
 /* SCROLLBAR */
 /* width */
 ::-webkit-scrollbar {

app/utils/Navbar/useScrollBehavior.ts

@@ -0,0 +1,22 @@
+// navbar behavior: hide/show on scroll down/up
+import { useEffect, useState, useRef } from 'react';
+
+export default function useScrollBehavior(): ({navIsShown: boolean}){
+    const lastScrollY = useRef<number>(0); // useRef allows handler to read updated data
+    const [navIsShown, setNavIsShown] = useState<boolean>(true);
+
+    const handleScroll = () => {
+        setNavIsShown(window.scrollY <= lastScrollY.current);
+        lastScrollY.current = window.scrollY;
+    };
+
+    // set up scroll event listener
+    useEffect(()=>{
+        window.addEventListener("scroll", handleScroll);
+        return () => {
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, [])
+
+    return { navIsShown };
+}