Add Section Manager (inside new_lib to avoid conflict)

Shadow. V2/frontend/lib/lib/lib/new_lib/main.dart

@@ -0,0 +1,139 @@
+import 'package:flutter/material.dart';
+import 'package:fronte/new_lib/main_page.dart';
+import 'package:fronte/new_lib/pages/dashboard/overview.dart';
+import 'package:fronte/new_lib/pages/homepage.dart';
+import 'package:fronte/new_lib/pages/profiles/change_password.dart';
+import 'package:fronte/new_lib/pages/profiles/overview.dart';
+import 'package:fronte/new_lib/sections.dart';
+
+// Note: To navigate to a pages, use context.go(<url>)
+//  (which, context is from build function (Widget build(BuildContext context))
+
+// A list of global pages (not belong to any section, like Home Page, Login Page,...)
+final _sectionGlobalPages = [
+  {
+    "name": "Home Page",            // The name of the page (optional, use in case listed).
+    "path": "/home",                // The path (url) to the page.
+    "listed": false,                // Enable/disable to have a navigate button show up on the sidebar
+                                    //   (optional, default to true).
+    "pageWidget": const Homepage()  // The widget of the page.
+  }
+];
+
+// A map of multiple section of pages
+final _sectionLayoutMap = {
+  "dashboard": {
+    "name": "Dashboard",                        // The name of the section (optional, use in case listed).
+    "path": "/dashboard",                       // The path (url) to the section.
+    "listed": true,                             // Enable/disable to have a navigate button for the section
+                                                //   and all of it's pages show up on the sidebar
+                                                //   (optional, default to true).
+    "redirectPath": "/dashboard/overview",      // The redirected path to a page of the section
+                                                //   (like, the initial page).
+
+    // A list of pages of the section
+    "pages": [
+      {
+        "name": "Overview",                     // The name of the page (optional, use in case listed).
+        "path": "/dashboard/overview",          // The path (url) to the page.
+        "listed": true,                         // Enable/disable to have a navigate button show up on the sidebar
+                                                //   (optional, default to true).
+        "pageWidget": const DashboardOverview() // The widget of the page.
+      },
+      {
+        "name" : "Information",
+        "path": "/dashboard/information",
+        "listed": true,
+        "pageWidget": Center(child: Text("Information"))
+      }
+    ]
+  },
+  "profiles" : {
+    "name": "Profiles",
+    "path": "/profiles",
+    "listed": true,
+    "redirectPath": "/profiles/overview",
+    "pages": [
+      {
+        "name": "Overview",
+        "path": "/profiles/overview",
+        "listed": true,
+        "pageWidget": const ProfilesOverview()
+      },
+      {
+        "name": "Change Password",
+        "path": "/profiles/change_password",
+        "listed": true,
+        "pageWidget": const ChangePasswordPage()
+      }
+    ]
+  }
+};
+
+void main() {
+  SectionManager.setSectionsMap(_sectionLayoutMap);
+  SectionManager.setGlobalPages(_sectionGlobalPages);
+  runApp(const ShadowBoxApp());
+}
+
+class ShadowBoxApp extends StatelessWidget {
+  const ShadowBoxApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp.router(
+      title: 'Shadow Box',
+      theme: ThemeData(
+        scaffoldBackgroundColor: const Color(0xFF121212),
+        primaryColor: const Color(0xFF00BCD4),
+        textTheme: const TextTheme(
+          bodyMedium: TextStyle(
+            color: Color(0xFFFFFFFF),
+            fontFamily: 'Segoe UI',
+          ),
+          labelLarge: TextStyle(
+            color: Color(0xFF00BCD4),
+            fontFamily: 'Segoe UI',
+          ),
+          headlineMedium: TextStyle(
+            fontSize: 26,
+            color: Color(0xFF00BCD4),
+            fontFamily: 'Segoe UI',
+          ),
+        ),
+        cardTheme: const CardTheme(color: Color(0xFF1E1E1E), elevation: 5),
+        elevatedButtonTheme: ElevatedButtonThemeData(
+          style: ElevatedButton.styleFrom(
+            backgroundColor: const Color(0xFF03A9F4),
+            foregroundColor: Colors.white,
+            textStyle: const TextStyle(fontSize: 16, fontFamily: 'Segoe UI'),
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+          ),
+        ),
+        textButtonTheme: TextButtonThemeData(
+          style: TextButton.styleFrom(
+            foregroundColor: const Color(0xFFCCCCCC),
+            textStyle: const TextStyle(fontFamily: 'Segoe UI'),
+          ),
+        ),
+        inputDecorationTheme: const InputDecorationTheme(
+          filled: true,
+          fillColor: Color(0xFF2A2A2A),
+          labelStyle: TextStyle(
+            color: Color(0xFFFFFFFF),
+            fontFamily: 'Segoe UI',
+          ),
+          border: OutlineInputBorder(
+            borderSide: BorderSide(color: Color(0xFF333333)),
+            borderRadius: BorderRadius.all(Radius.circular(5)),
+          ),
+        ),
+      ),
+      routerConfig: SectionManager.getGoRouter(
+        initialLocation: "/home",
+        builder: (widget) => MainPageScaffold(child: widget)
+      ),
+      debugShowCheckedModeBanner: false,
+    );
+  }
+}

Shadow. V2/frontend/lib/lib/lib/new_lib/main_page.dart

