(chore): Hamburger menu tweaks

src/app/modules/pro/channel/footer/footer.component.html

 <div class="m-pro--channel-footer">
- <span class="m-pro--channel-footer--text">{{ footerText }}</span>
 
- <span *ngFor="let profile of footerSocialProfiles">
+ <div class="m-pro--channel-footer__items">
  <a
- *ngIf="profile.key && profile.value"
- [href]="getSocialProfileURL(profile.value)"
- rel="noopener noreferrer"
- target="_blank"
- ><i [ngClass]="[getSocialProfileIconClass(profile)]"></i
- ></a>
- </span>
+ *ngFor="let link of footerLinks"
+ class="m-pro--channel-footer--link"
+ [href]="link.href"
+ >
+ {{ link.title }}
+ </a>
 
- <a
- *ngFor="let link of footerLinks"
- class="m-pro--channel-footer--link"
- [href]="link.href"
- >{{ link.title }}</a
- >
+ <ng-container *ngIf="currentUser">
+ <ng-container *ngIf="isStandalone">
+ <a
+ class="m-pro--channel-footer--link"
+ [href]="viewProfileHref"
+ target="_blank"
+ i18n
+ >
+ @{{ currentUsername }}
+ </a>
 
- <ng-container *ngIf="currentUser">
- <ng-container *ngIf="isStandalone">
- <a
- class="m-pro--channel-footer--link"
- [href]="viewProfileHref"
- target="_blank"
- i18n
- >@{{ currentUsername }}</a
- >
+ <a class="m-pro--channel-footer--link" (click)="logout()" i18n>Logout</a>
+ </ng-container>
 
- <a class="m-pro--channel-footer--link" (click)="logout()" i18n>Logout</a>
+ <ng-container *ngIf="!isOwner">
+ <span style="position: relative">
+ <minds-button-user-dropdown [user]="user"></minds-button-user-dropdown>
+ </span>
+ </ng-container>
  </ng-container>
+ </div>
 
- <ng-container *ngIf="!isOwner">
- <span style="position: relative">
- <minds-button-user-dropdown [user]="user"></minds-button-user-dropdown>
- </span>
- </ng-container>
- </ng-container>
+ <div class="m-pro--channel-footer__items m-pro--channel-footer__social-items">
+ <span *ngFor="let profile of footerSocialProfiles">
+ <a
+ *ngIf="profile.key && profile.value"
+ [href]="getSocialProfileURL(profile.value)"
+ rel="noopener noreferrer"
+ target="_blank"
+ ><i [ngClass]="[getSocialProfileIconClass(profile)]"></i
+ ></a>
+ </span>
+ </div>
+
+ <div class="m-pro--channel-footer__static">
+ <span class="m-pro--channel-footer--text">{{ footerText }}</span>
+ </div>
 </div>

src/app/modules/pro/channel/footer/footer.component.scss

@@ -3,12 +3,17 @@
  margin-bottom: 24px;
  color: var(--m-pro--text-color);
 
- > * {
+ .m-pro--channel-footer__items > * {
  display: inline-block;
  margin: 8px 16px;
  vertical-align: middle;
  }
 
+ .m-pro--channel-footer__social-items {
+ margin-bottom: 8px;
+ font-size: 1.5em;
+ }
+
  .m-pro--channel-footer--text {
  text-transform: uppercase;
  letter-spacing: 0.1em;

src/app/modules/pro/channel/hamburger-menu/hamburger-menu.component.scss

@@ -77,9 +77,13 @@ m-pro__hamburger-menu {
  }
  }
 
- m-pro--channel-footer {
+ .m-pro--channel-footer {
  display: block;
  padding: 0 16px;
+
+ .m-pro--channel-footer__social-items {
+ margin: 16px 0;
+ }
  }
 }