added link to proposal portal

Author: Shayan1375

src/app/layout/components/header/header.component.html

@@ -8,15 +8,19 @@
         hideSingleSelectionIndicator
         [placeholder]="profile?.info.name ? profile?.info.name : profile?.info.preferred_username"
       >
-        <mat-option (click)="logout()">
-          <fa-icon class="circle" size="lg" [fixedWidth]="true" [icon]="'sign-out-alt'"></fa-icon>
-          Logout
-        </mat-option>
         <mat-option (click)="getActuatorInfo()">
           <fa-icon class="circle" size="lg" [fixedWidth]="true" [icon]="'info'"></fa-icon>
           About
         </mat-option>
+        <mat-option (click)="logout()">
+          <fa-icon class="circle" size="lg" [fixedWidth]="true" [icon]="'sign-out-alt'"></fa-icon>
+          Logout
+        </mat-option>
       </mat-select>
     </mat-form-field>
+    <span class="link-like" (click)="navigateToProposalPortal()">
+      Antragsportal
+      <fa-icon size="1x" icon="external-link-alt"></fa-icon>
+    </span>
   </div>
 </mat-toolbar>

src/app/layout/components/header/header.component.scss

@@ -3,6 +3,7 @@
   font-size: 14px;
   margin: 0 0 1em 0;
 }
+
 .toolbar fa-icon {
   padding: 0 0 0 1em;
 }
@@ -13,9 +14,11 @@
   height: 105px;
   object-fit: cover;
 }
+
 .mat-toolbar {
   height: 105px;
 }
+
 .mat-toolbar-single-row {
   padding-left: 0px !important;
 }
@@ -43,3 +46,22 @@
 ::ng-deep .mdc-list-item__primary-text {
   width: 100%;
 }
+
+span.link-like {
+  padding-top: 0.3em;
+  padding-left: 1em;
+  cursor: pointer;
+  color: var(--num-color--primary);
+  font-size: medium;
+  font-weight: 500;
+  text-decoration: none;
+  /* No underline by default */
+  transition: color 0.2s ease;
+}
+
+span.link-like:hover {
+  text-decoration: underline;
+  /* Show underline on hover */
+  color: #0056b3;
+  /* Darker blue on hover */
+}

src/app/layout/components/header/header.component.ts

@@ -17,6 +17,7 @@ export class HeaderComponent implements OnInit, AfterViewInit {
   stylesheet: string;
   urlSrc: string;
   urlAlt: string;
+  proposalPortalLink: string;
 
   constructor(
     private oauthService: OAuthService,
@@ -47,4 +48,9 @@ export class HeaderComponent implements OnInit, AfterViewInit {
   public getActuatorInfo() {
     this.matDialog.open(AboutModalComponent, {});
   }
+
+  public navigateToProposalPortal() {
+    this.proposalPortalLink = this.featureService.getProposalPortalLink();
+    window.open(this.proposalPortalLink, '_blank');
+  }
 }

src/app/layout/font-awesome-icons.ts

@@ -1,11 +1,4 @@
-import {
-  faAngleDoubleLeft,
-  faArrowRight,
-  faExclamation,
-  faExclamationTriangle,
-  faFolderOpen,
-} from '@fortawesome/free-solid-svg-icons';
-import { faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
+import { faAngleDoubleRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { faArrowDown } from '@fortawesome/free-solid-svg-icons';
 import { faArrowUp } from '@fortawesome/free-solid-svg-icons';
@@ -16,6 +9,7 @@ import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import { faClipboardList } from '@fortawesome/free-solid-svg-icons';
 import { faCog } from '@fortawesome/free-solid-svg-icons';
 import { faCubes } from '@fortawesome/free-solid-svg-icons';
 import { faDna } from '@fortawesome/free-solid-svg-icons';
@@ -25,10 +19,13 @@ import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { faEye } from '@fortawesome/free-solid-svg-icons';
 import { faFile, faFileImage, faWindowMinimize } from '@fortawesome/free-solid-svg-icons';
 import { faFileUpload } from '@fortawesome/free-solid-svg-icons';
+import { faFilter } from '@fortawesome/free-solid-svg-icons';
 import { faFolder } from '@fortawesome/free-solid-svg-icons';
 import { faGlobeEurope } from '@fortawesome/free-solid-svg-icons';
 import { faGreaterThan } from '@fortawesome/free-solid-svg-icons';
 import { faGreaterThanEqual } from '@fortawesome/free-solid-svg-icons';
+import { faInfo } from '@fortawesome/free-solid-svg-icons';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { faLessThan } from '@fortawesome/free-solid-svg-icons';
 import { faLessThanEqual } from '@fortawesome/free-solid-svg-icons';
 import { faLink } from '@fortawesome/free-solid-svg-icons';
@@ -52,10 +49,13 @@ import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { faUsersCog } from '@fortawesome/free-solid-svg-icons';
 import { faWindowClose } from '@fortawesome/free-solid-svg-icons';
 import { faWrench } from '@fortawesome/free-solid-svg-icons';
-import { faFilter } from '@fortawesome/free-solid-svg-icons';
-import { faClipboardList } from '@fortawesome/free-solid-svg-icons';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import { faInfo } from '@fortawesome/free-solid-svg-icons';
+import {
+  faAngleDoubleLeft,
+  faArrowRight,
+  faExclamation,
+  faExclamationTriangle,
+  faFolderOpen,
+} from '@fortawesome/free-solid-svg-icons';
 import {
   faClone,
   faDatabase,
@@ -133,4 +133,6 @@ export const FONT_AWESOME_ICONS = [
   faExclamationTriangle,
   faInfoCircle,
   faInfo,
+  faLink,
+  faExternalLinkAlt,
 ];