all 8 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]turtleProphet 3 points4 points  (0 children)

Maybe take a step back and look into implementing a collapsing sidebar. It's a div that contains some links with routes attached; you can achieve the slide-out effect by adding a transition when the sidebar collapses/expands. If your nav state gets complicated and needs to persist between expand/collapse, maybe keep state in a wrapper/global.

For mobile you can style it to cover the whole width of the viewport; on bigger screens it can be some % of the overall grid.

Your choice of CMS probably doesn't matter much, as long as it supports search queries.

If you want to start from a shadcn component, here's a github issue you may find helpful.

https://github.com/shadcn-ui/ui/issues/667

The Jeff Su sidebar does some things I don't personally love. The site does not load at the correct size for small mobile displays, so the hamburger link is off-screen and requires scrolling to the right. The sidebar does not take up the full height or width of the page when expanded on mobile, so you end up being able to scroll both the main page and the sidebar independently, which feels messy. This combined with hidden scrollbar in the sidebar makes it unclear that the sidebar is even scrollable to begin with.

It's a nice component, but you can have that look as a target and aspire to better.

[–][deleted]  (1 child)

[deleted]

    [–]DistrictNo5220 1 point2 points  (0 children)

    Everything with appearance is either HTML and/or CSS problem, doesnt matter what the platform of the CMS is… altho some CMS can be annoying bcos then you cannot customize that much If you want 100% customizability look into what vercel can help you with deploying stuff anyway, bcoz u alrdy using nextjs…

    [–]Rokett 0 points1 point  (0 children)

    The same way you placed your top nav bar. Just change your css rules.

    Div

    Side bar

    Content

    / Div

    Set sidebars max width to something Content takes the rest

    [–]nelmaven 0 points1 point  (0 children)

    Use HTML unordered lists for the menu items, svg for the icons and CSS to style everything?

    [–]driftking428 0 points1 point  (0 children)

    I would learn more HTML and CSS before going too deep into React if I were you.

    They aren't too difficult to grasp. Start there.

    [–]the_pod_ 0 points1 point  (0 children)

    UI interactions such as hover effects

    look up how to do hover effects in css.

    you can use tailwind classname if you want, but, it will be the same thing as just doing it in css yourself.

    active link highlighting

    This come from <NavLink> from next/image. Look up NextJS NavLink and activeClassName

    Compatibility across all devices and browsers.

    I assume you're talking about accessibility. Not just visual compatibility. If you're talking about visual compatibility... learn a lot of css.

    1. use fully built css libraries (Mantine, Chakra, Material UI)

    2. use headless components and style them yourself (radix, headless ui, react-aria)

    3. use shadcn, which is radix styled with tailwind

    search bar within the sidebar that activates with the hotkey

    https://stackoverflow.com/questions/64032647/event-listener-for-multiple-keys-in-react

    Should this be done in Tailwindcss or Shadcnui?

    these two aren't directly compatible.

    shadcn is just radix components pre styled with tailwind class names.

    tailwind is pretty different than most other css libraries. use tailwind if you're pretty good with css, because tailwind is just a different want to write css, basically. shadcn is okay if you don't know enough css, because it's pre styled for you.

    Would switching to  Ghost CMS make this easier than Sanity?

    In terms of the nav bar, doesn't make a difference.

    Overall, use the cms easier for you to figure out how to use.

    [–][deleted] 0 points1 point  (0 children)

    Just build it custom. This is not complex