---
title: Sidebar with list of lessons
category: Application
paid: false
isActive: true
ltr: {"preview":"function App() {\n\n\n    const lessons = {\n        rustLessons: [{ name: \"Introduction to Rust\", href: \"javascript:void(0)\" }, { name: \"Installing and Setting up Rust\", href: \"javascript:void(0)\" }, { name: \"Basic Syntax and Data Types\", href: \"javascript:void(0)\" }, { name: \"Control Flow Statements\", href: \"javascript:void(0)\" }, { name: \"Functions and Modules\", href: \"javascript:void(0)\" }, { name: \"Ownership and Borrowing\", href: \"javascript:void(0)\" }, { name: \"Structs and Enums\", href: \"javascript:void(0)\" }, { name: \"Traits and Generics\", href: \"javascript:void(0)\" }],\n        cargoLessons: [{ name: \"Introduction to Cargo\", href: \"javascript:void(0)\" }, { name: \"Installing and Configuring Cargo\", href: \"javascript:void(0)\" }, { name: \"Basic Cargo Commands\", href: \"javascript:void(0)\" }, { name: \"Working with Dependencies\", href: \"javascript:void(0)\" }, { name: \"Rust Workspaces with Cargo\", href: \"javascript:void(0)\" }, { name: \"Ownership and Borrowing\", href: \"javascript:void(0)\" }, { name: \"Structs and Enums\", href: \"javascript:void(0)\" }, { name: \"Traits and Generics\", href: \"javascript:void(0)\" },]\n    }\n\n    return (\n         <div style={{height: \"800px\"}}>\n            <nav\n                className=\"fixed z-40 top-0 left-0 w-full h-full border-r bg-white space-y-8 overflow-auto sm:w-80\">\n                <div className=\"sticky top-0 space-y-8 bg-white\">\n                    <div className='h-20 flex items-center px-4 border-b md:px-8'>\n                        <a href='javascript:void(0)' className='flex-none'>\n                            <img src=\"https://farmui.com/logo.svg\" width={140} className=\"mx-auto\" />\n                        </a>\n                    </div>\n                    <div className='px-4 md:px-8'>\n                        <div className='relative w-full'>\n                            <svg\n                                xmlns='http://www.w3.org/2000/svg'\n                                viewBox='0 0 20 20'\n                                fill='currentColor'\n                                className='w-5 h-5 text-gray-400 absolute left-3 inset-y-0 my-auto'>\n                                <path\n                                    fillRule='evenodd'\n                                    d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z'\n                                    clipRule='evenodd'\n                                />\n                            </svg>\n                    \n                            <input\n                                placeholder='Search...' \n                                type='email'\n                                className='w-full pl-12 pr-3 py-2 bg-white text-sm text-gray-500 bg-transparent outline-none border ring-blue-600 focus:ring-2 shadow-sm rounded-lg duration-200'\n                            />\n                        </div>\n                    </div>\n                </div>\n                <div className='text-[0.9rem] space-y-6'>\n                        <div>\n                            <h3 className='pb-3 px-4 font-medium text-gray-800 md:px-8'>\n                                Rust Basics\n                            </h3>\n                              <div className='text-gray-600 px-4 md:px-8'>\n                                  <ul>\n                                      {lessons?.rustLessons?.map((item, idx) => (\n                                          <li key={idx}>\n                                              <a\n                                                  href={item?.href}\n                                                  className='block w-full py-2 px-4 border-l hover:border-indigo-600 hover:text-gray-900 duration-150'>\n                                                  {item?.name}\n                                              </a>\n                                          </li>\n                                      ))}\n                                  </ul>\n                              </div>\n                        </div>\n                        <div>\n                            <h3 className='pb-3 px-4 font-medium text-gray-800 md:px-8'>\n                                Cargo Basics\n                            </h3>\n                              <div className='text-gray-600 px-4 md:px-8'>\n                                  <ul>\n                                      {lessons?.cargoLessons?.map((item, idx) => (\n                                          <li key={idx}>\n                                              <a\n                                                  href={item?.href}\n                                                  className='block w-full py-2 px-4 border-l hover:border-indigo-600 hover:text-gray-900 duration-150'>\n                                                  {item?.name}\n                                              </a>\n                                          </li>\n                                      ))}\n                                  </ul>\n                              </div>\n                        </div>\n                </div>\n            </nav>\n        </div>\n    );\n};\n","react":{"jsxCss":[],"jsxTail":[{"code":"import { useEffect, useState } from \"react\";\n\n\n// NavLink component\nconst NavLink = ({ ...props }) => {\n    const {\n        children,\n        href = \"\",\n        className = \"\",\n        active = \"\",\n    } = props;\n\n    const [pathname, setPathname] = useState(\"/\");\n\n    const isActive = pathname == href;\n    const activeClass = isActive ? active : \"\";\n\n    useEffect(() => {\n        setPathname(window.location.pathname);\n    }, [props]);\n\n    return (\n        <a href={href} {...props} className={`${activeClass} ${className}`}>\n            {children}\n        </a>\n    );\n};\n\n// Title component\nconst Title = ({ children }) => (\n    <h3 className='pb-3 px-4 font-medium text-gray-800 md:px-8'>\n        {children}\n    </h3>\n);\n\n// Sections List\nconst SectionsList = ({ items }) => (\n    <div className='text-gray-600 px-4 md:px-8'>\n        <ul>\n            {items?.map((item, idx) => (\n                <li key={idx}>\n                    <NavLink\n                        href={item?.href}\n                        active='text-gray-900 border-indigo-600'\n                        className='block w-full py-2 px-4 border-l hover:border-indigo-600 hover:text-gray-900 duration-150'>\n                        {item?.name}\n                    </NavLink>\n                </li>\n            ))}\n        </ul>\n    </div>\n);\n\n// Search Box component\nconst SearchBox = ({ ...props }) => (\n    <div className='relative w-full'>\n        <svg\n            xmlns='http://www.w3.org/2000/svg'\n            viewBox='0 0 20 20'\n            fill='currentColor'\n            className='w-5 h-5 text-gray-400 absolute left-3 inset-y-0 my-auto'>\n            <path\n                fillRule='evenodd'\n                d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z'\n                clipRule='evenodd'\n            />\n        </svg>\n\n        <input\n            {...props}\n            type='email'\n            className='w-full pl-12 pr-3 py-2 bg-white text-sm text-gray-500 bg-transparent outline-none border ring-blue-600 focus:ring-2 shadow-sm rounded-lg duration-200'\n        />\n    </div>\n);\n\n\nconst Sidebar = () => {\n    const lessons = {\n        rustLessons: [{ name: \"Introduction to Rust\", href: \"javascript:void(0)\" }, { name: \"Installing and Setting up Rust\", href: \"javascript:void(0)\" }, { name: \"Basic Syntax and Data Types\", href: \"javascript:void(0)\" }, { name: \"Control Flow Statements\", href: \"javascript:void(0)\" }, { name: \"Functions and Modules\", href: \"javascript:void(0)\" }, { name: \"Ownership and Borrowing\", href: \"javascript:void(0)\" }, { name: \"Structs and Enums\", href: \"javascript:void(0)\" }, { name: \"Traits and Generics\", href: \"javascript:void(0)\" }],\n        cargoLessons: [{ name: \"Introduction to Cargo\", href: \"javascript:void(0)\" }, { name: \"Installing and Configuring Cargo\", href: \"javascript:void(0)\" }, { name: \"Basic Cargo Commands\", href: \"javascript:void(0)\" }, { name: \"Working with Dependencies\", href: \"javascript:void(0)\" }, { name: \"Rust Workspaces with Cargo\", href: \"javascript:void(0)\" }, { name: \"Ownership and Borrowing\", href: \"javascript:void(0)\" }, { name: \"Structs and Enums\", href: \"javascript:void(0)\" }, { name: \"Traits and Generics\", href: \"javascript:void(0)\" },]\n    }\n\n    return (\n        <>\n            <nav\n                className=\"fixed z-40 top-0 left-0 w-full h-full border-r bg-white space-y-8 overflow-auto sm:w-80\">\n                <div className=\"sticky top-0 space-y-8 bg-white\">\n                    <div className='h-20 flex items-center px-4 border-b md:px-8'>\n                        <a href='javascript:void(0)' className='flex-none'>\n                            <img src=\"https://farmui.com/logo.svg\" width={140} className=\"mx-auto\" />\n                        </a>\n                    </div>\n                    <div className='px-4 md:px-8'>\n                        <SearchBox placeholder='Search...' />\n                    </div>\n                </div>\n                <div className='text-[0.9rem] space-y-6'>\n                    <>\n                        <div>\n                            <Title>Rust Basics</Title>\n                            <SectionsList items={lessons.rustLessons} />\n                        </div>\n                        <div>\n                            <Title>Cargo Basics</Title>\n                            <SectionsList items={lessons.cargoLessons} />\n                        </div>\n                    </>\n                </div>\n            </nav>\n        </>\n    );\n};\n\nexport default Sidebar;","label":"App.jsx"}]},"svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n  let lessons = {\n    rustLessons: [\n      { name: 'Introduction to Rust', href: 'javascript:void(0)' },\n      { name: 'Installing and Setting up Rust', href: 'javascript:void(0)' },\n      { name: 'Basic Syntax and Data Types', href: 'javascript:void(0)' },\n      { name: 'Control Flow Statements', href: 'javascript:void(0)' },\n      { name: 'Functions and Modules', href: 'javascript:void(0)' },\n      { name: 'Ownership and Borrowing', href: 'javascript:void(0)' },\n      { name: 'Structs and Enums', href: 'javascript:void(0)' },\n      { name: 'Traits and Generics', href: 'javascript:void(0)' }\n    ],\n    cargoLessons: [\n      { name: 'Introduction to Cargo', href: 'javascript:void(0)' },\n      { name: 'Installing and Configuring Cargo', href: 'javascript:void(0)' },\n      { name: 'Basic Cargo Commands', href: 'javascript:void(0)' },\n      { name: 'Working with Dependencies', href: 'javascript:void(0)' },\n      { name: 'Rust Workspaces with Cargo', href: 'javascript:void(0)' },\n      { name: 'Ownership and Borrowing', href: 'javascript:void(0)' },\n      { name: 'Structs and Enums', href: 'javascript:void(0)' },\n      { name: 'Traits and Generics', href: 'javascript:void(0)' }\n    ]\n  };\n</script>\n\n<nav class=\"fixed z-40 top-0 left-0 w-full h-full border-r bg-white space-y-8 overflow-auto sm:w-80\">\n  <div class=\"sticky top-0 space-y-8 bg-white\">\n    <div class=\"h-20 flex items-center px-4 border-b md:px-8\">\n      <a href=\"javascript:void(0)\" class=\"flex-none\">\n        <img src=\"https://farmui.com/logo.svg\" width=\"140\" class=\"mx-auto\" />\n      </a>\n    </div>\n    <div class=\"px-4 md:px-8\">\n      <div class=\"relative w-full\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5 text-gray-400 absolute left-3 inset-y-0 my-auto\">\n          <path fill-rule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clip-rule=\"evenodd\" />\n        </svg>\n        <input type=\"email\" class=\"w-full pl-12 pr-3 py-2 bg-white text-sm text-gray-500 bg-transparent outline-none border ring-blue-600 focus:ring-2 shadow-sm rounded-lg duration-200\" placeholder=\"Search...\" />\n      </div>\n    </div>\n  </div>\n  <div class=\"text-[0.9rem] space-y-6\">\n    <div>\n      <h3 class=\"pb-3 px-4 font-medium text-gray-800 md:px-8\">Rust Basics</h3>\n      <div class=\"text-gray-600 px-4 md:px-8\">\n        <ul>\n          {#each lessons.rustLessons as item}\n            <li>\n              <a href=\"{item.href}\" class=\"block w-full py-2 px-4 border-l hover:border-indigo-600 hover:text-gray-900 duration-150 text-gray-500\">{item.name}</a>\n            </li>\n          {/each}\n        </ul>\n      </div>\n    </div>\n    <div>\n      <h3 class=\"pb-3 px-4 font-medium text-gray-800 md:px-8\">Cargo Basics</h3>\n      <div class=\"text-gray-600 px-4 md:px-8\">\n        <ul>\n          {#each lessons.cargoLessons as item}\n            <li>\n              <a href=\"{item.href}\" class=\"block w-full py-2 px-4 border-l hover:border-indigo-600 hover:text-gray-900 duration-150 text-gray-500\">{item.name}</a>\n            </li>\n          {/each}\n        </ul>\n      </div>\n    </div>\n  </div>\n</nav>"}]},"vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <div>\n    <nav class=\"fixed z-40 top-0 left-0 w-full h-full border-r bg-white space-y-8 overflow-auto sm:w-80\">\n      <div class=\"sticky top-0 space-y-8 bg-white\">\n        <div class=\"h-20 flex items-center px-4 border-b md:px-8\">\n          <a href=\"javascript:void(0)\" class=\"flex-none\">\n            <img src=\"https://farmui.com/logo.svg\" width=\"140\" class=\"mx-auto\" />\n          </a>\n        </div>\n        <div class=\"px-4 md:px-8\">\n          <div class=\"relative w-full\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5 text-gray-400 absolute left-3 inset-y-0 my-auto\">\n              <path fill-rule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clip-rule=\"evenodd\" />\n            </svg>\n            <input type=\"email\" class=\"w-full pl-12 pr-3 py-2 bg-white text-sm text-gray-500 bg-transparent outline-none border ring-blue-600 focus:ring-2 shadow-sm rounded-lg duration-200\" placeholder=\"Search...\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"text-[0.9rem] space-y-6\">\n        <div>\n          <h3 class=\"pb-3 px-4 font-medium text-gray-800 md:px-8\">Rust Basics</h3>\n          <div class=\"text-gray-600 px-4 md:px-8\">\n            <ul>\n              <li v-for=\"(item, index) in lessons.rustLessons\" :key=\"index\">\n                <a :href=\"item.href\" class=\"block w-full py-2 px-4 border-l hover:border-indigo-600 hover:text-gray-900 duration-150 text-gray-500\">{{ item.name }}</a>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div>\n          <h3 class=\"pb-3 px-4 font-medium text-gray-800 md:px-8\">Cargo Basics</h3>\n          <div class=\"text-gray-600 px-4 md:px-8\">\n            <ul>\n              <li v-for=\"(item, index) in lessons.cargoLessons\" :key=\"index\">\n                <a :href=\"item.href\" class=\"block w-full py-2 px-4 border-l hover:border-indigo-600 hover:text-gray-900 duration-150 text-gray-500\">{{ item.name }}</a>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </nav>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      lessons: {\n        rustLessons: [\n          { name: 'Introduction to Rust', href: 'javascript:void(0)' },\n          { name: 'Installing and Setting up Rust', href: 'javascript:void(0)' },\n          { name: 'Basic Syntax and Data Types', href: 'javascript:void(0)' },\n          { name: 'Control Flow Statements', href: 'javascript:void(0)' },\n          { name: 'Functions and Modules', href: 'javascript:void(0)' },\n          { name: 'Ownership and Borrowing', href: 'javascript:void(0)' },\n          { name: 'Structs and Enums', href: 'javascript:void(0)' },\n          { name: 'Traits and Generics', href: 'javascript:void(0)' }\n        ],\n        cargoLessons: [\n          { name: 'Introduction to Cargo', href: 'javascript:void(0)' },\n          { name: 'Installing and Configuring Cargo', href: 'javascript:void(0)' },\n          { name: 'Basic Cargo Commands', href: 'javascript:void(0)' },\n          { name: 'Working with Dependencies', href: 'javascript:void(0)' },\n          { name: 'Rust Workspaces with Cargo', href: 'javascript:void(0)' },\n          { name: 'Ownership and Borrowing', href: 'javascript:void(0)' },\n          { name: 'Structs and Enums', href: 'javascript:void(0)' },\n          { name: 'Traits and Generics', href: 'javascript:void(0)' }\n        ]\n      }\n    }\n  }\n}\n</script>","label":"App.vue"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div x-data=\"{\n    lessons: {\n        rustLessons: [\n            { name: 'Introduction to Rust', href: 'javascript:void(0)' },\n            { name: 'Installing and Setting up Rust', href: 'javascript:void(0)' },\n            { name: 'Basic Syntax and Data Types', href: 'javascript:void(0)' },\n            { name: 'Control Flow Statements', href: 'javascript:void(0)' },\n            { name: 'Functions and Modules', href: 'javascript:void(0)' },\n            { name: 'Ownership and Borrowing', href: 'javascript:void(0)' },\n            { name: 'Structs and Enums', href: 'javascript:void(0)' },\n            { name: 'Traits and Generics', href: 'javascript:void(0)' }\n        ],\n        cargoLessons: [\n            { name: 'Introduction to Cargo', href: 'javascript:void(0)' },\n            { name: 'Installing and Configuring Cargo', href: 'javascript:void(0)' },\n            { name: 'Basic Cargo Commands', href: 'javascript:void(0)' },\n            { name: 'Working with Dependencies', href: 'javascript:void(0)' },\n            { name: 'Rust Workspaces with Cargo', href: 'javascript:void(0)' },\n            { name: 'Ownership and Borrowing', href: 'javascript:void(0)' },\n            { name: 'Structs and Enums', href: 'javascript:void(0)' },\n            { name: 'Traits and Generics', href: 'javascript:void(0)' }\n        ]\n    }\n}\">\n    <nav class=\"fixed z-40 top-0 left-0 w-full h-full border-r bg-white space-y-8 overflow-auto sm:w-80\">\n        <div class=\"sticky top-0 space-y-8 bg-white\">\n            <div class='h-20 flex items-center px-4 border-b md:px-8'>\n                <a href='javascript:void(0)' class='flex-none'>\n                    <img src=\"https://farmui.com/logo.svg\" width=\"140\" class=\"mx-auto\" />\n                </a>\n            </div>\n            <div class='px-4 md:px-8'>\n                <div class='relative w-full'>\n                    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5 text-gray-400 absolute left-3 inset-y-0 my-auto'>\n                        <path fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z' clip-rule='evenodd'/>\n                    </svg>\n                    <input type='email' class='w-full pl-12 pr-3 py-2 bg-white text-sm text-gray-500 bg-transparent outline-none border ring-blue-600 focus:ring-2 shadow-sm rounded-lg duration-200' placeholder='Search...' />\n                </div>\n            </div>\n        </div>\n        <div class='text-[0.9rem] space-y-6'>\n            <div>\n                <h3 class='pb-3 px-4 font-medium text-gray-800 md:px-8'>Rust Basics</h3>\n                <div class='text-gray-600 px-4 md:px-8'>\n                    <ul>\n                        <template x-for=\"(item, index) in lessons.rustLessons\" :key=\"index\">\n                            <li>\n                                <a :href=\"item.href\" class=\"block w-full py-2 px-4 border-l hover:border-indigo-600 hover:text-gray-900 duration-150 text-gray-500\" x-text=\"item.name\"></a>\n                            </li>\n                        </template>\n                    </ul>\n                </div>\n            </div>\n            <div>\n                <h3 class='pb-3 px-4 font-medium text-gray-800 md:px-8'>Cargo Basics</h3>\n                <div class='text-gray-600 px-4 md:px-8'>\n                    <ul>\n                        <template x-for=\"(item, index) in lessons.cargoLessons\" :key=\"index\">\n                            <li>\n                                <a :href=\"item.href\" class=\"block w-full py-2 px-4 border-l hover:border-indigo-600 hover:text-gray-900 duration-150 text-gray-500\" x-text=\"item.name\"></a>\n                            </li>\n                        </template>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </nav>\n</div>\n"}]}}
slug: /sidebars
id: d6cbaecc-b13d-46b3-9253-1f142eb36aba
created_at: 1681652294703
---

<FUISidebarWithListOfLessons />