Closes Redocly#322: Feature request: Clickable logo that points to sp…

…ecific url

Add "Return to website" link to the top right that leads to `info.contacts.url` if any.
Increase padding top for `.api-info-wrapper` when left sidebar is hidding to avoid header overlaying by top menu.

lib/components/ApiInfo/api-info.html

@@ -1,4 +1,5 @@
 <div class="api-info-wrapper">
+  <a *ngIf="info.contact.url" href="{{info.contact.url}}" class="go-back-link">Return to website</a>
   <h1>{{info.title}} <span class="api-info-version">({{info.version}})</span></h1>
   <p class="download-openapi" *ngIf="specUrl">
     Download OpenAPI specification:

lib/components/ApiInfo/api-info.scss

@@ -5,10 +5,24 @@
   padding: $section-spacing;
   width: 60%;
 
+  .go-back-link {
+    float: right;
+    margin-top: -25px;
+
+    @media (max-width: $side-menu-mobile-breakpoint) {
+      margin-top: 0;
+      float: none;
+      display: block;
+      text-align: center;
+    }
+  }
 
   @media (max-width: $right-panel-squash-breakpoint) {
     width: 100%;
   }
+  @media (max-width: $side-menu-mobile-breakpoint) {
+    padding-top: $section-spacing + 20px;
+  }
 }
 
 .openapi-button {

lib/components/ApiLogo/api-logo.html

@@ -1 +1,4 @@
-<img *ngIf="logo.imgUrl" [attr.src]="logo.imgUrl" [ngStyle]="{'background-color': logo.bgColor}">
+<a *ngIf="logo.url" href="{{logo.url}}">
+    <img *ngIf="logo.imgUrl" [attr.src]="logo.imgUrl" [ngStyle]="{'background-color': logo.bgColor}">
+</a>
+<img *ngIf="logo.imgUrl && !logo.url" [attr.src]="logo.imgUrl" [ngStyle]="{'background-color': logo.bgColor}">

lib/components/ApiLogo/api-logo.ts

@@ -17,6 +17,9 @@ export class ApiLogo extends BaseComponent implements OnInit {
 
   init() {
     let logoInfo = this.componentSchema.info['x-logo'];
+    if ('url' in this.componentSchema.info['contact']) {
+      this.logo.url = this.componentSchema.info['contact']['url'];
+    }
     if (!logoInfo) return;
     this.logo.imgUrl = logoInfo.url;
     this.logo.bgColor = logoInfo.backgroundColor || 'transparent';