Home - Sticky Nav Bar

[aryamankha]

Implement sticky nav bar using Vivid! In the browser, command-click on any component to edit its code and hit Command-K to quickly preview styles. Command-Shift-K will let you add new empty components!

[Alphx-rgb]

I'll work on this.

[aryamankha]

Great - assigning to you

[Alphx-rgb]

I have almost created the component but stuck on some errors . Should I update the code for everybody to view?

[aryamankha]

What are the errors you found? If you can get it to a place where there are no breaking changes, we can create a new issue to fix the errors you have. Right now, I'm getting an "object is not iterable erro" on AppSearchBar

[Rishabh2324]

Is this issue fixed... ? Facing same error

[Alphx-rgb]

yeah, this is the error I am facing too... I am checking several resources but have not been able to figure out a solution. I guess we can create a new issue for this. In the meanwhile, I'll try myself also for correcting the same. And after this issue gets fixed, We can focus on building more components.

[Rishabh2324]

Take reference from this

1. First update DataContext

export const initialState: IInitialState = { location: '', checkIn: null, checkOut: null, guests: { adults: 0, children: 0, infants: 0 }, };

export const DataContext = createContext<{ state: IInitialState; dispatch: React.Dispatch<any>; }>({ state: initialState, dispatch: () => null, });

interface IIProps { children: React.ReactNode; }

export const ContextProvider = ({ children }: any) => { const [state, dispatch] = useReducer(dataReducer, initialState); return ( <> <DataContext.Provider value={{ state, dispatch }}> {children} </DataContext.Provider> </> ); };

3. While using your context in Date range Destruture like this
   const { state, dispatch } = useDataContext();
const { location, checkIn, checkOut, guests } = state;

4. Also add ContextProvider to parent component so that dispatch can work

5. Avoid using any

6. You might also need to add some null checks on you component while using state

This worked for me

[Alphx-rgb]

I am facing a few errors which I am unable to resolve. I'll work on it, if I get it, I'll make a PR.

[Hamjaster]

I'd like to work on it. Please assign it to me.

[aryamankha]

Assigning it to you

[Hamjaster]

I've a question, what does Vivid in "Sticky Nav by using Vivid" means??

[Hamjaster]

I ran the code in my local environment, Theres just a simple navbar in it? what to do, ? I am quite confused