36 vertical menu

components/AsideMenu.tsx

@@ -23,7 +23,7 @@ export default function AsideMenu() {
 
 		if (e.key !== undefined && e.key === 'Escape') {
 			closeIfOpened();
-		} else if (e.keyCode !== undefined && e.keyCode === 13) {
+		} else if (e.keyCode !== undefined && e.keyCode === 27) {
 			closeIfOpened();
 		}
 	};

components/VerticalMenu.tsx

@@ -0,0 +1,78 @@
+import clsx from 'clsx';
+import Link from 'next/link';
+import {IMenuItem} from '../redux/reducers/menus';
+
+export default function VerticalMenu({menuList}: {menuList: IMenuItem[]}) {
+	return (
+		<nav className='vertical-menu'>
+			<ul className='vertical-menu__list list-unstyled mb-0' itemScope itemType='http://schema.org/ItemList'>
+				{menuList.map((item, i) => {
+					const hasChildren = item.children && item.children.length > 0;
+					return (
+						<li
+							className={clsx({
+								active: item.isActive,
+								'has-children': hasChildren,
+								'open': hasChildren && item.isActive
+							})}
+							key={item.title + i}
+						>
+							<div itemProp='itemListElement' itemScope itemType='http://schema.org/ListItem'>
+								<ListElement item={item} position={i} />
+							</div>
+							{item.children && item.children.length > 0 &&
+								<ul className='vertical-menu__child-list list-unstyled'>
+									{item.children.map((childItem, j) =>
+										<li key={childItem.title + j} className={clsx({active: childItem.isActive})}>
+											<ListElement item={childItem} />
+										</li>)}
+								</ul>}
+						</li>
+					);
+				})}
+			</ul>
+		</nav >
+	);
+}
+
+function ListElement({item, position}: {item: IMenuItem, position?: number}) {
+	const image = item.img || null;
+	const isRootElem = position !== undefined;
+
+	const imageElem = image
+		? <img src={image.src}
+			className='me-2'
+			alt={item.title}
+			width={image.width}
+			height={image.height}
+		/>
+		: null;
+
+	return (
+		<>
+			{image && <>
+				{item.url && !item.isActive ?
+					<Link href={item.url}>
+						<a className={clsx('vertical-menu__link img-link', isRootElem ? 'is-root' : 'is-child')}>
+							{imageElem}
+						</a>
+					</Link>
+					: imageElem}
+			</>}
+			{item.url && !item.isActive
+				? <>
+					<Link href={item.url}>
+						<a className={clsx('vertical-menu__link title', isRootElem ? 'is-root' : 'is-child')} itemProp='url'>
+							{isRootElem
+								? <span itemProp='name'>{item.title}</span>
+								: item.title}
+						</a>
+					</Link>
+					{isRootElem && <meta itemProp='position' content={String(position + 1)} />}
+				</>
+				: <span className={clsx('vertical-menu__text-title', isRootElem ? 'is-root' : 'is-child')}>
+					{item.title}
+				</span>}
+		</>
+	);
+}

pages/index.tsx

@@ -1,25 +1,27 @@
-import {ICategory} from 'boundless-api-client/types/catalog/category';
-import {IProduct} from 'boundless-api-client/types/catalog/product';
+import {IProduct} from 'boundless-api-client';
 import {GetServerSideProps, InferGetServerSidePropsType} from 'next';
-import CategoryHomeMenu from '../components/category/HomeMenu';
 import ProductsList from '../components/ProductsList';
 import MainLayout from '../layouts/Main';
 import {apiClient} from '../lib/api';
 import {makeAllMenus} from '../lib/menu';
-import {useAppDispatch} from '../hooks/redux';
+import {useAppDispatch, useAppSelector} from '../hooks/redux';
 import {IMenuItem, setFooterMenu, setMainMenu} from '../redux/reducers/menus';
+import {RootState} from '../redux/store';
+import VerticalMenu from '../components/VerticalMenu';
 
