Search Bar in Navbar

Adding a search bar

We are continuously working on improving our website to provide the best user experience. As part of this effort, we will be adding a search bar functionality in the near future.

This feature will make it easy for users to access the documentations and blogs on our website. Thank you for your patience and support as we strive to make our website more user-friendly and professional.

Here are the steps we plan to take to implement this functionality:

Installing the @docusaurus/plugin-search-local package:

npm install --save-dev @docusaurus/plugin-search-local

Adding the plugin to our docusaurus.config.js file:

docusaurus.config.js
module.exports = {
    // ...
    plugins: [
        [
            '@docusaurus/plugin-search-local',
            {
                indexDocs: true, // Whether to index docs pages
                indexBlog: true, // Whether to index blog pages
                indexPages: true, // Whether to index static pages
                docsRouteBasePath: '/docs', // Base path for the docs route
                blogRouteBasePath: '/blog', // Base path for the blog route
                language: ['en'], // Supported languages
            },
        ],
    ],
    // ...
    };

Adding the search bar to the navbar in our themeConfig file:

docusaurus.config.js
module.exports = {
    // ...
    themeConfig: {
        // ...
        navbar: {
            // ...
            items: [
                // ...
                {
                    type: 'search',
                    position: 'right',
                },
            ],
        },
    },
    // ...
};

Building our site:
```
npm run build
```
Running our site:
```
npm run start
```

Congratulations 🎊

Following these steps and points, we were able to create a beautiful and interactive navbar . It's final structure looks something like this:

With this, we are pleased to announce that the navbar feature has been successfully added to the our organizations's website. You may have noticed that the navbar has a number of helpful links and features that make it simple to navigate the documentation.

We are convinced that by including search capabilities in the navbar, our users will reach the documentation and blog entries even more easily.

📢Annoucement

We're excited to share that the next page of our project documentation will include a detailed overview of the sidebars that we'll be incorporating. We believe that this will greatly enhance the user experience and make navigating our documentation even easier. Stay tuned for more updates!

Adding a search bar​

Congratulations 🎊​

Adding a search bar

Congratulations 🎊