Start adding Sub-Tabs for Settings

src/pages/Settings/Settings.jsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 import { Stack } from '@mui/material';
 import { ToggleTabs, useLocalStore } from '@components';
 
 const OuterContainer = styled(Stack)`
+  position: relative;
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -12,46 +13,104 @@ const OuterContainer = styled(Stack)`
   padding: 10px 10px 0px 0px;
 `;
 
-const fields = {
+const Border = styled('div')`
-  departmentInformation: {
+  height: 1px;
+  width: 100%;
+  background-color: #A8A8A8;
+`;
+
+const Tab = styled('div')`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+  padding: 6px 16px;
+  font-size: 20px;
+  font-weight: 800;
+  color: grey;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: "WDXL Lubrifont TC";
+  letter-spacing: .05em;
+  word-spacing: .2em;
+`;
+
+const SlidingIndicator = styled('div')`
+  position: absolute;
+  height: 1px;
+  bottom: -1px;
+  background-color: #4D79FF;
+  transition: left 0.3s ease, width 0.3s ease;
+`;
+
+const settingsFields = [
+  {
+    id: 'dept-info',
     title: 'Information',
     tab: 'department',
-    fields: []
+    cards: [
+      {
+        id: 'company-info',
+        label: 'Company Information',
+        fields: [
+          {
+            id: 'company',
+            label: 'Company Name',
+            type: 'text'
           },
-  departmentPermissions: {
+          {
+            id: 'billing-address',
+            label: 'Billing Address',
+            type: 'text'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: 'dept-perms',
     title: 'Permissions',
     tab: 'department',
-    fields: []
+    cards: []
   },
-  departmentManagers: {
+  {
+    id: 'dept-mgrs',
     title: 'Managers',
     tab: 'department',
-    fields: []
+    cards: []
   },
-  departmentSubscriptions: {
+  {
+    id: 'dept-subs',
     title: 'Subscriptions',
     tab: 'department',
-    fields: []
+    cards: []
   },
-  myInformation: {
+  {
+    id: 'personal-info',
     title: 'Information',
     tab: 'personal',
-    fields: []
+    cards: []
   },
-  myNotifications: {
+  {
+    id: 'personal-noti',
     title: 'Notifications',
     tab: 'personal',
-    fields: []
+    cards: []
   },
-  departmentNotifications: {
+  {
+    id: 'dept-noti',
     title: 'Notifications',
     tab: 'department',
-    fields: []
+    cards: []
-  },
   }
+];
 
 export const Settings = () => {
   const { user } = useLocalStore();
+  const pageRefs = useRef({});
   const tabs = [
       {
           label: 'Personal',
@@ -63,12 +122,33 @@ export const Settings = () => {
       }
   ];
 
+
   const [tabValue, setTabValue] = useState(tabs[0]);
+  const [pageValue, setPageValue] = useState({});
+  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
+
+  console.log('pageValue: ', pageValue);
 
   useEffect(() => {
     document.title = 'ShiftSync | Settings';
   }, []);
 
+  useEffect(() => {
+    if (pageValue?.id && pageRefs.current[pageValue.id]) {
+      const el = pageRefs.current[pageValue.id];
+      const rect = el.getBoundingClientRect();
+      const containerRect = el.parentNode.getBoundingClientRect();
+      setIndicatorStyle({
+        left: rect.left - containerRect.left,
+        width: rect.width
+      });
+    }
+  }, [pageValue?.id]);
+
+  useEffect(() => {
+    setPageValue(settingsFields?.filter((field) => field?.tab === tabValue?.value)[0]);
+  }, [tabValue]);
+
   return (
     <div>
       {user?.administrator ? (
@@ -81,17 +161,31 @@ export const Settings = () => {
           />
         </OuterContainer>
       ) : null }
-      {tabValue?.value === 'personal' ? (
+      <OuterContainer>
-        <div>
+        {settingsFields?.filter((field) => field?.tab === tabValue?.value)?.map((field) => {
-          <h1>{`Settings Page${user?.administrator ? ` - ${tabValue?.label}` : ''}`}</h1>
+          return (
-          <Link to="/">Go to Home</Link>
+            <Tab
-        </div>
+              key={field?.id}
-      ) : (
+              ref={(el) => { pageRefs.current[field?.id] = el; }}
-        <div>
+              onClick={() => setPageValue(field)}
-          <h1>Settings Page - Department</h1>
+            >
-          <Link to="/">Go to Home</Link>
+              {field?.title}
-        </div>
+            </Tab>
-      )}
+          )
+        })}
+        <SlidingIndicator style={indicatorStyle} />
+      </OuterContainer>
+      <Border />
+      {pageValue?.cards?.map((card) => {
+        return (<div>
+          {card?.label}
+          {card?.fields?.map((field) => {
+            return (
+              <p>{field?.label}</p>
+            )
+          })}
+        </div>)
+      })}
     </div>
   );
 };