-export default function IndexPage({categoryTree, products, mainMenu, footerMenu}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function IndexPage({products, mainMenu, footerMenu}: InferGetServerSidePropsType<typeof getServerSideProps>) {
 	const dispatch = useAppDispatch();
 	dispatch(setMainMenu(mainMenu));
 	dispatch(setFooterMenu(footerMenu));
 
+	const mainMenuList = useAppSelector((state: RootState) => state.menus.main);
+
 	return (
 		<MainLayout>
 			<div className='container'>
 				<div className='row'>
 					<nav className='col-md-3 col-sm-4'>
-						{categoryTree && <CategoryHomeMenu categoryTree={categoryTree} />}
+						{mainMenuList && <VerticalMenu menuList={mainMenuList} />}
 					</nav>
 					<main className='col-md-9 col-sm-8 content-box'>
 						<h1 className='page-header page-header_h1  page-header_m-h1'>Boundless store</h1>
@@ -39,15 +41,13 @@ export const getServerSideProps: GetServerSideProps<IIndexPageProps> = async ()
 
 	return {
 		props: {
-			categoryTree,
 			products,
 			...menus
 		}
 	};
 };
 
 interface IIndexPageProps {
-	categoryTree: ICategory[];
 	products: IProduct[];
 	mainMenu: IMenuItem[];
 	footerMenu: IMenuItem[];

redux/reducers/menus.ts

@@ -24,15 +24,17 @@ export default menusSlice.reducer;
 export interface IMenuItem {
 	title: string,
 	url?: string,
-	img?: {
-		src: string,
-		width?: number,
-		height?: number
-	},
+	img?: IMenuItemImage,
 	isActive?: boolean,
 	children?: IMenuItem[]
 }
 
+export interface IMenuItemImage {
+	src: string,
+	width?: number,
+	height?: number
+}
+
 interface IMenusState {
 	main: null|IMenuItem[];
 	footer: null|IMenuItem[];

styles/components/_variables.scss

@@ -35,3 +35,7 @@ $aside-width: (
 
 $front-cart-header-qty-bg: $theme-color;
 $front-cart-header-qty-color: color-contrast($theme-color);
+
+$front-v-menu-bg: #f8f8f8;
+$front-v-menu-color: #000;
+$front-v-menu-active: #ffba00;

styles/components/verticalMenu.scss

@@ -0,0 +1,78 @@
+$vertical-menu-big-padding: 15px;
+$vertical-menu-small-padding: 10px;
+
+.vertical-menu {
+	background-color: $front-v-menu-bg;
+	padding: 25px;
+
+	&__list > li {
+		padding: 0 0 $vertical-menu-big-padding 0;
+		position: relative;
+
+		&:last-child {
+			padding-bottom: 0;
+		}
+	}
+
+	&__child-list {
+		padding: $vertical-menu-big-padding 0 0 10px;
+
+		> li {
+			padding: 0 0 $vertical-menu-small-padding 0;
+			white-space: nowrap;
+
+			&:last-child {
+				padding-bottom: 0;
+			}
+
+			&::before {
+				border-bottom: 4px solid transparent;
+				border-left: 4px solid #adaeae;
+				border-top: 4px solid transparent;
+				content: '';
+				display: inline-block;
+				height: 0;
+				margin-top: 8px;
+				vertical-align: top;
+				width: 0;
+			}
+
+			&.active::before {
+				display: none;
+			}
+		}
+	}
+
+	&__link {
+		color: $front-v-menu-color;
+		text-decoration: none;
+
+		&.is-child {
+			margin-left: 10px;
+			white-space: normal;
+		}
+
+		& + &.is-child {
+			margin-left: 0;
+		}
+
+		&.is-root {
+			font-size: 15px;
+			font-weight: 700;
+		}
+
+		&:hover {
+			color: $front-v-menu-color;
+			text-decoration: underline;
+		}
+	}
+
+	&__text-title {
+		color: $front-v-menu-active;
+		font-weight: $front-font-weight-bold;
+
+		&.is-root {
+			font-size: 15px;
+		}
+	}
+}

styles/styles.scss

@@ -24,3 +24,4 @@ $theme-color: #c490e4;
 @import './components/sort';
 @import './components/categoriesSidebar';
 @import './components/asideMenu';
+@import './components/verticalMenu';