added accordion option

packages/dnb-design-system-portal/gatsby-config.js

@@ -125,7 +125,8 @@ const plugins = [
       elements: [
         {
           selector: '#portal-sidebar-menu',
-          ensureInView: '#portal-sidebar-menu ul li.is-active',
+          ensureInView:
+            '#portal-sidebar-menu ul li.is-active > .dnb-sidebar-menu__item',
         },
       ],
     },

packages/dnb-design-system-portal/src/docs/uilib/components.mdx

@@ -2,6 +2,7 @@
 title: 'Components'
 icon: 'components'
 order: 7
+expanded: true
 ---
 
 import ListComponents from 'dnb-design-system-portal/src/shared/parts/ListComponents'

packages/dnb-design-system-portal/src/docs/uilib/extensions.mdx

@@ -4,6 +4,7 @@ icon: 'extensions'
 order: 8
 redirect_from:
   - /uilib/patterns
+expanded: true
 ---
 
 import ListExtensions from 'dnb-design-system-portal/src/shared/parts/ListExtensions'

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form.mdx

@@ -15,6 +15,7 @@ breadcrumb:
     href: /uilib/extensions/forms/
   - text: Form
     href: /uilib/extensions/forms/Form/
+expanded: false
 ---
 
 import Info from 'Docs/uilib/extensions/forms/Form/info'

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Appearance.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'Appearance'
 description: '`Form.Appearance` is a provider for theming form fields.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/ButtonRow.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'ButtonRow'
 description: '`Form.ButtonRow` is a wrapper for horizontally separated buttons.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/FieldProps.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'FieldProps'
 description: '`Form.FieldProps` is a provider for forwarding fields properties, such as `required` or `disabled` to all nested field components.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'Handler'
 description: '`Form.Handler` provides both the DataContext.Provider and a HTML form element.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'MainHeading'
 description: '`Form.MainHeading` is a standardized main heading for sections, ensuring default layout, spacing etc.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'Section'
 description: '`Form.Section` lets you compose blocks of fields and values to be reused in different contexts.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/EditContainer.mdx

@@ -3,7 +3,6 @@ title: 'EditContainer'
 description: '`Form.Section.EditContainer` enables users to toggle (with animation) the content of each item between the view and edit container.'
 order: 9
 showTabs: true
-hideInMenu: true
 tabs:
   - title: Info
     key: '/info'

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/ViewContainer.mdx

@@ -3,7 +3,6 @@ title: 'ViewContainer'
 description: '`Form.Section.ViewContainer` enables users to toggle (with animation) the content of each item between the view and edit container.'
 order: 8
 showTabs: true
-hideInMenu: true
 tabs:
   - title: Info
     key: '/info'

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'SubHeading'
 description: '`Form.SubHeading` is a standardized sub heading for sections, ensuring default layout, spacing etc.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitButton.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'SubmitButton'
 description: '`Form.SubmitButton` connects to the `Form.Handler` to submit the active state of the internal DataContext, triggering `onSubmit`.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'SubmitIndicator'
 description: '`Form.SubmitIndicator` lets you show an indicator while async form operations are performed.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Visibility.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'Visibility'
 description: '`Form.Visibility` makes it possible to hide components and elements on the screen based on the dynamic state of data.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/getData.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'getData'
 description: '`Form.getData` lets you access your form data outside of the form context.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/setData.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'setData'
 description: '`Form.setData` lets you set or modify your form data outside of the form context.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useData.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'useData'
 description: '`Form.useData` lets you access or modify your form data outside of the form context within your application.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useError.mdx

@@ -1,7 +1,6 @@
 ---
 title: 'useError'
 description: '`Form.useError` lets you monitor your form errors outside of the form itself.'
-hideInMenu: true
 showTabs: true
 tabs:
   - title: Info

packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss

@@ -66,6 +66,7 @@
       min-height: 40px;
 
       display: flex;
+      flex-grow: 1;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
@@ -91,7 +92,7 @@
       &.is-inside-active-path {
         background-color: transparent;
       }
-      > .dnb-anchor {
+      > .dnb-sidebar-menu__item .dnb-anchor {
         background-color: transparent;
         margin-left: var(--level-icon-adjust);
         margin-bottom: 1rem;
@@ -105,7 +106,7 @@
     }
 
     &.l-2 {
-      > .dnb-anchor {
+      > .dnb-sidebar-menu__item .dnb-anchor {
         padding-left: calc(var(--level-offset) + var(--level) * 2);
         min-height: 56px;
 
@@ -123,7 +124,7 @@
     }
 
     &.l-3 {
-      > .dnb-anchor {
+      > .dnb-sidebar-menu__item .dnb-anchor {
         padding-left: calc(var(--level-offset) + var(--level) * 3);
       }
 
@@ -134,17 +135,17 @@
       }
     }
 
-    &.l-4 > .dnb-anchor {
+    &.l-4 > .dnb-sidebar-menu__item .dnb-anchor {
       padding-left: calc(var(--level-offset) + var(--level) * 4);
     }
-    &.l-5 > .dnb-anchor {
+    &.l-5 > .dnb-sidebar-menu__item .dnb-anchor {
       padding-left: calc(var(--level-offset) + var(--level) * 5);
     }
-    &.l-6 > .dnb-anchor {
+    &.l-6 > .dnb-sidebar-menu__item .dnb-anchor {
       padding-left: calc(var(--level-offset) + var(--level) * 6);
     }
 
-    .dnb-anchor:hover {
+    .dnb-sidebar-menu__item .dnb-anchor:hover {
       --anchor-background: var(--dnb-sidebar-menu-hover-bg);
       color: var(--color-black);
       > span:first-child {
@@ -191,33 +192,6 @@
       }
     }
 
-    .main-menu-toggle {
-      margin-left: var(--level-offset);
-
-      .dnb-icon:nth-of-type(1) {
-        color: var(--color-sea-green);
-        margin-right: 0.5rem;
-
-        &.dnb-icon--small {
-          margin-left: 0.5rem;
-        }
-      }
-
-      &.dnb-button__text {
-        color: var(--color-sea-green);
-      }
-      &.dnb-button:hover {
-        color: var(--color-black);
-        .dnb-button__text,
-        .dnb-icon {
-          color: inherit;
-        }
-      }
-
-      margin-top: 1rem;
-      margin-bottom: 2rem;
-    }
-
     .dnb-sidebar-menu__theme-badge {
       position: absolute;
       display: flex;
@@ -253,7 +227,17 @@
       }
     }
   }
-
+  .dnb-sidebar-menu__item {
+    display: flex;
+    justify-content: space-between;
+  }
+  .dnb-sidebar-menu__expand-button {
+    align-self: center;
+    &:hover {
+      background-color: white;
+      outline: 1px solid currentcolor;
+    }
+  }
   #portal-sidebar-menu {
     /*
     Good for a mobile menu instead