Skip to content

Commit

Permalink
sidebar-navigation-revamp
Browse files Browse the repository at this point in the history
  • Loading branch information
avzz-19 committed Dec 13, 2023
1 parent 3db230a commit b242b7e
Show file tree
Hide file tree
Showing 14 changed files with 313 additions and 89 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
@justifyContent='space-between'
@position='fixed'
@elevation={{true}}
{{style
width='auto'
left=@sidebarWidth
}}
data-test-organizationDashboardHeader
>
<AkStack @alignItems='center' @spacing='1.5'>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
.navbar-root {
width: calc(100% - 250px);
margin-left: 250px;
padding: 0.65em 1em;
background-color: var(--organization-dashboard-header-background-color);
color: var(--organization-dashboard-header-text-color);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export interface HomePageOrganizationDashboardHeaderSignature {
Args: {
logoutAction: () => void;
user: UserModel;
sidebarWidth: string;
};
}

Expand Down
18 changes: 17 additions & 1 deletion app/components/home-page/organization-dashboard/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,29 @@
<HomePage::OrganizationDashboard::Header
@user={{@user}}
@logoutAction={{@logoutAction}}
@sidebarWidth={{this.sidebarWidth}}
/>

<HomePage::OrganizationDashboard::SideNav
@isSecurityEnabled={{@isSecurityEnabled}}
@isCollapsed={{this.isCollapsed}}
/>

<main local-class='dashboard-main'>
<AkIconButton
local-class='toggle-button'
{{on 'click' this.toggleSidebar}}
{{style left=(concat 'calc(' this.sidebarWidth ' - 15px)')}}
>
<AkIcon @iconName={{if this.isCollapsed 'chevron-left' 'chevron-right'}} />
</AkIconButton>

<main
local-class='dashboard-main'
{{style
width=(concat 'calc(100% - ' this.sidebarWidth 'px)')
marginLeft=this.sidebarWidth
}}
>
{{yield}}
</main>
</div>
14 changes: 12 additions & 2 deletions app/components/home-page/organization-dashboard/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@
width: 100%;

.dashboard-main {
width: calc(100% - 250px);
min-height: 100vh;
margin-left: 250px;
padding: 0.5em;
box-sizing: border-box;

Expand All @@ -14,4 +12,16 @@
height: 56px;
}
}

.toggle-button {
position: fixed;
bottom: 20%;
z-index: var(--organization-dashboard-side-nav-zIndex);
background-color: white;
border-radius: 50%;

&:hover {
background-color: white !important;
}
}
}
24 changes: 23 additions & 1 deletion app/components/home-page/organization-dashboard/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

import UserModel from 'irene/models/user';
import { translateCrispChatbox } from 'irene/utils/chat';

