Description
Main navigation menu represented as a bottom bar of actions (looks like tabs). By default we can fit 6 actions without visual labels.
These actions are shortcuts to the open list of root level sections (right side menu button opens it).
In future there might be a feature to allow user to pick which links should be displayed in the bottom bar.
Mocks
Transition
Menu should slide from the bottom over everything, while backdrop alpha is increasing.
Open menu animation has a custom easing function:
Background transparency could have linear easing.
Closing is "300ms ease in ease out"
Icons
Majority of icons for web and mobile app are from Feather or Google or customized. For mobile app they are usually 24px size, sometimes they are 16px size if they look small, but usually stroke is the same. Stroke is converted to shapes.
I will collect mobile app icons in this Figma page
menu
align-left
at-sign
clock
edit-3
hash-italic
log-out
mail
settings
star
users
Clarifications
Bottom bar
Top border is a transparent color. The bar background is not transparent
Backdrop
In the light theme is rgba(0, 0, 0, 0.4) in dark theme is rgba(0, 0, 0, 0.7)
Menu panel
Light theme:
background: #F2F2F2;
border-radius: 20px 20px 0px 0px;Dark theme:
background: #222222;
border-radius: 20px 20px 0px 0px;Organization selection dialog
Light theme:
background: #F2F2F2;
border-radius: 20px;Dark theme:
background: #222222;
border-radius: 20px;Organization name
Company name:
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 600;
font-size: 22px;
line-height: 30px;
Separator between organization and scrollable menu
We want to have this separator with gradient from background color to transparent so when scrolled we can see it
Menu items container
Cancel button:
height: 38px;
left: 16px;
top: 8px;
background: rgba(121, 121, 134, 0.15); /* when pressed rgba(121, 121, 134, 0.25) */
border-radius: 7px;
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 24px;
/* identical to box height, or 120% */
text-align: center;In the dark theme:
background: rgba(255, 255, 255, 0.07); /* when pressed rgba(255, 255, 255, 0.17) */
color: rgba(255, 255, 255, 0.8); Search field
Light theme:
background: rgba(0, 0, 0, 0.07); /* when pressed rgba(0, 0, 0, 0.17) */
border-radius: 10px;Dark theme:
background: rgba(255, 255, 255, 0.07); /* when pressed rgba(255, 255, 255, 0.17) */
border-radius: 10px;
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 400;
font-size: 19px;
line-height: 26px;
/* identical to box height, or 137% */
color: rgba(0, 0, 0, 0.5); /* in dark theme rgba(255, 255, 255, 0.5);*/Menu items
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 400; /* when selected font-weight: 600; */
font-size: 19px;
line-height: 26px;
/* identical to box height, or 137% */
color: #222222; /* in dark theme: rgba(255, 255, 255, 0.8); */selected list item:
background: #FFFFFF; /* in dark theme: rgba(0, 0, 0, 0.23); */
border-radius: 10px;
Counter
background: rgba(102, 102, 153, 0.15);
border-radius: 5px;
padding: 1px 6px 2px;
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 600; /* dark theme: font-weight: 400;*/
font-size: 18px;
line-height: 21px;
/* identical to box height, or 117% */
text-align: right;
font-variant: small-caps;
color: #222222; /* dark theme: rgba(255, 255, 255, 0.8); */Counters which are not unreads have transparent background:
color is the same as in regular counters but opacity: 0.5