Gfrktyl

For a part of my coding interview I received this prompt:

The attached screen comps show how a navigational menu should behave on mobile screens. Your task is to design a component tree that can render all the states of this navigational menu. Present your answer as a nested component tree in JSX-pseudocode, with any relevant props as attributes (but the props don't have to be assigned values). Be sure to explain what each prop will be used for. For example:

<App>

  <Foo fooProp>

    // fooProp is used to determine if foo is blah blah blah

    <NestedBar>

      <NestedBaz bazProp oofProp />

      // NestedBaz needs two props: bazProp determines x and oofProp determines y

    </NestedBar>

  </Foo>

</App>

https://gist.githubusercontent.com/mohanzhang/bd16eb1d83b2b318af0814cd667be50f/raw/7260cad31a5db70f54e6898ef31813f86633affa/comp.png

Above is a link to the mockups they're referring to

This was my response

<App>

  <Foo>

    // we can pass mode and roll into a getTheme function, and pass theme into components to determine styling

    <Nav mode role>

      // Role is an enum for role-specific behavior. E.G, search only shows up for admin role

      // mode is an enum for the type of view. E.G, dashboard/workspace/default

      <NavButton onClick selected>

        <Icon hasAlert showBorder size /> // Icon is a general dumb ui component class

          // OR

        <img src /> // sizing handled through css

        <DropdownMenu>

          <DropdownMenuItem showDivider>

          </DropdownMenuItem>

        </DropdownMenu>

      </NavButton>

    </Nav>

    <Main mode role theme> // mode and role determine menu type

      <AdminMenu>

        <DropdownMenu hasDividers={false}>

          <DropdownMenuItem showDivider>

          </DropdownMenuItem>

        </DropdownMenu>

      </AdminMenu>

      <SearchView>

        <DropdownMenu>

          <DropdownMenuItem showDivider>

            <img src /> // to include images, just specify the image as a child

            <span>Oliver Ullman</span>

          </DropdownMenuItem>

        </DropdownMenu>

      </SearchView> // substitute timeline view for chatview/notifications view, ect

    </Main>

  </Foo>

</App>

I did the best that I could, but I have this sense that I've done a very poor job (I haven't gotten a response back yet). I would really love to get some criticism on what I did, as I feel like in the future I might be able to implement this design much better.
As stupid as it sounds, I'm also not great at following instructions, so, if you feel like I misinterpreted any of those instructions let me know too!