-
-
Save nimone/9204ed6e9d725c0eef003011c9113698 to your computer and use it in GitHub Desktop.
Vite.+.React.-.Opera.2024-05-04.23-58-36.mp4
could u update the code
<SidebarContext.Provider value={{ expanded }}>
<ul className="flex-1 px-3 overflow-y-auto">{children}</ul>
</SidebarContext.Provider>
I am making the ul overflow-y-scroll but it also start scrolling tooltip on x-axis
what could be the problem? all other code is same
I just created a react app added the first thing is this.. it takes the full screen. Should I add something below it so it doesn't take full width ?
Is their a way to fix the over text that always goes on 2 lines when we have multiple words ?
To fix the FULL SCREEN issue add w-fit to nav element.
<nav className="h-full w-fit flex flex-col bg-white border-r shadow-sm">
When adding the property overflow-y-auto to enable scrolling, the module names no longer appear when the sidebar is collapsed and the mouse hovers over a module. How can I resolve this issue without modifying the property?
so guys i'm new to react ,but why there's nothing on the sidebar?
if i want to add a dropdown menu, what should i do?
Now we have shadcn side menu, use that...
Agregen al app.jsx
import { LayoutDashboard, Home, StickyNote, Layers, Flag, Calendar, LifeBuoy, Settings } from "lucide-react";
import Sidebar, { SidebarItem } from "./components/Sidebar"
function App() {
return (
<>
<SidebarItem icon={} text="Home" alert />
<SidebarItem icon={} text="Dashboard" active />
<SidebarItem icon={} text="Projects" alert />
<SidebarItem icon={} text="Calendar" />
<SidebarItem icon={} text="Tasks" />
<SidebarItem icon={} text="Reporting" />
<SidebarItem icon={} text="Settings" />
<SidebarItem icon={} text="Help" />
</>
)
}
export default App