MAGIC_HTML_TEST (see line numbers on each row)

lines_numbers.html

<!-- HTML generated using hilite.me --><div style="background: #000000; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><table><tr><td><pre style="margin: 0; line-height: 125%"> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34MAGIC!
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87</pre></td><td><pre style="margin: 0; line-height: 125%"><span MAGIC!style="color: #ff0000">import</span> React, {Component} from <span style="color: #87ceeb">&#39;react&#39;</span>;
<span style="color: #ff0000">import</span> {withRouter} from <span style="color: #87ceeb">&#39;react-router-dom&#39;</span>

<span style="color: #ff0000">import</span> <span style="color: #87ceeb">&#39;./style.styl&#39;</span>;
<span style="color: #ff0000">import</span> Sign from <span style="color: #87ceeb">&#39;../sign&#39;</span>;
<span style="color: #ff0000">import</span> {Link} from <span style="color: #87ceeb">&#39;react-router-dom&#39;</span>;

<span style="color: #ff0000">const</span> RoundNumber = (props) =&gt; {
<span style="color: #ff0000">return</span> (
&lt;span className=<span style="color: #87ceeb">&quot;sidebar__list--span&quot;</span>&gt;{props.number}&lt;/span&gt;
)
};

<span style="color: #ff0000">const</span> menu = [
{
path: <span style="color: #87ceeb">&#39;/inbox-content&#39;</span>,
icon: <span style="color: #87ceeb">&#39;inbox&#39;</span>,
name: <span style="color: #87ceeb">&#39;main&#39;</span>

},
{
path: <span style="color: #87ceeb">&#39;/sent-content&#39;</span>,
icon: <span style="color: #87ceeb">&#39;send&#39;</span>,
name: <span style="color: #87ceeb">&#39;send&#39;</span>
}
]

<span style="color: #ff0000">class</span> Listitems <span style="color: #ff0000">extends</span> Component&lt;{}&gt; {

renderMenuItem = (item) =&gt; {
<span style="color: #ff0000">const</span> {location: {pathname} = {}} = <span style="color: #ff0000">this</span>.props
<span style="color: #ff0000">const</span> {path, icon, name} = item
<span style="color: #ff0000">return</span> (
&lt;Link to={path} className=<span style="color: #87ceeb">&quot;sidebar__list--link&quot;</span>&gt;
&lt;li
className={pathname === path ? <span style="color: #87ceeb">&#39;sidebar__list--item active&#39;</span> : <span style="color: #87ceeb">&#39;sidebar__list--item&#39;</span>}
key={path}
&gt;
&lt;Sign name={icon}/&gt;
{name}

{<span style="color: #00ff00">/*&lt;RoundNumber number=&quot;3&quot;/&gt;*/</span>}
&lt;/li&gt;
&lt;/Link&gt;
)
}

render() {
<span style="color: #ff0000">const</span> {location: {pathname} = {}} = <span style="color: #ff0000">this</span>.props

<span style="color: #ff0000">return</span> (
&lt;div&gt;
&lt;div&gt;
&lt;ul className=<span style="color: #87ceeb">&quot;sidebar__list&quot;</span>&gt;
{menu.map(<span style="color: #ff0000">this</span>.renderMenuItem, <span style="color: #ff0000">this</span>)}
{<span style="color: #00ff00">/* &lt;li className={this.state.active ? &#39;sidebar__list--item active&#39; : &#39;sidebar__list--item&#39;}&gt;</span>
<span style="color: #00ff00">&lt;Sign</span>
<span style="color: #00ff00">name=&quot;inbox&quot;/&gt;</span>
<span style="color: #00ff00">&lt;Link to=&quot;/inbox-content&quot; className=&quot;sidebar__list--link&quot;&gt;Inbox</span>
<span style="color: #00ff00">&lt;/Link&gt;</span>
<span style="color: #00ff00">&lt;RoundNumber number=&quot;3&quot;/&gt;</span>
<span style="color: #00ff00">&lt;/li&gt;</span>
<span style="color: #00ff00">&lt;li className=&quot;sidebar__list--item&quot;&gt;</span>
<span style="color: #00ff00">&lt;Sign name=&quot;send&quot;/&gt;</span>
<span style="color: #00ff00">&lt;Link to=&quot;/sent-content&quot; className=&quot;sidebar__list--link&quot; &gt;</span>
<span style="color: #00ff00">Sent</span>
<span style="color: #00ff00">&lt;/Link&gt;</span>
<span style="color: #00ff00">&lt;/li&gt;</span>
<span style="color: #00ff00">&lt;li className=&quot;sidebar__list--item&quot;&gt;</span>
<span style="color: #00ff00">&lt;Sign name=&quot;report&quot;/&gt;</span>
<span style="color: #00ff00">&lt;Link to=&quot;/spam-content&quot; className=&quot;sidebar__list--link&quot;</span>
<span style="color: #00ff00">href=&quot;#&quot;&gt;Spam&lt;/Link&gt;&lt;RoundNumber number=&quot;2&quot;/&gt;</span>
<span style="color: #00ff00">&lt;/li&gt;</span>
<span style="color: #00ff00">&lt;li className=&quot;sidebar__list--item&quot;&gt;</span>
<span style="color: #00ff00">&lt;Sign name=&quot;delete&quot;/&gt;</span>
<span style="color: #00ff00">&lt;Link to=&quot;/trash-content&quot; className=&quot;sidebar__list--link&quot;&gt;</span>
<span style="color: #00ff00">Trash</span>
<span style="color: #00ff00">&lt;/Link&gt;</span>
<span style="color: #00ff00">&lt;/li&gt;*/</span>}
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
);
}
};

<span style="color: #ff0000">export</span> <span style="color: #ff0000">default</span> withRouter(Listitems);
</pre></td></tr></table></div>