Added compact mode control to navbar, adjusted animations to cards

stvnbash · Jun 21, 2022 · e8f75d4 · e8f75d4 · vercel · Jun 21, 2022
1 parent a1b01f9
commit e8f75d4
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 39 deletions.
diff --git a/components/Card.js b/components/Card.js
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import Image from 'next/image'
 
+
 export default function Card({ title, url, icon, description }) {
     // Tooltip sample
     // https://codepen.io/robstinson/pen/eYZLRdv

diff --git a/components/Category.js b/components/Category.js
@@ -4,15 +4,18 @@ import CardCompact from '../components/CardCompact'
 import { motion } from "framer-motion";
 
 
-export default function Category({ title, oid, cards, role, search }) {
-
-    const compactMode = true
+export default function Category({ title, oid, cards, role, search, compactmode }) {
 
     const item = {
         hidden: { y: 20, opacity: 0 },
         visible: {
           y: 0,
-          opacity: 1
+          opacity: 1,
+          transition: {
+            // delayChildren: 0.3,
+            // staggerChildren: 0.2,
+            delay: 0.025
+          }
         }
       };
 
@@ -25,7 +28,7 @@ export default function Category({ title, oid, cards, role, search }) {
             if (card.roles[ role[0] ].category.includes(oid)) {
                 if ( search === '' || card.title.toLowerCase().includes(search.toLowerCase()) || card.roles[ role[0] ].description.toLowerCase().includes(search.toLowerCase()) ){
                     // console.log(card.roles[ role[0] ].url)
-                    !compactMode ? items.push(<Card
+                    !compactmode ? items.push(<Card
                         title={card.title ? card.title : "None"}
                         description={card.roles[ role[0] ].description ? card.roles[ role[0] ].description : "#"}
                         url={card.roles[ role[0] ].url ? card.roles[ role[0] ].url : "#"}
@@ -73,10 +76,10 @@ export default function Category({ title, oid, cards, role, search }) {
 
     return (
         items.length > 0
-            ? <motion.div className="" initial="hidden" animate="visible" variants={item}>
+            ? <motion.div className="" initial="hidden" whileInView="visible" variants={item}>
                 <h2 className="mb-1 px-5 text-3xl font-semibold p-2 border-slate-400 border-b">{title}</h2>
                 {/* <hr /> */}
-                <div className="px-3 pb-5 pt-5 grid grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8 gap-1 sm:gap-4 overflow-hidden">
+                <motion.div initial="hidden" whileInView="visible" variants={item} className="px-3 pb-5 pt-5 grid grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8 gap-1 sm:gap-4 overflow-hidden">
                     {/* {cards.map((card, index) => (
                     <Card key={index} title={card.Title} imgURL={card.icon} priority={card.priority}/>
                 ))} */}
@@ -89,7 +92,7 @@ export default function Category({ title, oid, cards, role, search }) {
                 <Card title="Microsoft Office Portal" url="" icon="https://play-lh.googleusercontent.com/D6XDCje7pB0nNP1sOZkwD-tXkV0_As3ni21us5yZ71_sy0FTWv1s_MQBe1JUnHlgE94=s0-rw"/>
                 <Card title="Paycom" url="" icon="https://play-lh.googleusercontent.com/JGhdoNAdO_gYOyPImRbn7CxdeY4a71ZtnhNvTZGsRyYTObPzCXXIOKpSOaQFraU6XUt-=s0-rw"/>
                 <Card title="Adobe" url="" icon="https://play-lh.googleusercontent.com/WIVfY42FSk4naFCn42h694luehyzsifuiy2l0ok_-lFeb50qda_7j3YQdp0x2-S2_ykH=s0-rw"/> */}
-                </div>
+                </motion.div>
             </motion.div>
             : <div></div>
     )

diff --git a/components/CategorySelector.js b/components/CategorySelector.js
@@ -1,22 +1,22 @@
 import Link from 'next/link';
 import Category from './Category';
 
-export default function CategorySelector({categories, cards, role, search}) {
+export default function CategorySelector({ categories, cards, role, search, compactmode }) {
 
     // console.log(categories)
 
     categories.sort((a, b) => (a.id > b.id) ? 1 : -1)
-    
+
     // const items = []
     // for (let category of categories) {
     //     items.push(<Category title={category.title} oid={category.oid} cards={cards} role={role} key={category.id}/>)
     // }
-    
-    const items = categories.map(category => <Category title={category.title} oid={category.oid} cards={cards} role={role} key={category.id} search={search}/>)
+
+    const items = categories.map(category => <Category title={category.title} oid={category.oid} cards={cards} role={role} key={category.id} search={search} compactmode={compactmode} />)
 
     return (
         <div>
-        {items}
+            {items}
         </div>
     )
 

diff --git a/components/Navbar.js b/components/Navbar.js
@@ -1,6 +1,6 @@
 import { Fragment, useEffect } from 'react'
 import { Disclosure, Menu, Transition } from '@headlessui/react'
-import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
+import { BellIcon, MenuIcon, XIcon, ViewGridIcon, TableIcon } from '@heroicons/react/outline'
 import Link from 'next/link';
 import { useRouter } from "next/router";
 import Search from './Search';
@@ -21,7 +21,7 @@ function classNames(...classes) {
 }
 
 
-export default function Navbar({ setShowRoleSelector, role, setRole, setSearch }) {
+export default function Navbar({ setShowRoleSelector, role, setRole, setSearch, compactmode, setCompactmode }) {
   const router = useRouter();
   const onIndexPage = router.pathname !== "/" ? false : true;
   const { data: session, status } = useSession()
@@ -87,6 +87,14 @@ export default function Navbar({ setShowRoleSelector, role, setRole, setSearch }
                   }
               </div>
               <div className="sticky inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+              {
+                role[0] && onIndexPage && ((role[2] && session) || !role[2]) &&
+                <div className='sm:flex sm:flex-col hidden'>
+                    <p className='text-white px-3 pt-2 rounded-md text-sm font-medium mx-auto'>View</p>
+                    {compactmode && <button className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-1 rounded-md text-sm font-medium" onClick={() => { localStorage.setItem('compactmode', false); setCompactmode(false); }}><ViewGridIcon className="mx-auto block h-5 w-5" aria-hidden="true" /></button>}
+                    {!compactmode && <button className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-1 rounded-md text-sm font-medium" onClick={() => { localStorage.setItem('compactmode', true); setCompactmode(true); }}><TableIcon className="mx-auto block h-5 w-5" aria-hidden="true" /></button>}
+                </div>
+              }
               {
                 role[0] && onIndexPage &&
                 <div className='sm:flex sm:flex-col hidden'>

diff --git a/components/RoleSelector.js b/components/RoleSelector.js
@@ -82,7 +82,7 @@ export default function RoleSelector({ roles, showRoleSelector, setShowRoleSelec
                                             className="px-4 py-2 font-semibold text-md bg-blue-800 text-white rounded-full shadow-sm hover:shadow-lg hover:font-bold hover:underline hover:underline-offset-2 w-60"
                                             onClick={() => { signIn("azure-ad"); }
                                             }>
-                                            Sign in to myECR
+                                            Sign in to MyECR
                                         </button>
                                     </div>
                                 }

diff --git a/pages/_app.js b/pages/_app.js
@@ -20,40 +20,44 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
 
   const [search, setSearch] = useState('')
 
+  const [compactmode, setCompactmode] = useState(false)
+
 
   useEffect(() => {
     // console.log(localStorage)
-    localStorage.getItem('role') 
-    ? setRole([localStorage.getItem('role'), 
-      localStorage.getItem('role-title'), 
+    localStorage.getItem('role')
+      ? setRole([localStorage.getItem('role'),
+      localStorage.getItem('role-title'),
       localStorage.getItem('role-signin') == 'true',
-      localStorage.getItem('role-emailRegex')
-    ]) 
-    : setRole([null, null, null, null])
+      localStorage.getItem('role-emailRegex'),
+      ])
+      : setRole([null, null, null, null])
 
     localStorage.getItem('role') ? setShowRoleSelector(false) : setShowRoleSelector(true)
     // console.log(role)
+    localStorage.getItem('compactmode') ? setCompactmode(localStorage.getItem('compactmode') == 'true') : setCompactmode(false)
   }, [])
 
   return (
     <SessionProvider session={session}>
-    <div>
-      <NextNProgress color="#e2e8f0"/>
-      <Meta />
-      <div className='min-h-screen flex flex-col overflow-hidden'>
-        {/* <Header setShowRoleSelector={setShowRoleSelector} role={role} setRole={setRole} setSearch={setSearch}/> */}
-        {/* <Nav /> */}
-        <Navbar setShowRoleSelector={setShowRoleSelector} role={role} setRole={setRole} setSearch={setSearch} />
-
-        <main className="pt-2 md:pt-4 sm:px-10 bg-slate-200 overflow-y-auto  flex flex-grow flex-col justify-between z-10 h-0">
-          {/* Decided to implement Announcements for Index only
-          <Announcement Announcement_Title={"Welcome to the new MyECR"} Announcement_Body={"We are still working on migrating the following apps: Google, GoTo, Kelly, McGraw Hill, Naviance, Netsuite, Paycom"} /> */}
-          <Component {...pageProps} showRoleSelector={showRoleSelector} setShowRoleSelector={setShowRoleSelector} role={role} setRole={setRole} search={search} className="mb-auto" />
-          <Footer />
-        </main>
+      <div>
+        <NextNProgress color="#e2e8f0" />
+        <Meta />
+        <div className='min-h-screen flex flex-col overflow-hidden'>
+          {/* <Header setShowRoleSelector={setShowRoleSelector} role={role} setRole={setRole} setSearch={setSearch}/> */}
+          {/* <Nav /> */}
+          <Navbar setShowRoleSelector={setShowRoleSelector} role={role} setRole={setRole} setSearch={setSearch} compactmode={compactmode} setCompactmode={setCompactmode} />
+
+          <main className="pt-2 md:pt-4 sm:px-10 bg-slate-200 overflow-y-auto  flex flex-grow flex-col justify-between z-10 h-0">
+            {/* Decided to implement Announcements for Index only
+            <Announcement Announcement_Title={"Welcome to the new MyECR"} Announcement_Body={"We are still working on migrating the following apps: Google, GoTo, Kelly, McGraw Hill, Naviance, Netsuite, Paycom"} /> */}
+            <Component {...pageProps} showRoleSelector={showRoleSelector} setShowRoleSelector={setShowRoleSelector}
+              role={role} setRole={setRole} search={search} compactmode={compactmode} className="mb-auto" />
+            <Footer />
+          </main>
 
+        </div>
       </div>
-    </div>
     </SessionProvider>
   )
 

diff --git a/pages/index.js b/pages/index.js
@@ -10,7 +10,7 @@ import { useSession, signIn, signOut } from "next-auth/react"
 import AuthPrompt from '../components/AuthPrompt.js';
 
 
-export default function Home({ roles, categories, cards, showRoleSelector, setShowRoleSelector, role, setRole, search, alerts }) {
+export default function Home({ roles, categories, cards, showRoleSelector, setShowRoleSelector, role, setRole, search, alerts, compactmode }) {
   // const [role, setRole] = useState(null)
 
   // // https://developer.school/snippets/react/localstorage-is-not-defined-nextjs#why-does-this-happen
@@ -78,7 +78,7 @@ export default function Home({ roles, categories, cards, showRoleSelector, setSh
       } */}
       {
         !role[2] || (role[2] && session)
-          ? <CategorySelector categories={categories} cards={cards} role={role} search={search} />
+          ? <CategorySelector categories={categories} cards={cards} role={role} search={search} compactmode={compactmode} />
           : status === "unauthenticated" && <AuthPrompt role={role} />
       }
       {/* <h1 className="text-3xl font-bold underline">