export interface HomePageOrganizationDashboardSignature {
Args: {
Expand All @@ -14,7 +17,26 @@ export interface HomePageOrganizationDashboardSignature {
};
}

export default class HomePageOrganizationDashboardComponent extends Component<HomePageOrganizationDashboardSignature> {}
export default class HomePageOrganizationDashboardComponent extends Component<HomePageOrganizationDashboardSignature> {
@tracked isCollapsed = false;

constructor(
owner: unknown,
args: HomePageOrganizationDashboardSignature['Args']
) {
super(owner, args);
translateCrispChatbox();
}

@action
toggleSidebar() {
this.isCollapsed = !this.isCollapsed;
}

get sidebarWidth() {
return this.isCollapsed ? '250px' : '56px';
}
}

declare module '@glint/environment-ember-loose/registry' {
export default interface Registry {
Expand Down
185 changes: 118 additions & 67 deletions app/components/home-page/organization-dashboard/side-nav/index.hbs
Original file line number Diff line number Diff line change
@@ -1,85 +1,136 @@
<aside local-class='side-menu-root'>
<div local-class='app-logo'>
<ImgLogo />
</div>
<aside local-class='side-menu-root {{if @isCollapsed "expanded" "collapsed"}}'>
{{#if @isCollapsed}}
<div local-class='app-logo'>
<ImgLogo />
</div>
{{else}}
<div local-class='favicon-logo'>
<img src={{this.whitelabel.favicon}} alt={{this.whitelabel.name}} />
</div>
{{/if}}

<AkList class='mt-2' as |akl|>
<AkList
local-class='side-menu-list {{if @isCollapsed "expanded" "collapsed"}}'
as |akl|
>
{{#each this.menuItems as |it|}}
<akl.listItem
@link={{true}}
@route={{it.route}}
@query={{it.query}}
@currentWhen={{it.currentWhen}}
@activeLinkClass={{this.classes.menuItemLinkActive}}
data-test-side-menu-item
data-test-side-menu='{{it.label}}'
@linkClass={{this.classes.menuItemLink}}
as |li|
<AkTooltip
@disabled={{@isCollapsed}}
@color='dark'
@placement='right'
@arrow={{true}}
@title={{it.label}}
local-class='ak-tooltip'
>
<li.leftIcon>
<AkIcon
local-class='menu-item-icon'
data-test-side-menu-item-icon
@iconName={{it.icon}}
/>
</li.leftIcon>

<li.text
data-test-side-menu-item-text
@primaryText={{it.label}}
@primaryTextClass={{this.classes.menuItemText}}
/>

{{#if it.hasBadge}}
<AkStack @alignItems='center' @justifyContent='center'>
<AkChip
data-test-side-menu-item-badge
local-class='menu-item-badge'
@variant='filled'
@size='small'
@label={{it.badgeLabel}}
/>
</AkStack>
{{/if}}
</akl.listItem>
{{/each}}

{{#if @isSecurityEnabled}}
<akl.listItem @noGutters={{true}} data-test-side-menu-item as |li|>
<a
class={{this.classes.menuItemLink}}
href='/security/projects'
target='_blank'
rel='noopener noreferrer'
<akl.listItem
@link={{true}}
@route={{it.route}}
@query={{it.query}}
@currentWhen={{it.currentWhen}}
@activeLinkClass={{this.classes.menuItemLinkActive}}
data-test-side-menu-item
data-test-side-menu='{{it.label}}'
@linkClass={{this.classes.menuItemLink}}
as |li|
>
<li.leftIcon>
<AkIcon
local-class='menu-item-icon'
data-test-side-menu-item-icon
@iconName='security'
@iconName={{it.icon}}
/>
</li.leftIcon>

<li.text
data-test-side-menu-item-text
@primaryText={{t 'securityDashboard'}}
@primaryTextClass={{this.classes.menuItemText}}
/>
{{#if @isCollapsed}}
<li.text
data-test-side-menu-item-text
@primaryText={{it.label}}
@primaryTextClass={{this.classes.menuItemText}}
/>
{{/if}}

{{#if (and it.hasBadge @isCollapsed)}}
<AkStack @alignItems='center' @justifyContent='center'>
<AkChip
data-test-side-menu-item-badge
local-class='menu-item-badge'
@variant='filled'
@size='small'
@label={{it.badgeLabel}}
/>
</AkStack>
{{/if}}
</akl.listItem>
</AkTooltip>
{{/each}}

<li.rightIcon>
<AkIcon local-class='menu-item-icon' @iconName='open-in-new' />
</li.rightIcon>
</a>
{{#if @isSecurityEnabled}}
<akl.listItem @noGutters={{true}} data-test-side-menu-item as |li|>
<AkTooltip
@color='dark'
@placement='right'
@arrow={{true}}
@title={{t 'securityDashboard'}}
@disabled={{@isCollapsed}}
local-class='ak-tooltip'
>
<a
class={{this.classes.menuItemLink}}
href='/security/projects'
target='_blank'
rel='noopener noreferrer'
>
<li.leftIcon>
<AkIcon
local-class='menu-item-icon'
data-test-side-menu-item-icon
@iconName='security'
/>
</li.leftIcon>
{{#if @isCollapsed}}
<li.text
data-test-side-menu-item-text
@primaryText={{t 'securityDashboard'}}
@primaryTextClass={{this.classes.menuItemText}}
/>

<li.rightIcon>
<AkIcon local-class='menu-item-icon' @iconName='open-in-new' />
</li.rightIcon>
{{/if}}
</a>
</AkTooltip>
</akl.listItem>
{{/if}}
</AkList>

<div
id={{if this.enablePendo 'ak-pendo-version-container'}}
local-class='product-version
{{if this.enablePendo "pendo-version-padding"}}'
>
{{t 'version'}}
{{this.productVersion}}
<div local-class='lower-menu'>
<div
local-class='lower-menu-items'
role='button'
{{on 'click' this.openChatBox}}
>
<AkIcon
@iconName='chat-bubble'
local-class='chat-support-color icon-center'
/>
{{#if @isCollapsed}}
<AkTypography local-class='chat-support-color'>
{{t 'chatSupport'}}
</AkTypography>
{{/if}}
</div>

<AkDivider local-class='lower-menu-divider' />
<div local-class='product-version lower-menu-items'>
<div id={{if this.enablePendo 'ak-pendo-version-container'}} />
{{#if @isCollapsed}}
<AkTypography local-class='lower-menu-item-text'>
{{t 'version'}}
-
{{this.productVersion}}
</AkTypography>
{{/if}}
</div>
</div>
</aside>
Loading

0 comments on commit b242b7e

Please sign in to comment.