|
1 |
| -<nb-layout> |
2 |
| - |
| 1 | +<nb-layout class="home-navbar"> |
3 | 2 | <nb-layout-header fixed>
|
4 |
| - <div class="container"> |
5 |
| - <div class="menu-left-container"> |
6 |
| - <div (click)="toggleSidebar()" class="sidebar-toggle"> |
7 |
| - <fa-icon [icon]="faBars" size="1x"></fa-icon> |
8 |
| - <nb-badge *ngIf="sideBarState == 'collapsed' && sideBarNotifications == true" [position]="'top end'" |
9 |
| - status="danger"></nb-badge> |
| 3 | + <div class="d-flex align-items-center"> |
| 4 | + <div [routerLink]="['/']" class="home-navbar-logo d-flex align-items-center clickable"> |
| 5 | + <img alt="Commudle" src="/assets/images/commudle-logo72.png"> |
| 6 | + </div> |
| 7 | + <div (clickOutside)="toggleSearchSuffix(false)" appClickOutside class="home-navbar-search"> |
| 8 | + <nb-form-field (click)="toggleSearchSuffix(true)" class="home-navbar-search-form"> |
| 9 | + <nb-icon icon="search" nbPrefix></nb-icon> |
| 10 | + <input (ngModelChange)="searchQueryChanged.next($event)" [ngModel]="searchQuery" nbInput |
| 11 | + placeholder="Search events, labs, communities, people" type="text"> |
| 12 | + </nb-form-field> |
| 13 | + |
| 14 | + <div class="home-navbar-search-suffix"> |
| 15 | + <div [ngClass]="{'active': showSearchResults}" class="home-navbar-search-results d-flex flex-column"> |
| 16 | + <div *ngFor="let result of searchResults | keyvalue"> |
| 17 | + <div *ngIf="result.value.length !== 0" class="home-navbar-search-result"> |
| 18 | + <div class="search-result-heading">{{result.key}}</div> |
| 19 | + <div *ngFor="let value of result.value" |
| 20 | + [routerLink]="result.key === 'events' ? ['communities', value['kommunity_slug'], 'events', value['slug']] : [result.key, value['slug'] || value['username']]" |
| 21 | + class="search-result-name clickable"> |
| 22 | + {{value.name}} |
| 23 | + </div> |
| 24 | + </div> |
| 25 | + </div> |
| 26 | + <div *ngIf="showPlaceholder" class="placeholder-text d-flex justify-content-center align-items-center"> |
| 27 | + Quickly search your favorite topics, labs by industry experts or find an event you missed |
| 28 | + </div> |
| 29 | + </div> |
10 | 30 | </div>
|
11 |
| - <div [routerLink]="['/']" class="main-logo clickable"> |
12 |
| - <img alt="logo" src="/assets/images/commudle-logo72.png"> |
13 |
| - <p> |
14 |
| - Commudle |
15 |
| - </p> |
| 31 | + </div> |
| 32 | + </div> |
| 33 | + <div class="d-flex align-items-center"> |
| 34 | + <div class="home-navbar-menu d-flex"> |
| 35 | + <app-navbar-menu [currentUser]="currentUser"></app-navbar-menu> |
| 36 | + |
| 37 | + <div class="home-navbar-menu-user"> |
| 38 | + <nb-user *ngIf="currentUser" [nbContextMenu]="userContextMenu" class="menu-user-avatar" onlyPicture |
| 39 | + picture="{{currentUser.avatar}}"></nb-user> |
| 40 | + <div *ngIf="!currentUser" class="menu-user-options d-flex flex-row"> |
| 41 | + <button (click)="login()" class="menu-login" nbButton size="small">Login</button> |
| 42 | + <button (click)="login()" class="menu-signup" nbButton size="small">Signup</button> |
| 43 | + <button (click)="login()" class="menu-login-signup" nbButton size="small">Login/Signup</button> |
| 44 | + </div> |
16 | 45 | </div>
|
17 | 46 | </div>
|
18 |
| - <div class="menu-right-container"> |
19 |
| - <a [routerLink]="['/']" class="hide-mobile" ghost nbButton>Home</a> |
20 |
| - <a [routerLink]="['/about']" class="hide-mobile" ghost nbButton>About</a> |
21 |
| - <a [routerLink]="['/communities']" class="hide-mobile" ghost nbButton>Communities</a> |
22 |
| - <a [routerLink]="['/labs']" class="hide-mobile" ghost nbButton>Labs</a> |
23 |
| - <a [routerLink]="['/builds']" class="hide-mobile" ghost nbButton>Builds</a> |
24 |
| - <nb-user |
25 |
| - *ngIf="currentUser" |
26 |
| - [nbContextMenu]="userContextMenu" |
27 |
| - name="" |
28 |
| - picture="{{ currentUser.avatar }}" |
29 |
| - size="medium" |
30 |
| - > |
31 |
| - </nb-user> |
32 |
| - <button (click)="login()" |
33 |
| - *ngIf="!currentUser" ghost nbButton status="info"> |
34 |
| - <nb-icon icon="log-in-outline"></nb-icon> |
35 |
| - Log in / Sign Up |
36 |
| - </button> |
37 |
| - |
| 47 | + <div (click)="toggleSidebar()" class="home-sidebar clickable"> |
| 48 | + <fa-icon [icon]="faBars"></fa-icon> |
| 49 | + <nb-badge *ngIf="sideBarState == 'collapsed' && sideBarNotifications == true" [position]="'top end'" |
| 50 | + status="danger"></nb-badge> |
38 | 51 | </div>
|
39 | 52 | </div>
|
40 |
| - |
41 | 53 | </nb-layout-header>
|
42 | 54 |
|
43 |
| - <nb-sidebar [tag]="'mainMenu'" id="commudleSidebar" responsive="true" state="collapsed"> |
| 55 | + <nb-sidebar [tag]="'mainMenu'" id="commudleSidebar" responsive="true" right state="collapsed"> |
44 | 56 | <app-sidebar-menu></app-sidebar-menu>
|
45 | 57 | </nb-sidebar>
|
46 | 58 |
|
47 |
| - <nb-layout-column (click)="closeSidebarMobile()"> |
| 59 | + <nb-layout-column> |
48 | 60 | <router-outlet></router-outlet>
|
49 | 61 | </nb-layout-column>
|
50 | 62 |
|
51 |
| - |
52 | 63 | <nb-layout-footer *ngIf="footerStatus">
|
53 |
| - |
54 | 64 | <div class="footer">
|
55 |
| - <div class="page-links"> |
| 65 | + <div class="page-links d-flex flex-column"> |
56 | 66 | <div [routerLink]="['/']" class="logo">
|
57 | 67 | <img alt="Logo" class="clickable" src="/assets/images/commudle-logo128.png">
|
58 | 68 | </div>
|
|
68 | 78 | <div class="two">
|
69 | 79 | <a [routerLink]="['/communities']">ALL COMMUNITIES</a>
|
70 | 80 | <a [routerLink]="['/labs']">LABS</a>
|
71 |
| - <a [routerLink]="['/builds']">COMMUNITY BUILDS</a> |
| 81 | + <a [routerLink]="['/builds']">BUILDS</a> |
72 | 82 | </div>
|
73 | 83 |
|
74 | 84 | <div class="three">
|
|
80 | 90 | <a [routerLink]="['/about']">FAQ</a>
|
81 | 91 | </div>
|
82 | 92 | </div>
|
83 |
| - |
84 | 93 | </div>
|
85 | 94 |
|
86 |
| - |
87 |
| - <div class="social-links"> |
| 95 | + <div class="social-links d-flex flex-column-reverse align-items-center"> |
88 | 96 | <hr/>
|
89 | 97 |
|
90 | 98 | <div class="links">
|
|
102 | 110 | </a>
|
103 | 111 | </div>
|
104 | 112 |
|
105 |
| - <div class="tech-stack"> |
| 113 | + <div class="tech-stack text-center"> |
106 | 114 | <p>Made with Angular, Ruby on Rails, Postgres, Redis and Love</p>
|
107 | 115 | </div>
|
108 | 116 | </div>
|
| 117 | + |
109 | 118 | <div class="ellipse-large"></div>
|
110 | 119 | <div class="ellipse-small"></div>
|
111 | 120 | </div>
|
112 |
| - |
113 | 121 | </nb-layout-footer>
|
114 |
| - |
115 | 122 | </nb-layout>
|
116 | 123 |
|
117 | 124 | <app-chats-container *ngIf="currentUser && cookieAccepted"></app-chats-container>
|
118 |
| - |
119 | 125 | <app-user-visit-tracker></app-user-visit-tracker>
|
120 | 126 | <app-sw-update></app-sw-update>
|
| 127 | + |
| 128 | + |
| 129 | +<!--<nb-layout>--> |
| 130 | + |
| 131 | +<!-- <nb-layout-header fixed>--> |
| 132 | +<!-- <div class="container">--> |
| 133 | +<!-- <div class="menu-left-container">--> |
| 134 | +<!-- <div (click)="toggleSidebar()" class="sidebar-toggle">--> |
| 135 | +<!-- <fa-icon [icon]="faBars" size="1x"></fa-icon>--> |
| 136 | +<!-- <nb-badge *ngIf="sideBarState == 'collapsed' && sideBarNotifications == true" [position]="'top end'"--> |
| 137 | +<!-- status="danger"></nb-badge>--> |
| 138 | +<!-- </div>--> |
| 139 | +<!-- <div [routerLink]="['/']" class="main-logo clickable">--> |
| 140 | +<!-- <img alt="logo" src="/assets/images/commudle-logo72.png">--> |
| 141 | +<!-- <p>--> |
| 142 | +<!-- Commudle--> |
| 143 | +<!-- </p>--> |
| 144 | +<!-- </div>--> |
| 145 | +<!-- </div>--> |
| 146 | +<!-- <div class="menu-right-container">--> |
| 147 | +<!-- <a [routerLink]="['/']" class="hide-mobile" ghost nbButton>Home</a>--> |
| 148 | +<!-- <a [routerLink]="['/about']" class="hide-mobile" ghost nbButton>About</a>--> |
| 149 | +<!-- <a [routerLink]="['/communities']" class="hide-mobile" ghost nbButton>Communities</a>--> |
| 150 | +<!-- <a [routerLink]="['/labs']" class="hide-mobile" ghost nbButton>Labs</a>--> |
| 151 | +<!-- <a [routerLink]="['/builds']" class="hide-mobile" ghost nbButton>Builds</a>--> |
| 152 | +<!-- <nb-user--> |
| 153 | +<!-- *ngIf="currentUser"--> |
| 154 | +<!-- [nbContextMenu]="userContextMenu"--> |
| 155 | +<!-- name=""--> |
| 156 | +<!-- picture="{{ currentUser.avatar }}"--> |
| 157 | +<!-- size="medium"--> |
| 158 | +<!-- >--> |
| 159 | +<!-- </nb-user>--> |
| 160 | +<!-- <button (click)="login()"--> |
| 161 | +<!-- *ngIf="!currentUser" ghost nbButton status="info">--> |
| 162 | +<!-- <nb-icon icon="log-in-outline"></nb-icon>--> |
| 163 | +<!-- Log in / Sign Up--> |
| 164 | +<!-- </button>--> |
| 165 | + |
| 166 | +<!-- </div>--> |
| 167 | +<!-- </div>--> |
| 168 | + |
| 169 | +<!-- </nb-layout-header>--> |
| 170 | + |
| 171 | +<!-- <nb-sidebar [tag]="'mainMenu'" id="commudleSidebar" responsive="true" state="collapsed">--> |
| 172 | +<!-- <app-sidebar-menu></app-sidebar-menu>--> |
| 173 | +<!-- </nb-sidebar>--> |
| 174 | + |
| 175 | +<!-- <nb-layout-column (click)="closeSidebarMobile()">--> |
| 176 | +<!-- <router-outlet></router-outlet>--> |
| 177 | +<!-- </nb-layout-column>--> |
| 178 | + |
| 179 | + |
| 180 | +<!-- <nb-layout-footer *ngIf="footerStatus">--> |
| 181 | + |
| 182 | +<!-- <div class="footer">--> |
| 183 | +<!-- <div class="page-links">--> |
| 184 | +<!-- <div [routerLink]="['/']" class="logo">--> |
| 185 | +<!-- <img alt="Logo" class="clickable" src="/assets/images/commudle-logo128.png">--> |
| 186 | +<!-- </div>--> |
| 187 | + |
| 188 | +<!-- <div class="links">--> |
| 189 | +<!-- <div class="one">--> |
| 190 | +<!-- <a [routerLink]="['/']">HOME</a>--> |
| 191 | +<!-- <a [routerLink]="['/about']">ABOUT</a>--> |
| 192 | +<!-- <a [routerLink]="['/features']">FEATURES</a>--> |
| 193 | +<!-- </div>--> |
| 194 | + |
| 195 | +<!-- <div class="two">--> |
| 196 | +<!-- <a [routerLink]="['/communities']">ALL COMMUNITIES</a>--> |
| 197 | +<!-- <a [routerLink]="['/labs']">LABS</a>--> |
| 198 | +<!-- <a [routerLink]="['/builds']">COMMUNITY BUILDS</a>--> |
| 199 | +<!-- </div>--> |
| 200 | + |
| 201 | +<!-- <div class="three">--> |
| 202 | +<!-- <a [routerLink]="['/policies/privacy-policy']">PRIVACY POLICY</a>--> |
| 203 | +<!-- <a [routerLink]="['/policies/terms-and-conditions']">TERMS & CONDITIONS</a>--> |
| 204 | +<!-- </div>--> |
| 205 | + |
| 206 | +<!-- <div class="four">--> |
| 207 | +<!-- <a [routerLink]="['/about']">FAQ</a>--> |
| 208 | +<!-- </div>--> |
| 209 | +<!-- </div>--> |
| 210 | + |
| 211 | +<!-- </div>--> |
| 212 | + |
| 213 | + |
| 214 | +<!-- <div class="social-links">--> |
| 215 | +<!-- <hr/>--> |
| 216 | + |
| 217 | +<!-- <div class="links">--> |
| 218 | +<!-- <a href="https://twitter.com/commudle" target="_blank">--> |
| 219 | +<!-- <nb-icon icon="twitter"></nb-icon>--> |
| 220 | +<!-- </a>--> |
| 221 | +<!-- <a href="https://linkedin.com/company/commudle" target="_blank">--> |
| 222 | +<!-- <nb-icon icon="linkedin"></nb-icon>--> |
| 223 | +<!-- </a>--> |
| 224 | +<!-- <a href="https://facebook.com/commudle" target="_blank">--> |
| 225 | +<!-- <nb-icon icon="facebook"></nb-icon>--> |
| 226 | +<!-- </a>--> |
| 227 | +<!-- <a href="https://github.com/commudle/commudle-ng" target="_blank">--> |
| 228 | +<!-- <nb-icon icon="github"></nb-icon>--> |
| 229 | +<!-- </a>--> |
| 230 | +<!-- </div>--> |
| 231 | + |
| 232 | +<!-- <div class="tech-stack">--> |
| 233 | +<!-- <p>Made with Angular, Ruby on Rails, Postgres, Redis and Love</p>--> |
| 234 | +<!-- </div>--> |
| 235 | +<!-- </div>--> |
| 236 | +<!-- <div class="ellipse-large"></div>--> |
| 237 | +<!-- <div class="ellipse-small"></div>--> |
| 238 | +<!-- </div>--> |
| 239 | + |
| 240 | +<!-- </nb-layout-footer>--> |
| 241 | + |
| 242 | +<!--</nb-layout>--> |
| 243 | + |
| 244 | +<!--<app-chats-container *ngIf="currentUser && cookieAccepted"></app-chats-container>--> |
| 245 | + |
| 246 | +<!--<app-user-visit-tracker></app-user-visit-tracker>--> |
| 247 | +<!--<app-sw-update></app-sw-update>--> |
0 commit comments