<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
link
href
=
rel
=
"stylesheet"
/>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"ui container"
>
<
div
class
=
"ui sidebar inverted vertical menu"
>
<
a
class
=
"item"
>
Data Structures
</
a
>
<
a
class
=
"item"
>
Algorithms
</
a
>
<
a
class
=
"item"
>
Machine Learning
</
a
>
<
button
class
=
"ui button"
onclick
=
"openSidebar()"
>
Close Sidebar
</
button
>
</
div
>
<
div
class
=
"dimmed pusher"
>
<
center
>
<
div
class
=
"ui header green"
>
<
h1
>
GeeksforGeeks
</
h1
>
</
div
>
<
strong
>
Semantic UI Sidebar Width Variation
</
strong
>
</
center
>
<
div
class
=
"ui segment"
>
<
h1
>Welcome to GeeksforGeeks</
h1
>
<
p
>Find the best programming tutorials here.</
p
>
<
center
>
<
div
>
<
div
class
=
"ui button"
onclick
=
"changeWidth('thin')"
>
Thin
</
div
>
<
div
class
=
"ui button"
onclick
=
"changeWidth('very thin')"
>
Very Thin
</
div
>
<
div
class
=
"ui button"
onclick
=
"changeWidth('')"
>
Normal
</
div
>
<
div
class
=
"ui button"
onclick
=
"changeWidth('wide')"
>
Wide
</
div
>
<
div
class
=
"ui button"
onclick
=
"changeWidth('very wide')"
>
Very Wide
</
div
>
</
div
>
<
button
class
=
"ui button green"
onclick
=
"openSidebar()"
>
Open Sidebar
</
button
>
</
center
>
</
div
>
</
div
>
</
div
>
<
script
>
const changeWidth = (width) => {
$('.ui.sidebar')
.removeClass('thin')
.removeClass('very thin')
.removeClass('wide')
.removeClass('very wide')
$('.ui.sidebar').addClass(width)
}
const openSidebar = () => {
$('.ui.sidebar').sidebar('toggle')
}
</
script
>
</
body
>
</
html
>