Dashboard Nav Dropdown

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

@@ -34,6 +34,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 { interfaceNavDropdown } from '../../ignitus-UserInterfaceBook/Components/Atoms/interfaceNavDropdown/Components';
 
 const Container = styled.div`
   display: flex;
@@ -138,6 +139,7 @@ export const UserInterfaceBookRoutes: React.FunctionComponent = () => (
           path="/interface/toggleButtons"
           component={interfaceToggleButtons}
         />
+        <Route path="/interface/navDropdown" component={interfaceNavDropdown} />
         <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,50 @@
+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 NavDropdown = ({ options, name }: Props) => {
+  const [content, setContent] = React.useState(false);
+  return (
+    <React.Fragment>
+      <S.NavItem onClick={() => setContent(!content)}>
+        <S.StyledIcon name={AppIcon.StudentIcon} marginRight />
+        {name}
+        <S.StyledIcon name={AppIcon.FilledArrowDownIcon} marginLeft />
+      </S.NavItem>
+      {content ? (
+        <S.Container>
+          {options.map(({ details, isLast }: any) => (
+            <div key={details}>
+              {isLast === true ? (
+                <Layer
+                  border={false}
+                  style={{ height: '1rem' }}
+                  semiBold
+                  marginTop={false}
+                  marginBottom={false}
+                >
+                  {' '}
+                  <div className="NavDropdown"> {details} </div>
+                </Layer>
+              ) : (
+                <Layer
+                  border
+                  className="NavDropdown"
+                  style={{ height: '1rem' }}
+                  semiBold
+                  marginTop={false}
+                  marginBottom={false}
+                >
+                  {' '}
+                  <div className="NavDropdown"> {details} </div>{' '}
+                </Layer>
+              )}
+            </div>
+          ))}
+        </S.Container>
+      ) : null}
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import { White, IgnitusBlue } from '../colors';
+import { Icon } from '../../../ignitus-Utilities/Components/icon';
+import { StyleProps } from './types';
+import { MD } from '../fonts';
+
+export const Container = styled.div`
+  background-color: ${White};
+  width: 12rem;
+  border-radius: 1rem 0rem 1rem 1rem;
+  overflow: hidden;
+  left: 0rem;
+  margin-top: 1rem;
+`;
+
+export const NavItem = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  color: ${IgnitusBlue};
+  cursor: pointer;
+  font-size: ${MD};
+  width: 12rem;
+`;
+
+export const StyledIcon = styled(Icon)<StyleProps>`
+  height: 1.5rem;
+  width: 1.5rem;
+  fill: ${IgnitusBlue};
+  margin-left: ${props => (props.marginLeft ? '0.5rem' : '')};
+  margin-right: ${props => (props.marginRight ? '0.5rem' : '')};
+`;

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

@@ -0,0 +1,9 @@
+export type Props = {
+  options: object[];
+  name: 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,30 @@ exports[`<Layer /> should render 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 .NavDropdown {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 
 .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,27 @@
 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')};
+  .NavDropdown {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   &:hover {
     background-color: ${IgnitusBlue};
+    color: ${White};
     p {
       color: ${White};
     }

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

@@ -3,14 +3,17 @@ 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;
+  alignCenter?: 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,8 @@ export const SettingsContainer = styled(flexibleColDiv)`
   border-radius: 16px;
   box-shadow: 0 2px 4px 0 ${boxShadowColor};
   width: 14rem;
-  height: 22rem;
+  height: 19.5rem;
+  overflow: hidden;
 `;
 
 export const Layer = styled(CommonLayer)`

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import * as S from '../styles';
+import { NavDropdown } from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/Components';
+import { options, name } from '../constants';
+import { Heading1 } from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography';
+
+export const interfaceNavDropdown = () => (
+  <S.Container>
+    <Heading1> Dashboard Nav DropDown</Heading1>
+    <br />
+    <S.Component>
+      <NavDropdown options={options} name={name} />
+    </S.Component>
+  </S.Container>
+);

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

@@ -0,0 +1,21 @@
+export const options = [
+  {
+    details: 'Dashboard',
+    isLast: false,
+  },
+  {
+    details: 'Profile',
+    isLast: false,
+  },
+  {
+    details: 'Settings',
+    isLast: false,
+  },
+  { details: 'Privacy Policy', isLast: false },
+  {
+    details: 'Log out',
+    isLast: true,
+  },
+];
+
+export const name = 'Sophia';

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

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  margin: 5rem;
+  width: 50rem;
+`;
+export const Component = styled.div`
+  margin: 2rem;
+`;