Dashboard Nav Dropdown

jest.config.js

@@ -1,15 +1,13 @@
-module.exports = {
-  jest: {
-    verbose: true,
-    transform: {
-      '^.+\\.js$': 'babel-jest',
-      '^.+\\.(css|scss|less)$': 'jest-css-modules',
-    },
-    transformIgnorePatterns: ['/node_modules/'],
-    globals: {
-      NODE_ENV: 'test',
-    },
-    moduleFileExtensions: ['js', 'jsx'],
-    moduleDirectories: ['src'],
+export const jest = {
+  verbose: true,
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.(css|scss|less)$': 'jest-css-modules',
   },
+  transformIgnorePatterns: ['/node_modules/'],
+  globals: {
+    NODE_ENV: 'test',
+  },
+  moduleFileExtensions: ['js', 'jsx'],
+  moduleDirectories: ['src'],
 };

package.json

@@ -42,8 +42,8 @@
     "@types/eslint": "^6.1.8",
     "@types/jest": "^25.1.3",
     "@types/node": "^13.7.4",
-    "@types/react-dom": "^16.8.2",
     "@types/react": "16.9.23",
+    "@types/react-dom": "^16.8.2",
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "5.1.3",
     "@types/redux-logger": "3.0.7",
@@ -56,8 +56,10 @@
     "eslint": "6.8.0",
     "eslint-config-airbnb": "18.1.0",
     "eslint-config-airbnb-typescript": "7.2.1",
+    "eslint-config-prettier": "6.11.0",
     "eslint-plugin-import": "2.20.2",
     "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-prettier": "3.1.3",
     "eslint-plugin-react": "7.19.0",
     "eslint-plugin-react-hooks": "2.5.1",
     "husky": "^1.0.0-rc.13",
@@ -67,8 +69,6 @@
     "jest-localstorage-mock": "^2.2.0",
     "prettier": "1.17.0",
     "sw-precache": "^5.2.1",
-    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-prettier": "3.1.3",
     "typescript": "^3.1.6"
   },
   "jest": {

src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx

@@ -36,6 +36,7 @@ import { InterfaceProgress } from '../../ignitus-UserInterfaceBook/Components/Mo
 import { interfaceSecondaryDropDown } from '../../ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components';
 import { interfaceScrollBar } from '../../ignitus-UserInterfaceBook/Components/Molecules/interfaceScrollBar/Components';
 import { interfaceToggleButtons } from '../../ignitus-UserInterfaceBook/Components/Molecules/interfaceToggleButtons/Components';
+import { interfaceDashboardNavigationDropdown } from '../../ignitus-UserInterfaceBook/Components/Atoms/interfaceNavDropdown/Components';
 import { interfaceOpportunitySideCard } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceOpportunitySideCard/Components';
 
 const Container = styled.div`
@@ -146,6 +147,10 @@ export const UserInterfaceBookRoutes: React.FunctionComponent = () => (
           path="/interface/toggleButtons"
           component={interfaceToggleButtons}
         />
+        <Route
+          path="/interface/dashboardNavigationDropdown"
+          component={interfaceDashboardNavigationDropdown}
+        />
         <Route path="/interface/avatar" component={InterfaceAvatar} />
         <Route path="/interface/sideProfile" component={interfaceSideProfile} />
         <Route path="/interface/progress" component={InterfaceProgress} />

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/Components/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Layer } from '../../../ignitus-Organisms/ignitus-SideNavigation/Common/styles';
+import * as S from '../styles';
+import { Props } from '../types';
+import { AppIcon } from '../../../../types/iconsTypes/iconEnums';
+
+export const DashboardNavigationDropdown = ({ Options, Name }: Props) => {
+  const [content, setContent] = React.useState(false);
+  return (
+    <S.Container>
+      <S.NavigationHeading onClick={() => setContent(!content)}>
+        <S.Icon name={AppIcon.StudentIcon} />
+        {Name}
+        <S.Icon name={AppIcon.FilledArrowDownIcon} />
+      </S.NavigationHeading>
+      {content && (
+        <S.Column>
+          {Options.map(({ title }, x) => (
+            <div key={title}>
+              <Layer
+                border={Options.length - 1 !== x}
+                style={{ height: '1rem' }}
+                semiBold
+                marginTop={false}
+                marginBottom={false}
+              >
+                <S.Text> {title} </S.Text>
+              </Layer>
+            </div>
+          ))}
+        </S.Column>
+      )}
+    </S.Container>
+  );
+};

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/styles.ts

@@ -0,0 +1,36 @@
+import styled from '@emotion/styled/macro';
+import { White, IgnitusBlue } from '../colors';
+import { Icon as I } from '../../../ignitus-Utilities/Components/icon';
+import { StyleProps } from './types';
+import { MD } from '../fonts';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 12rem;
+`;
+
+export const Column = styled.div`
+  background-color: ${White};
+  border-radius: 1rem;
+  margin-top: 1rem;
+`;
+
+export const NavigationHeading = styled.div`
+  align-items: center;
+  color: ${IgnitusBlue};
+  cursor: pointer;
+  display: flex;
+  font-size: ${MD};
+  justify-content: flex-end;
+`;
+
+export const Icon = styled(I)<StyleProps>`
+  height: 2rem;
+  fill: ${IgnitusBlue};
+  margin: 0 0.5rem;
+`;
+
+export const Text = styled.div`
+  text-align: center;
+`;

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/types.ts

@@ -0,0 +1,13 @@
+export type Props = {
+  Options: Option[];
+  Name: string;
+};
+
+type Option = {
+  title: string;
+};
+
+export type StyleProps = {
+  marginLeft?: boolean;
+  marginRight?: boolean;
+};

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/__snapshots__/Layer.test.tsx.snap

@@ -7,14 +7,15 @@ exports[`should rendered 1`] = `
   cursor: pointer;
   font-size: 18px;
   font-weight: 400;
-  margin-top: none;
-  margin-bottom: none;
   padding: 1rem 0;
   width: 100%;
+  margin-top: none;
+  margin-bottom: none;
 }
 
 .emotion-1:hover {
   background-color: #000066;
+  color: #ffffff;
 }
 
 .emotion-1:hover p {

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/styles.ts

@@ -1,21 +1,24 @@
 import styled from '@emotion/styled';
 
 import { White, IgnitusBlue, GreyLight } from '../../../ignitus-Atoms/colors';
-import { MD, Normal } from '../../../ignitus-Atoms/fonts';
+import { MD, SemiBold, Normal } from '../../../ignitus-Atoms/fonts';
 import { StyledLayerProps } from './types';
 
 export const Layer = styled.div<StyledLayerProps>`
   border-bottom: ${props => (props.border ? `1px solid ${GreyLight}` : 'null')};
   color: ${IgnitusBlue};
   cursor: pointer;
+
   font-size: ${MD};
-  font-weight: ${Normal};
-  margin-top: ${props => (props.marginTop ? '0.5rem' : 'none')};
-  margin-bottom: ${props => (props.marginBottom ? '0.5rem' : 'none')};
+  font-weight: ${props => (props.semiBold ? `${SemiBold}` : `${Normal}`)};
   padding: 1rem 0;
   width: 100%;
+  margin-top: ${props => (props.marginTop ? '0.5rem' : 'none')};
+  margin-bottom: ${props => (props.marginBottom ? '0.5rem' : 'none')};
+
   &:hover {
     background-color: ${IgnitusBlue};
+    color: ${White};
     p {
       color: ${White};
     }

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/Common/types.ts

@@ -3,14 +3,16 @@ export interface LayerProps {
   border?: boolean;
   marginTop?: boolean;
   marginBottom?: boolean;
+  semiBold?: boolean;
   prepend?: React.ReactNode;
   append?: React.ReactNode;
   [rest: string]: any;
 }
 
 export type StyledLayerProps = {
   border: boolean;
-  marginTop: boolean;
-  marginBottom: boolean;
+  marginTop?: boolean;
+  marginBottom?: boolean;
   containIcon?: boolean;
+  semiBold?: boolean;
 };

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts

@@ -14,13 +14,15 @@ export const SettingsContainer = styled(flexibleColDiv)`
   border-radius: 16px;
   box-shadow: 0 2px 4px 0 ${boxShadowColor};
   width: 14rem;
+  overflow: hidden;
 `;
 
 export const Layer = styled(CommonLayer)`
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-direction: row;
+  height: 100%;
 `;
 
 export const SideNavIcon = styled(Icon)`

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts

@@ -10,6 +10,7 @@ export const MessageContainer = styled(flexibleColDiv)`
   box-shadow: 0 2px 4px 0 ${boxShadowColor};
   width: 14rem;
   height: 16rem;
+  overflow: hidden;
 `;
 
 export const Layer = styled(CommonLayer)`

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components/index.tsx

@@ -5,12 +5,12 @@ import * as S from '../style';
 export const UserSettingsSideNavigation = () => {
   return (
     <S.SettingsContainer>
-      <S.Layer text="General" marginTop />
+      <S.Layer text="General" />
       <S.Layer text="Password" />
       <S.Layer text="Messaging" />
       <S.Layer text="Notification" />
       <S.Layer text="Blocked Users" />
-      <S.Layer text="Privacy" border={false} marginBottom />
+      <S.Layer text="Privacy" border={false} />
     </S.SettingsContainer>
   );
 };

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/style.ts

@@ -8,7 +8,7 @@ export const SettingsContainer = styled(flexibleColDiv)`
   border-radius: 16px;
   box-shadow: 0 2px 4px 0 ${boxShadowColor};
   width: 14rem;
-  height: 22rem;
+  height: 20rem;
 `;
 
 export const Layer = styled(CommonLayer)`

src/ignitus-UserInterfaceBook/Components/Atoms/interfaceNavDropdown/Components/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DashboardNavigationDropdown } from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/Components';
+import { Options, Name } from '../constants';
+import { Heading2 } from '../../../../../ignitus-Shared';
+import { Interface } from '../../../../styles';
+
+export const interfaceDashboardNavigationDropdown = () => (
+  <Interface>
+    <Heading2>Dashboard DropDown</Heading2>
+    <hr />
+    <DashboardNavigationDropdown Options={Options} Name={Name} />
+  </Interface>
+);

src/ignitus-UserInterfaceBook/Components/Atoms/interfaceNavDropdown/constants.ts

@@ -0,0 +1,17 @@
+export const Options = [
+  {
+    title: 'Dashboard',
+  },
+  {
+    title: 'Profile',
+  },
+  {
+    title: 'Settings',
+  },
+  { title: 'Privacy Policy' },
+  {
+    title: 'Log out',
+  },
+];
+
+export const Name = 'Sophia';

src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts

@@ -90,6 +90,10 @@ export const allEdges: Edges[] = [
             title: 'Secondary',
             route: '/interface/secondaryDropdown',
           },
+          {
+            title: 'Dashboard Navigation',
+            route: '/interface/dashboardNavigationDropdown',
+          },
         ],
       },
       {