@@ -0,0 +1,175 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:fronte/new_lib/sections.dart';
+
+Widget getSectionPageWidget(SectionPage page, BuildContext context) {
+  return TextButton(
+    onPressed: () { context.go(page.path); },
+    child: Container(
+      alignment: Alignment.centerLeft,
+      width: double.infinity,
+      child: Text(
+        page.name,
+        style: TextStyle(
+            fontWeight: FontWeight.normal,
+            fontSize: 14,
+            overflow: TextOverflow.fade
+        ),
+      ),
+    ),
+  );
+}
+Widget getExpandedSectionWidget(Section section, BuildContext context) {
+  return SizedBox(
+    width: double.infinity,
+    child: Column(
+      children: [
+        TextButton(
+          onPressed: () { context.go(section.path); },
+          style: TextButton.styleFrom(
+            alignment: Alignment.centerLeft,
+            padding: EdgeInsets.symmetric(horizontal: 5)
+          ),
+          child: Container(
+            alignment: Alignment.centerLeft,
+            width: double.infinity,
+            child: Text(
+              section.name,
+              style: TextStyle(
+                  fontWeight: FontWeight.bold,
+                  fontSize: 16,
+                  overflow: TextOverflow.fade
+              ),
+            ),
+          ),
+        ),
+        Container(
+          padding: EdgeInsets.symmetric(horizontal: 5),
+          width: double.infinity,
+          child: Column(
+            children: section.pages.map((page) {
+              if (!page.listed) return null;
+              return getSectionPageWidget(page, context);
+            }).where((widget) => widget != null).cast<Widget>().toList(),
+          ),
+        )
+      ],
+    )
+  );
+}
+List<Widget> getSidebarSectionsWidgetList(BuildContext context) {
+  List<SectionPage> globalPages = SectionManager.getAllGlobalPages();
+  List<Section> sections = SectionManager.getAllSections();
+
+  List<Widget> res = [];
+  for (SectionPage page in globalPages) {
+    if (!page.listed) continue;
+    res.add(getSectionPageWidget(page, context));
+  }
+  for (Section section in sections) {
+    if (!section.listed) continue;
+    res.add(getExpandedSectionWidget(section, context));
+  }
+  return res;
+}
+
+class MainPageScaffold extends StatefulWidget {
+  final Widget? child;
+
+  const MainPageScaffold({super.key, this.child});
+
+  @override
+  State<MainPageScaffold> createState() => _MainPageScaffoldState();
+}
+
+class _MainPageScaffoldState extends State<MainPageScaffold> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Row(
+        children: [
+          SizedBox(
+            width: 240,
+            child: Container(
+              color: const Color(0xFF1E1E1E),
+              padding: const EdgeInsets.all(20),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: <Widget>[
+                  const Text(
+                    'ShadowBox',
+                    style: TextStyle(fontSize: 26, color: Color(0xFF00BCD4)),
+                  ),
+                  const SizedBox(height: 30),
+                  Expanded(
+                    child: Padding(
+                      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 30),
+                      child: ListView(
+                        children: getSidebarSectionsWidgetList(context),
+                      ),
+                    ),
+                  )
+                ],
+              ),
+            ),
+          ),
+          Expanded(
+            child: Column(
+              children: [
+                Container(
+                  height: 70,
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 33,
+                    vertical: 17,
+                  ),
+                  color: const Color(0xFF1F1F1F),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.end,
+                    children: [
+                      const Text('Hello, User'),
+                      const SizedBox(width: 14),
+                      Container(
+                        width: 40,
+                        height: 40,
+                        decoration: const BoxDecoration(
+                          shape: BoxShape.circle,
+                          border: Border(
+                            top: BorderSide(
+                              color: Color(0xFF03A9F4),
+                              width: 2
+                            ),
+                            left: BorderSide(
+                              color: Color(0xFF03A9F4),
+                              width: 2,
+                            ),
+                            right: BorderSide(
+                              color: Color(0xFF03A9F4),
+                              width: 2,
+                            ),
+                            bottom: BorderSide(
+                              color: Color(0xFF03A9F4),
+                              width: 2,
+                            ),
+                          ),
+                        ),
+                        child: ClipOval(
+                          child: Image.network(
+                            'https://via.placeholder.com/40',
+                            fit: BoxFit.cover,
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                Expanded(
+                  child: widget.child ?? Placeholder(),
+                )
+              ],
+            )
+          )
+        ],
+      )
+    );
+  }
+}

Shadow. V2/frontend/lib/lib/lib/new_lib/pages/dashboard/overview.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+class DashboardOverview extends StatefulWidget {
+  const DashboardOverview({super.key});
+
+  @override
+  State<DashboardOverview> createState() => _DashboardOverviewState();
+}
+
+class _DashboardOverviewState extends State<DashboardOverview> {
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Text("Overview")
+    );
+  }
+}

Shadow. V2/frontend/lib/lib/lib/new_lib/pages/homepage.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+class Homepage extends StatelessWidget {
+  const Homepage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: Card(
+          child: Padding(
+            padding: const EdgeInsets.all(40),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const Text(
+                  'Welcome to Shadowbox',
+                  style: TextStyle(
+                    fontSize: 26,
+                    color: Color(0xFF00BCD4),
+                  ),
+                ),
+                const SizedBox(height: 25),
+                const Text(
+                  'Your creative space awaits.',
+                  style: TextStyle(color: Color(0xFF777777)),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}