useVerticalNav

Overview

The useVerticalNav() hook is a custom hook specifically designed to handle the functionality and state management of a navigation sidebar within a web application. Its purpose is to provide a comprehensive set of variables that can be utilized to customize the behavior of the navigation sidebar. This documentation has explained how to use the hook and described variables for configuring and customizing the menu.

Values

The useVerticalNav() hook provides the following variables that can be used to customize the behavior and appearance of the navigation sidebar:

Value	Type	Description
width	number	Determines the width of the navigation sidebar.
collapsedWidth	number	Specifies the width of the navigation sidebar when it is collapsed.
isCollapsed	boolean	Indicates whether the navigation sidebar is currently collapsed.
isHovered	boolean	Indicates whether the navigation sidebar is currently being hovered over when menu is collapsed.
isToggled	boolean	Indicates whether the navigation sidebar is currently toggled.
isScrollWithContent	boolean	Determines whether the navigation sidebar scrolls with the content.
isPopoutWhenCollapsed	boolean	Determines whether the navigation sidebar pops out when it is collapsed.
isBreakpointReached	boolean	Indicates whether the specified breakpoint has been reached.
transitionDuration	number	Specifies the duration (in ms) of the transition for the entire navigation menu.
updateVerticalNavState	(values: VerticalNavState) => void	A function used to update the state of the navigation sidebar.
collapseVerticalNav	(value?: VerticalNavState['isCollapsed']) => void	A function used to collapse the navigation sidebar.
hoverVerticalNav	(value?: VerticalNavState['isHovered']) => void	A function used to apply a hover effect to the navigation sidebar.
toggleVerticalNav	(value?: VerticalNavState['isToggled']) => void	A function used to toggle the visibility of the navigation sidebar.

Usage

To utilize the useVerticalNav() hook, please refer to the following examples:

toggleVerticalNav

/use-vertical-nav/toggle-function

Toggle Menu

Source Code

isToggled

/use-vertical-nav/is-toggled

Toggle Menu

isToggled: undefined

Source Code

collapseVerticalNav

/use-vertical-nav/collapsed-function

Collapse Menu

Source Code

isCollapsed

/use-vertical-nav/is-collapsed

Collapse Menu

isCollapsed: undefined

Source Code

hoverVerticalNav

/use-vertical-nav/hover-function

Menu Toggle

Source Code

isHovered

/use-vertical-nav/is-hovered

Menu Toggle

isHovered: undefined

Source Code

isScrollWithContent

/use-vertical-nav/is-scroll-with-content

Scroll With Content

Status : undefined

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ex culpa nihil fugit inventore corporis at! Magnam odio quidem dolore, accusamus dolorem iste nihil odit facilis? Porro laborum ipsam harum perferendis non, neque impedit illo sunt amet voluptatibus est voluptatem, error sapiente vel aut necessitatibus placeat totam. Nobis dolorum soluta accusamus vitae. Excepturi, autem repellat placeat explicabo dolore ut maxime! Facere ducimus incidunt molestiae, illum ipsa beatae atque vero, ipsam neque aliquid est quidem perspiciatis vitae cum labore nostrum dicta laudantium necessitatibus fugiat soluta! Recusandae cum laboriosam eum labore doloribus soluta perferendis repellat, deleniti esse aut. Nisi expedita soluta amet rerum tempora, id voluptatum recusandae repudiandae placeat. Adipisci temporibus tempora iure, dicta hic error cumque aut perferendis exercitationem! Debitis odio pariatur sint voluptate, adipisci deleniti doloremque reprehenderit ab, possimus id neque. Aliquam voluptatibus cumque voluptate at natus ducimus quam saepe deleniti a, animi laborum quidem vero tenetur temporibus nam dolorum ad magnam inventore, quod quaerat error dolorem odio hic aspernatur! Nostrum debitis repudiandae delectus, temporibus, commodi illo quaerat in maiores laboriosam libero maxime sit dicta consectetur natus nam itaque. Assumenda inventore perferendis atque, laborum quae harum culpa nam suscipit ducimus quia! Iure tempore explicabo autem? Possimus voluptas, voluptate exercitationem sed maxime animi, iste nesciunt magnam placeat obcaecati pariatur deleniti temporibus quae necessitatibus vel aliquam autem magni? Saepe fugit nobis libero nam ratione eos delectus consequatur facilis tempora doloribus doloremque vero debitis nisi explicabo omnis, commodi in, quasi voluptatibus excepturi deleniti? Quasi repellat repellendus sapiente sed illum iste consequuntur, maxime culpa, sint accusamus similique deserunt eius eum ab quibusdam? Magni nihil officiis modi vero? Fugiat consequuntur repellat exercitationem numquam nulla unde rerum iste tenetur molestias maxime iure modi illum, quos laborum facilis repellendus ut voluptatem ab, ipsum earum quo, aliquid deserunt quia minus! Maiores ex neque reiciendis nulla voluptates magni fugiat officia temporibus commodi, dignissimos quaerat perspiciatis quas quibusdam reprehenderit maxime quam omnis consequatur doloribus facere! Rem illo repellendus a animi non qui ab in error earum quisquam facere laboriosam, eligendi molestiae consequuntur. Minima, officiis iusto vitae ex praesentium aspernatur dolore quod eos doloremque soluta veniam. Sint voluptatem vel dolor. In, quisquam omnis dignissimos libero eveniet explicabo blanditiis dolores beatae? Velit quisquam nam obcaecati, fugit eligendi nemo amet sit, quas, deleniti iusto reprehenderit aperiam ea dicta reiciendis! Dicta voluptatibus perspiciatis nisi molestias quasi tempore omnis fuga sint deleniti cumque? Repellat excepturi, tenetur quam quas minus illo. Aspernatur impedit ut quis similique error, explicabo optio obcaecati illo commodi, delectus ipsam! Magni nobis quos placeat tempore suscipit nostrum aliquid fugit facilis laboriosam quasi itaque minima nihil eaque corrupti accusamus facere aspernatur, necessitatibus esse, harum soluta. Fugiat, sit laboriosam? Dignissimos praesentium minima repellendus molestiae, laboriosam labore in optio porro fugiat quo veritatis non, nobis mollitia qui illo. Possimus iste soluta ullam impedit reiciendis dolorem quam assumenda cupiditate. Accusamus, sapiente. Distinctio sapiente accusantium dolorum molestiae rerum eligendi, culpa assumenda, deserunt quod aliquid, consequatur labore possimus laudantium quas architecto. Suscipit deserunt accusantium eaque facere reprehenderit fugiat sint distinctio aperiam expedita asperiores harum, optio magni quasi veniam!

Source Code

isPopoutWhenCollapsed

/use-vertical-nav/is-popout-when-collapsed

Popout menu

isPopoutWhenCollapsed: undefined

Source Code

isBreakpointReached

/use-vertical-nav/is-breakpoint-reached

Source Code