feat: current profile widget list on left side bar

src/components/IFrameWidget/editor.tsx

@@ -54,7 +54,7 @@ class IFrameWidgetEditor extends Component<Props, IFrameWidgetProps> {
     return (
       <div>
         <>
-          <Typography variant="h6">
+          <Typography variant="h6" id={this.props.id}>
             IFrameWidget : {this.props.id}
           </Typography>
           <FormGroup>

src/components/TextWidget/editor.tsx

@@ -113,7 +113,7 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
     return (
       <div>
         <>
-          <Typography variant="h6">
+          <Typography variant="h6" id={this.props.id}>
             TextWidget : {this.props.id}
           </Typography>
           <FormGroup>

src/components/TimeWidget/editor.tsx

@@ -58,7 +58,7 @@ class TimeWidgetEditor extends Component<Props, TimeWidgetProps> {
     return (
       <div>
         <>
-          <Typography variant="h6">
+          <Typography variant="h6" id={this.props.id}>
             TimeWidget : {this.props.id}
           </Typography>
           <FormGroup>

src/components/admin/LeftSideNav/index.tsx

@@ -0,0 +1,59 @@
+import { useState, useEffect, MouseEvent } from 'react';
+import {
+  Drawer,
+  Toolbar,
+  List,
+  ListItem,
+  ListItemText,
+  Divider,
+} from '@mui/material';
+import { ref, onValue, DataSnapshot } from '@firebase/database';
+import { db } from '@/lib/firebase';
+
+type LeftSideBarProps = {
+  profile: string;
+}
+
+const LeftSideBar = ({ profile }: LeftSideBarProps) => {
+  const [widgets, setWidgets] = useState<string[]>([]);
+
+  useEffect(() => {
+    const widgetsRef = ref(db, `/profiles/${profile}/widgets`);
+    onValue(widgetsRef, (snap: DataSnapshot) => {
+      if (snap?.val()) {
+        setWidgets(Object.keys(snap.val()));
+      }
+    });
+  }, [profile]);
+
+  const drawerWidth = 160;
+
+  return (
+    <Drawer
+      sx={{
+        width: drawerWidth,
+        flexShrink: 0,
+        '& .MuiDrawer-paper': {
+          width: drawerWidth,
+          boxSizing: 'border-box',
+        }
+      }}
+      variant="permanent"
+      anchor="left"
+    >
+      <Toolbar />
+      <Divider />
+      <List>
+        {widgets.map((widget) => (
+          <ListItem key={widget}>
+            <ListItemText>
+              <a href={`#${widget}`}>{widget}</a>
+            </ListItemText>
+          </ListItem>
+        ))}
+      </List>
+    </Drawer>
+  );
+};
+
+export { LeftSideBar };

src/pages/admin/[id]/index.tsx

@@ -4,13 +4,15 @@ import { useRouter } from 'next/router';
 import {
   CssBaseline,
   Container,
+  Toolbar,
   Box,
 } from '@mui/material';
 import { User } from '@firebase/auth';
 import { AuthProvider } from '@/lib/AuthProvider';
 import { auth } from '@/lib/firebase';
 import { Signin } from '@/components/admin/signin';
 import { Navbar } from '@/components/admin/Navbar';
+import { LeftSideBar } from '@/components/admin/LeftSideNav';
 import { Editors } from '@/components/admin/Editors';
 
 const AdminIndexPage = () => {
@@ -34,19 +36,29 @@ const AdminIndexPage = () => {
         currentUser !== null ? (
           <AuthProvider>
             <CssBaseline />
-            <Box sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              width: '100%',
-              height: '100vh',
-              overflow: 'hidden',
-            }}>
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100%',
+                height: '100vh',
+                overflow: 'hidden',
+              }}
+            >
               <Navbar profile={currentProfile} />
-              <Container sx={{ flex: 1, overflow: 'auto' }}>
-                <Box my={4}>
-                  <Editors profile={currentProfile} />
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                }}
+              >
+                <LeftSideBar profile={currentProfile} />
+                <Box component="main">
+                  <Container sx={{ pt: 4, flex: 1, overflow: 'auto' }}>
+                    <Editors profile={currentProfile} />
+                  </Container>
                 </Box>
-              </Container>
+              </Box>
             </Box>
           </AuthProvider>
         ) : (