feat: navigation UI

TokanPages.ClientApp/src/Api/Request/Paths/index.ts

@@ -96,6 +96,4 @@ export const GET_TESTIMONIALS_URL = `${API_NON_VIDEO_ASSETS_URI}?blobName=images
 export const GET_ICONS_URL = `${API_NON_VIDEO_ASSETS_URI}?blobName=images/icons`;
 export const GET_FLAG_URL = `${API_NON_VIDEO_ASSETS_URI}?blobName=images/flags`;
 
-export const MAIN_ICON = `${GET_ICONS_URL}/main_logo.svg`;
-export const MEDIUM_ICON = `${GET_ICONS_URL}/medium_icon.svg`;
 export const ARTICLE_PATH = "/articles?title={title}";

TokanPages.ClientApp/src/Api/Request/index.ts

@@ -69,8 +69,6 @@ export {
     GET_FEATURED_IMAGE_URL,
     GET_TESTIMONIALS_URL,
     GET_ICONS_URL,
-    MAIN_ICON,
-    MEDIUM_ICON,
     ARTICLE_PATH,
     GET_FLAG_URL,
     GET_BICYCLE_CONTENT,

TokanPages.ClientApp/src/Components/Clients/View/clientsStyle.tsx

@@ -11,9 +11,6 @@ export const ClientsStyle = makeStyles(theme => ({
         backgroundColor: Colours.colours.white,
         paddingTop: 50,
         paddingBottom: 50,
-        [theme.breakpoints.down(900)]: {
-            marginTop: 50,
-        },
     },
     logo: {
         height: 50,

TokanPages.ClientApp/src/Components/Layout/Navigation/SideMenu/__snapshots__/sideMenuView.test.tsx.snap

@@ -11,13 +11,7 @@ exports[`test component: menuView should render correctly '<MenuView />' when co
   >
     <Styled(MuiBox)
       className="makeStyles-drawer_hero-3"
