Added docs for Menu, Dropdown & Toggle

Signed-off-by: Vedant <[email protected]>

content/docs/user-manual/comps.md

@@ -75,12 +75,13 @@ Now, lets take a look at some examples, which will depict all the styles and com
     <img src="/images/button-3.png" alt="chrome button">
 
   Now we will see all these buttons in action:
+
   <video width="100%" height="auto" controls>
     <source src="/images/button-video.webm" type="video/webm">
     Your browser does not support the video tag.
   </video>
 
-  You can find the complete example [here](https://github.com/vrnimje/quick-ftxui/blob/master/examples/Button.qf)
+  You can find the complete example here: [Button.qf](https://github.com/vrnimje/quick-ftxui/blob/master/examples/Button.qf)
 
   Note: Since we used the same variables for both the `Button`s, the output from their commands were both reflected in `z`'s value.
 
@@ -91,10 +92,10 @@ Syntax for defining a `Slider` is
 ```sh
 [color] Slider {
   "[Slider_label]",
-  variable_name,
-  range_min,
-  range_max,
-  step
+  [variable_name],
+  [range_min],
+  [range_max],
+  [step]
 }
 ```
 
@@ -138,12 +139,17 @@ Now, lets take a look at some examples, which will depict how `Slider`s can be c
     <img src="/images/slider-2.png" alt="0-100 2 step Slider">
 
   Lets look at these sliders we have defined in action:
+
   <video width="100%" height="auto" controls>
     <source src="/images/slider-video.webm" type="video/webm">
     Your browser does not support the video tag.
   </video> 
 
+
   As we can see, the YellowLight `Slider` was progressing faster than the BlueLight one, as its step value was greater. 
+
+  You can check out the full example here: [Slider.qf](https://github.com/vrnimje/quick-ftxui/blob/master/examples/Slider.qf)
+
 
   Note: Avoid using `Slider`s in Horizontal blocks, as it results in its compaction like described below<br>
   <img src="/images/slider-3.png" alt="slider defect"><br>
@@ -157,8 +163,8 @@ Syntax for defining an `Input` is:
 ```sh
 [color] Input {
   "[Placeholder]",
-  Input_Option,
-  variable_name
+  [Input_Option],
+  [variable_name]
 }
 ```
 where
@@ -196,12 +202,119 @@ Now lets explore some examples
     and with text looks like: <br>
     <img src="/images/input-3.png" alt="password w/ text"><br>
 
-  Now lets see a actual demo
+  Now lets see an actual demo:
+
   <video width="100%" height="auto" controls>
     <source src="/images/input-video.webm" type="video/webm">
     Your browser does not support the video tag.
   </video> 
 
+  You can check out the full example here: [input.qf](https://github.com/vrnimje/quick-ftxui/blob/master/examples/input.qf)
+
+## 4. Dropdown, Toggle and Menu
+
+`Dropdown`s, `Toggle`s & `Menu`s are used to present a list of options to the user to choose one from. They all have similar syntax, the only difference between them is their representation.
+
+Syntax for defining a `Dropdown` is: 
+```sh
+[color] Dropdown {
+  ["list_item_1", "list_item_2", ... , "list_item_n", ],
+  [variable_name]
+} 
+```
+
+where,
+  - `color` will be applied to the `Dropdown`
+  - `list_item_i` refers to the options that will be given to the user
+  - `variable_name` of type `int`, to store option no. selected. Do note that the option numbers start from `0` 
+
+Syntax for defining a `Toggle` is also same
+```sh
+[color] Toggle {
+  ["list_item_1", "list_item_2", ... , "list_item_n", ],
+  [variable_name]
+} 
+```
+Syntax for defining a `Menu` is same, except for Option for Menu
+```sh
+[color] Menu {
+  ["list_item_1", "list_item_2", ... , "list_item_n", ],
+  [Menu_Option],
+  [variable_name]
+} 
+```
+
+where,
+  - `Menu_Option` can be `Vertical`, `Horizontal`, `HorizontalAnimated` and `VerticalAnimated`. The `Animated` options have transition while switching between the options.
+
+Lets look at some examples for the same:
+
+- A Horizontal Red Menu, with animated tranistions between the options
+  ```sh
+  int x
+  Red Menu{
+    [ "Physics", "Maths", "Chemistry", "Biology",],
+    HorizontalAnimated,
+    x
+  }
+  ```
+  which looks like this: <br>
+  <img src="/images/menu-1.png" alt="animated menu">
+
+- A normal, Vertical Green Menu
+  ```sh
+  int a
+  Green Menu {
+    [ "Physics", "Maths", "Chemistry", "Biology",],
+    Vertical,
+    a
+  }
+  ```
+  which looks like this: <br>
+  <img src="/images/menu-2.png" alt="animated menu">
+
+
+- A BlueLight Dropdown
+  ```sh
+  int z
+  BlueLight Dropdown {
+    [ "Zain", "Mahesh", "Alqama", "Vaidic", "Mundane", "Advait", ],
+    z
+  }
+  ```
+
+  which looks like this: <br>
+  <img src="/images/dropdown-1.png" alt="animated menu">
+
+- A Cyan Toggle
+  ```sh
+  int y
+  Cyan Toggle {
+    [ "On", "Off", ],
+    y
+  }
+  ```
+  which looks like this: <br>
+  <img src="/images/toggle-1.png" alt="animated menu">
+
+  Now lets take a look at how these components work:
+
+  <video width="100%" height="auto" controls>
+    <source src="/images/menu-video.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video> 
+
+  You can check out the full example here: [menu_toggle_dropdown.qf](https://github.com/vrnimje/quick-ftxui/blob/master/examples/menu_toggle_dropdown.qf)
+
+
+
+
+
+
+
+
+
+