docs: Reorganise documentation sidebar

apps/design-system-docs/docs/about/getting-started/design/getting_started_design.md

@@ -15,7 +15,7 @@ You'll need Figma access to work with EDS design components and libraries:
 
 **Join your design team** — Contact your team admin to join an existing team, or search for your team in Figma and request access.
 
-For detailed setup instructions, permissions guidance, and workspace organisation, see our [complete Figma guide](Figma.md).
+For detailed setup instructions, permissions guidance, and workspace organisation, see our [complete Figma guide](figma.md).
 
 ## Start Designing
 
@@ -47,7 +47,7 @@ Once you have Figma access, follow these specific steps to create your first EDS
 - Check that all interactive elements have proper spacing (minimum 44px touch targets)
 - Verify colour contrast meets accessibility standards
 
-For detailed component usage, workspace setup, file organisation, and advanced Figma techniques, see our [complete Figma guide](Figma.md).
+For detailed component usage, workspace setup, file organisation, and advanced Figma techniques, see our [complete Figma guide](figma.md).
 
 ## Next Steps
 

apps/design-system-docs/docs/about/getting-started/getting_started.md

@@ -7,9 +7,9 @@ Choose your role below to jump straight into the resources and steps that matter
 
 ## Choose Your Path
 
-**As a designer**, you'll work with our Figma component libraries and design tokens. Access comprehensive documentation, usage guidelines, and accessibility considerations that help you create inclusive designs that translate smoothly to development. [Start your design journey ›](./design/index.md)
+**As a designer**, you'll work with our Figma component libraries and design tokens. Access comprehensive documentation, usage guidelines, and accessibility considerations that help you create inclusive designs that translate smoothly to development. [Start your design journey ›](./design/getting_started_design.md)
 
-**As a developer**, install our React component library via `npm` and start building with production-ready components. You'll get full TypeScript support, thorough documentation, and practical examples for proper implementation. [Get coding with EDS ›](./develop/index.md)
+**As a developer**, install our React component library via `npm` and start building with production-ready components. You'll get full TypeScript support, thorough documentation, and practical examples for proper implementation. [Get coding with EDS ›](./develop/getting_started_development.md)
 
 **As a citizen developer**, explore our Power Platform templates and component libraries. Use ready-made templates for Power Apps and Power BI that follow EDS principles, helping you create professional solutions with familiar low-code tools. [Build with Power Platform ›](./develop/citizen_developers.md)
 

apps/design-system-docs/docs/about/getting-started/team_roles.md

@@ -8,8 +8,8 @@ As a team or project lead, you'll find the strategic guidance and practical supp
 
 **Direct team members to role-specific guides:**
 
-- **Designers** → [Figma setup and design workflows](design/index.md)
-- **Developers** → [Component installation and implementation](develop/index.md)
+- **Designers** → [Figma setup and design workflows](design/getting_started_design.md)
+- **Developers** → [Component installation and implementation](develop/getting_started_development.md)
 - **Citizen Developers** → [Low-code templates and Power Platform resources](develop//citizen_developers.md)
 
 **Plan your implementation approach:** Start with new projects rather than migrating existing work. This reduces risk and allows your team to build confidence with EDS components gradually.

apps/design-system-docs/docs/components/components.md

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 1
 title: Components
 ---
 

apps/design-system-docs/docs/foundation/patterns.md

@@ -10,7 +10,7 @@ The organisation of space is fundamental to great design. By aligning your compo
 
 EDS is built on an 8px ratio system, which means you should maintain a minimum of 8px spacing between objects and elements. This consistent spacing creates visual rhythm and helps establish clear relationships between interface elements.
 
-For comprehensive guidelines on implementing our grid system, please refer to the [grid documentation](./design-tokens/Grid.md).
+For comprehensive guidelines on implementing our grid system, please refer to the [grid documentation](./design-tokens/grid.md).
 
 ### Best Practices
 

apps/design-system-docs/sidebars.ts

@@ -4,6 +4,8 @@ import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'
 //Create as many sidebars as you want.
 const sidebars: SidebarsConfig = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
+
+  //About Section
   aboutSidebar: [
     'about/about_eds',
     {
@@ -45,12 +47,96 @@ const sidebars: SidebarsConfig = {
     },
     'about/team/team',
   ],
+  //Components Section
   componentsSidebar: [
+    'components/components',
+    {
+      type: 'category',
+      label: 'Data Display',
+      link: {
+        type: 'doc',
+        id: 'components/data-display/chip',
+      },
+      items: [
+        'components/data-display/chip',
+        'components/data-display/divider',
+        'components/data-display/list',
+        'components/data-display/popover',
+        'components/data-display/table_data_grid',
+        'components/data-display/table',
+        'components/data-display/tooltip',
+      ],
+    },
     {
-      type: 'autogenerated',
-      dirName: 'components',
+      type: 'category',
+      label: 'Feedback',
+      link: {
+        type: 'doc',
+        id: 'components/feedback/banner',
+      },
+      items: [
+        'components/feedback/banner',
+        'components/feedback/dialog',
+        'components/feedback/progress_indicators',
+        'components/feedback/scrim',
+        'components/feedback/snackbar',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Inputs',
+      link: {
+        type: 'doc',
+        id: 'components/inputs/autocomplete',
+      },
+      items: [
+        'components/inputs/autocomplete',
+        'components/inputs/button',
+        'components/inputs/date_time_picker',
+        'components/inputs/search',
+        'components/inputs/selection_controls',
+        'components/inputs/slider',
+        'components/inputs/textfield',
+        'components/inputs/toggle_button',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Navigation',
+      link: {
+        type: 'doc',
+        id: 'components/navigation/app_launcher',
+      },
+      items: [
+        'components/navigation/app_launcher',
+        'components/navigation/breadcrumbs',
+        'components/navigation/drawer',
+        'components/navigation/link',
+        'components/navigation/menu',
+        'components/navigation/pagination',
+        'components/navigation/sidebar',
+        'components/navigation/stepper',
+        'components/navigation/table_of_contents',
+        'components/navigation/tabs',
+        'components/navigation/topbar',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Surfaces',
+      link: {
+        type: 'doc',
+        id: 'components/surfaces/accordion',
+      },
+      items: [
+        'components/surfaces/accordion',
+        'components/surfaces/card',
+        'components/surfaces/side_sheet',
+        'components/surfaces/toolbar',
+      ],
     },
   ],
+  //Foundation Section
   foundationSidebar: [
     'foundation/accessibility',
     {
@@ -65,6 +151,10 @@ const sidebars: SidebarsConfig = {
     {
       type: 'category',
       label: 'Design Tokens',
+      link: {
+        type: 'doc',
+        id: 'foundation/design-tokens/grid',
+      },
       items: [
         'foundation/design-tokens/grid',
         'foundation/design-tokens/elevation',
@@ -78,6 +168,10 @@ const sidebars: SidebarsConfig = {
     {
       type: 'category',
       label: 'Assets',
+      link: {
+        type: 'doc',
+        id: 'foundation/assets/image_placeholder',
+      },
       items: [
         'foundation/assets/image_placeholder',
         'foundation/assets/logos',
@@ -88,7 +182,9 @@ const sidebars: SidebarsConfig = {
       ],
     },
   ],
+  //Resources Section
   resourcesSidebar: [{ type: 'autogenerated', dirName: 'resources' }],
+  //Support Section
   supportSidebar: [{ type: 'autogenerated', dirName: 'support' }],
 }