-    >
-      <div
-        className="makeStyles-drawer_logo-4"
-      >
-        &lt;/&gt;
-      </div>
-    </Styled(MuiBox)>
+    />
     <RenderList
       isAnonymous={true}
       items={

TokanPages.ClientApp/src/Components/Layout/Navigation/SideMenu/sideMenuStyle.tsx

@@ -15,11 +15,10 @@ export const SideMenuStyle = makeStyles(() => ({
         alignItems: "center",
         backgroundColor: Colours.colours.lightViolet,
     },
-    drawer_logo: {
-        fontSize: "3.5rem",
-        fontWeight: 900,
-        color: Colours.colours.violet,
-        textAlign: "center",
-        cursor: "default",
+    logo: {
+        height: 120,
+        marginLeft: "auto",
+        marginRight: "auto",
+        alignSelf: "center",
     },
 }));

TokanPages.ClientApp/src/Components/Layout/Navigation/SideMenu/sideMenuView.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { Box, Drawer } from "@material-ui/core";
-import { RenderList } from "../../../../Shared/Components";
+import { RenderImage, RenderList } from "../../../../Shared/Components";
 import { Item } from "../../../../Shared/Components/ListRender/Models";
+import { GET_ICONS_URL } from "../../../../Api/Request";
 import { SideMenuStyle } from "./sideMenuStyle";
 
 interface Properties {
@@ -13,13 +14,11 @@ interface Properties {
 
 export const SideMenuView = (props: Properties): JSX.Element => {
     const classes = SideMenuStyle();
-    const logo = "</>";
-
     return (
         <Drawer anchor="left" open={props.drawerState.open} onClose={props.closeHandler}>
             <div className={classes.drawer_container}>
                 <Box className={classes.drawer_hero}>
-                    <div className={classes.drawer_logo}>{logo}</div>
+                    {RenderImage(GET_ICONS_URL, props?.menu?.image, classes.logo)}
                 </Box>
                 <RenderList isAnonymous={props.isAnonymous} items={props.menu?.items} />
             </div>

TokanPages.ClientApp/src/Components/Layout/Navigation/View/__snapshots__/navigationView.test.tsx.snap

@@ -41,16 +41,11 @@ exports[`test component: featuresView should render correctly '<NavigationView /
       <div
         class="MuiGrid-root makeStyles-content_right_side-12 MuiGrid-item MuiGrid-grid-xs-true"
       >
-        <p
-          class="MuiTypography-root makeStyles-app_full_logo-3 MuiTypography-body1"
-        >
-          &lt;/&gt; tom kandula
-        </p>
-        <p
-          class="MuiTypography-root makeStyles-app_just_logo-4 MuiTypography-body1"
-        >
-          &lt;/&gt;
-        </p>
+        <img
+          alt=""
+          class="makeStyles-app_full_logo-3"
+          src="http://localhost:5000/api/v1/content/assets/getNonVideoAsset?blobName=images/icons/logo.svg"
+        />
       </div>
       <div
         class="MuiGrid-root makeStyles-content_right_side-12 MuiGrid-item MuiGrid-grid-xs-true"

TokanPages.ClientApp/src/Components/Layout/Navigation/View/navigationStyle.tsx

@@ -12,12 +12,9 @@ export const NavigationStyle = makeStyles(theme => ({
         [theme.breakpoints.down(700)]: {
             display: "none",
         },
+        height: 30,
         marginLeft: "auto",
         marginRight: "auto",
-        fontSize: "1.5rem",
-        fontWeight: 500,
-        color: Colours.colours.violet,
-        cursor: "default",
         alignSelf: "center",
     },
     app_just_logo: {
@@ -27,12 +24,9 @@ export const NavigationStyle = makeStyles(theme => ({
         [theme.breakpoints.up(700)]: {
             display: "none",
         },
+        height: 40,
         marginLeft: "auto",
         marginRight: "auto",
-        fontSize: "1.5rem",
-        fontWeight: 500,
-        color: Colours.colours.violet,
-        cursor: "default",
         alignSelf: "center",
     },
     nav_menu: {

TokanPages.ClientApp/src/Components/Layout/Navigation/View/navigationView.test.tsx

@@ -44,6 +44,7 @@ describe("test component: featuresView", () => {
                 avatarSource=""
                 userAliasText=""
                 menu={{ image: "", items: [items] }}
+                logoImgName="logo.svg"
                 languages={languages}
                 languageId="eng"
                 languageHandler={jest.fn()}

TokanPages.ClientApp/src/Components/Layout/Navigation/View/navigationView.tsx

@@ -4,9 +4,9 @@ import Toolbar from "@material-ui/core/Toolbar";
 import IconButton from "@material-ui/core/IconButton";
 import Avatar from "@material-ui/core/Avatar";
 import MenuIcon from "@material-ui/icons/Menu";
-import { FormControl, Grid, MenuItem, Select, Box, Typography } from "@material-ui/core";
+import { FormControl, Grid, MenuItem, Select, Box } from "@material-ui/core";
 import { LanguageItemDto } from "../../../../Api/Models/";
-import { GET_FLAG_URL } from "../../../../Api/Request";
+import { GET_FLAG_URL, GET_ICONS_URL } from "../../../../Api/Request";
 import { ApplicationLanguageState } from "../../../../Store/States/";
 import { HideOnScroll } from "../../../../Shared/Components/Scroll";
 import { Item } from "../../../../Shared/Components/ListRender/Models";
@@ -27,6 +27,7 @@ interface BaseProperties extends ViewProperties {
     avatarName: string;
     avatarSource: string;
     userAliasText: string;
+    logoImgName: string;
     languages: ApplicationLanguageState;
     languageId: string;
     languageHandler: (event: LanguageChangeEvent) => void;
@@ -127,8 +128,6 @@ const RenderLanguageSelection = (props: Properties): JSX.Element => {
 
 export const NavigationView = (props: Properties): JSX.Element => {
     const classes = NavigationStyle();
-    const logo = "</>";
-    const name = "</> tom kandula";
     return (
         <HideOnScroll {...props}>
             <AppBar className={classes.app_bar} elevation={0}>
@@ -138,8 +137,8 @@ export const NavigationView = (props: Properties): JSX.Element => {
                             {props.isLoading ? null : <RenderMenuIcon {...props} />}
                         </Grid>
                         <Grid item xs className={classes.content_right_side}>
-                            <Typography className={classes.app_full_logo}>{name}</Typography>
-                            <Typography className={classes.app_just_logo}>{logo}</Typography>
+                            {RenderImage(GET_ICONS_URL, props?.logoImgName, classes.app_full_logo)}
+                            {RenderImage(GET_ICONS_URL, props?.menu?.image, classes.app_just_logo)}
                         </Grid>
                         <Grid item xs className={classes.content_right_side}>
                             {props.isLoading ? null : <RenderContent {...props} />}

TokanPages.ClientApp/src/Components/Layout/Navigation/navigation.tsx

@@ -54,6 +54,7 @@ export const Navigation = (): JSX.Element => {
             userAliasText={store?.userData?.aliasName}
             avatarName={store?.userData?.avatarName}
             avatarSource={avatarSource}
+            logoImgName={navigation?.content?.logo}
             languages={language}
             languageId={language?.id}
             languageHandler={languageHandler}