Notification sidebar loads, basic html structure is set up

app/views/notifications/_menu_notification_center.html.erb

@@ -0,0 +1 @@
+<op-ian-menu></op-ian-menu>

config/initializers/menus.rb

@@ -116,9 +116,9 @@ Redmine::MenuManager.map :application_menu do |menu|
 end
 
 Redmine::MenuManager.map :notifications_menu do |menu|
-  menu.push :work_packages_query_select,
-            { controller: '/work_packages', action: 'index' },
-            partial: 'work_packages/menu_query_select'
+  menu.push :notification_grouping_select,
+            { controller: '/my', action: 'notifications' },
+            partial: 'notifications/menu_notification_center'
 end
 
 Redmine::MenuManager.map :my_menu do |menu|

frontend/src/app/core/setup/global-dynamic-components.const.ts

@@ -172,6 +172,11 @@ import {
   InAppNotificationBellComponent,
   opInAppNotificationBellSelector,
 } from 'core-app/features/in-app-notifications/bell/in-app-notification-bell.component';
+import {
+  IANCenterMenuComponent,
+  ianCenterMenuSelector,
+} from 'core-app/features/in-app-notifications/center/menu/menu.component';
+
 
 export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
   { selector: appBaseSelector, cls: ApplicationBaseComponent },
@@ -221,4 +226,5 @@ export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
   { selector: slideToggleSelector, cls: SlideToggleComponent },
   { selector: backupSelector, cls: BackupComponent },
   { selector: opInAppNotificationBellSelector, cls: InAppNotificationBellComponent },
+  { selector: ianCenterMenuSelector, cls: IANCenterMenuComponent },
 ];

frontend/src/app/features/in-app-notifications/center/menu/menu.component.html

@@ -0,0 +1,49 @@
+<ul class="main-menu--children">
+  <li class="main-item-wrapper">
+    <a
+      class="op-menu--item-action overview-menu-item"
+      href="#"
+    >
+      Inbox
+    </a>
+  </li>
+  <li class="main-item-wrapper">
+    <a
+      class="op-menu--item-action overview-menu-item"
+      href="#"
+    >
+      Flagged
+    </a>
+  </li>
+  <li class="main-item-wrapper">
+    <a
+      class="op-menu--item-action overview-menu-item"
+      href="#"
+    >
+      My comments
+    </a>
+  </li>
+  <li>
+    <div class="tree-menu--container">
+      <ul class="pages-hierarchy -with-hierarchy collapsible-menu--container">
+        <li class="-hierarchy-expanded">
+          <div class="tree-menu--item">
+            <span class="tree-menu--hierarchy-span">
+              <button
+                class="tree-menu--hierarchy-indicator collapsible-menu--category-toggle"
+                type="button"
+              >
+                <span class="tree-menu--hierarchy-indicator-icon" aria-hidden="true"></span>
+              </button>
+              <span class="tree-menu--hierarchy-indicator-expanded hidden-for-sighted">Expanded. Click to collapse</span>
+              <span class="tree-menu--hierarchy-indicator-collapsed hidden-for-sighted">Collapsed. Click to show</span>
+            </span>
+            <ul class="pages-hierarchy -with-hierarchy">
+              <li class="collapsible-menu--placeholder">You have no </li>
+            </ul>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </li>
+</ul>

frontend/src/app/features/in-app-notifications/center/menu/menu.component.sass

@@ -0,0 +1,21 @@
+.op-ian-center
+  display: grid
+  grid-template-rows: 1fr auto
+  height: 100%
+
+  &--content
+    height: 100%
+
+  &--viewport
+    height: 100%
+
+  &--max-warning
+    margin-bottom: 0
+    text-align: center
+    font-style: italic
+
+  :host
+    .-browser-safari &
+      // Because of Safari's viewport bug, the address bar overlaps content with height: 100vh
+      // Check #38082 before changing it
+      height: 100%

frontend/src/app/features/in-app-notifications/center/menu/menu.component.ts

@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+} from '@angular/core';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
+import { IanCenterService } from 'core-app/features/in-app-notifications/center/state/ian-center.service';
+
+export const ianCenterMenuSelector = 'op-ian-menu';
+
+@Component({
+  selector: ianCenterMenuSelector,
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.sass'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IANCenterMenuComponent {
+  text = {
+    title: this.I18n.t('js.notifications.title'),
+    button_close: this.I18n.t('js.button_close'),
+    no_results: {
+      unread: this.I18n.t('js.notifications.no_unread'),
+      all: this.I18n.t('js.notice_no_results_to_display'),
+    },
+  };
+
+  constructor(
+    readonly cdRef:ChangeDetectorRef,
+    readonly I18n:I18nService,
+  ) {
+    console.log('menu');
+  }
+}