Can I Use This?
In order to follow this guide, you must use Webiny version 5.12.0 or greater.
What you'll learn
- how to replace the default Webiny logo with your own React component
To use the instructions presented in this guide, you need to know how to register Webiny plugins in your React applications. Please visit the Importing Plugins guide, if you're not already familiar with the process.
Changing the default logo is a very quick and straightforward process. The main Admin Area layout is built using the UI Composer. This means that you can hook into any part of the view and modify it.
To replace the logo in the main header, we need to hook into the AdminView class and access the header element, which contains a
<MyLogo /> has to be a React element. This allows you to have your logo be as simple or as complex as necessary.
There is a second logo, in the navigation drawer, which looks different from the one in the AdminView header. The view class responsible for the navigation drawer is the NavigationView class.
Here we also want to close the drawer when the logo is clicked, so we use the built-in view hook to access state management operations, and invoke
hideMenu on logo click.
To learn more about how UI Composer views work, and how hooks are added into the mix, see the Building Views article.