Ivan StarkovandOleg Isonen 6e41286635 experimental: Add Desktop Webflow Navbar support (#3665)
## Description

This 
<img width="856" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/f8894380-0dbb-45c7-a1a5-410dbcb01fc8">

To this
<img width="1049" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/bf618095-08be-4c6f-850f-56354e74e738">

## Known issues:

### All
- w-nav-link preset colors do not match

### Mobile
Mobile burger is not shown 
- w-nav-button does not have breakpoint style i.e. display: none->block
for mobile
- w-nav-menu does not have breakpoint related style i.e display: block
-> none for mobile
- we don't have widget icons like burger i.e. `"data": { "widget": {
"type": "icon", "icon": "nav-menu" } }` _having breakpoint issues and
that user in any case need to use Sheet on mobile this is ok_



## Steps for reproduction

Copypaste Navbar from webflow 2 webstudio

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

---------

Co-authored-by: Oleg Isonen <oleg008@gmail.com>
2024-07-10 18:36:01 +03:00
2024-07-05 22:46:06 +03:00
2024-05-28 14:15:55 +03:00
2023-03-02 11:05:44 +01:00
2024-05-28 14:15:55 +03:00
2024-07-09 13:00:14 +02:00
2023-09-06 21:43:29 +03:00
2024-02-18 11:36:30 +01:00

builder-screenshot

Webstudio is an Open Source Visual Development Platform for developers, designers, and cross-functional teams. You own the data, components, and infrastructure. You can use the hosted version or roll out your own.


Learning Resources

Social Media

Thanks

Lost Pixel

Thanks to Lost Pixel for providing the visual testing platform that helps us review UI changes and catch visual regressions.

Languages
TypeScript 98.9%
PLpgSQL 0.5%
CSS 0.3%
Shell 0.2%
JavaScript 0.1%