►
From YouTube: Super Sidebar: New navigation Vue POC
Description
As we look into redesigning our navigation, this POC aims to answer some of our implementation questions. Should we build it in Vue, or HAML? What performance, accessibility, and reliability concerns are there? How do we iterate towards the new navigation in a sensible way?
Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/381718
Sidebar Epic: https://gitlab.com/groups/gitlab-org/-/epics/9044
A
Okay,
so
we
want
to
talk
through
the
proof
of
concept
that
Paul
and
I
worked
on
last
week,
the
last
couple
of
days
about
the
idea
of
rebuilding
the
sidebars
for
the
supercycle
or
the
North
Star
SVU
component.
So
it's
like
a
view
app,
so
we
spent
a
couple
of
days
on
that
or
mostly
on
The
View
part
I'm,
mostly
on
the
on
the
rails,
part
like
how
to
how
to
get
the
data
there.
A
So
we
got
something
going.
Of
course
it's
a
proof
of
concept
and
I
think
as
Sam
put
it
in
the
in
the
issue
description,
he
wanted
one
buggy
messy
thing.
So
that's
what
what
you
got!
I
I'm
gonna
show
you
that
and
then
go
a
bit
through
the
questions
that
also
Sam
left
on
the
on
the
issue
and
go
a
bit
through
this
with
you
and
then
we
can
just
discuss
as
things
come
up.
So
let
me
get
my
screenshot
going.
A
A
A
Is
that
this,
the
the
logic?
What
makes
the
sidebar
basically
is
done
in
a
in
in
Ruby
on
the
on
the
back
end?
Obviously-
and
there
are
like
three
main
classes
that
drive
this
there's
like
a
sidebar
panel-
that's
basically
entire
thing
on
the
left
here,
which
then
consists
of
many
sidebar
menus,
so
like
deployments,
is
a
menu
infrastructure
as
a
menu
and
so
on,
and
usually
these
menus
have
menu
items,
and
there
are
for
each
of
these
three.
A
There
are
Ruby
classes
that
then
have
things
like
methods
like
render
question
mark,
and
in
there
you
can
put
okay,
you
render,
if,
if
the
user
has
this
and
that
license
available
for
illustration
purposes,
this
is
how
it
looks
in
Ms
paint,
basically
and
those
classes
we
do
want
to
reuse
because
there's
a
lot
of
code.
There
also
like
what
are
the
URLs
that
show
an
active
State
when
you
are
on
them,
like
all
these
things
live
in
there.
A
So
what
I
did
as
a
as
a
very
first
step
of
this
POC
is
I,
went
into
the
kind
of
the
parent
class
of
this
all
and
added
a
very
kind
of
trivial
to
Json
method
to
it,
which
just
kind
of
opens
up
an
object,
throws
in
all
the
values
we
need,
like
a
kind
of
current
user,
the
counts
for
the
to-do's
and
also
the
renderable
menus.
So
that's
a
method
coming
from
this
class.
A
A
So
here
I
called
super
panel,
because
obviously
projects
panel
was
taken
already,
and
you
can
see
here
just
from
that
panel
I
had
I
had
this
to
Json
and
I
just
added
in
some
new
like
this
plan,
menu
is
new
and
the
develop
menu
is
new,
but
also
just
threw
in
like
an
old
old
settings
menu
and-
and
as
you
can
see
this,
this
works
quite
well
and
maybe
Paul
you
can
describe
how
the
future
as
part
like
picks
it
up
and
continues
on
on
the
client.
If
you
want.
C
C
A
Right
so
with
most
of
the,
like
logic,
still
happening,
even
on
the
back
on
the
back
end,
like
even
the
decision
like.
Is
this
the
active
link?
This
is
like
easier
to
do,
I
think
on
when
you're
still
in
the
Ruby,
we
have
access
to
all
the
URLs
help
us
then
then
redoing
that
on
the
on
the
front
end,
and
then
it
just
has
it
in
the
in
the
props.
Basically,
okay,
I'm
the
active
one,
and
if
I
don't
have
any
children,
then
I'm
a
link,
otherwise
I'm
a
collapse
and
so
on.
A
A
I'm
back
so
what
I
was
showing
us
that
there
is
a
small
moment
where
the
sidebar
is
not
visible,
because
it's
now
rendered
by
viewjs
and
not
server
side
rendered?
That's
something
we
discovered
as
a
possible
blocker
or
yeah
like.
Maybe
it's
not
good
for
also
accessibility
reasons.
I
I
started
a
conversation
with
Scott
about
that,
but
that's
yet
to
to
find
out.
A
Got
it
I
mean
here,
the
overlapping
is
just
us
not
finishing
the
the
things,
but
if
I
go
to
also
another
project,
you
will
see
it
again.
So
it's
it's
empty
for
I
mean
it
won't
be
empty
for
that
long,
because
it's
my
my
local
development
environment,
that's
a
bit
slow,
but
I
think
it
won't
would
be
noticeable
if
we
would
do
it
like
that.
A
A
Okay,
let
me
check
what
I
skipped
over
so
I
think
we've
described
how
the
data
currently
gets.
There
I've
mentioned
the
the
issue
with
the
perceived
performance.
One
thing
we
did
not
measure
at
least
I
did
not
measure
also
is
if
the
kind
of
this
I
mean
it's
not
a
round
trip,
but
before
we
we
just
rendered
out
this.
This
data
model
this
panel
into
HTML
and
that's
pretty
straightforward.
Now
we
convert
it
into
Json,
base64
encoded
and
then
do
the
reverse
on
the
client.
So
I'm
not
sure.
A
A
That
way
might
make
it
a
little
bit
easier
in
the
sense
that
we
don't
have
to
kind
of
change
the
header
based
on
these
toggles,
but
it
would
just
be
like
don't
show
it
and
then
we
have
a
bit
of
a
maybe
missing
links
in
the
in
the
super
sidebar,
but
at
least
we
wouldn't
run
so
much
the
risk
of
of
kind
of
messing
with
the
existing
top
bar
for
the
for
the
current
navigation.
So
that's
maybe
one
thing
and.
A
We
Are
One
Thing
listed
here
as
things
we
might
run
into
not
so
much
of
an
edge
case.
I
think
we
would
definitely
need
to
tweak
the
startup
CSS
a
bit
because
all
the,
if
I
understand
this
correctly,
all
the
CSS
that
is
used
in
the
site
but
needs
to
be
in
there.
Otherwise,
there
is
kind
of
as
a
moment
in
in
building
the
page
where
it's
using
startup
CSS,
but
not
the
full
CSS
bundle.
A
A
But
since
we
can
reuse
most
of
of
the
sort
of
like
the
authority
code
just
to
reshuffle
a
little
bit
and
maybe
duplicate
it
for
a
while,
but
it's
it's
not
really
inventing
something
new
I
think
the
the
scope
where
it
would
be
in
scope
and
yeah
like
in,
like
shown
in
the
in
the
Prototype
quickly.
You
can
build
like
new
panels
while
leaving
the
old
panels
alone
without
you
know
like
putting
a
lot
of
feature
flagging
in
the
same
files.
A
If
it's
just
more
effort
to
like
do
it
with
view
or
if
it
turns
out
to
be
in
the
end
that
it
pays
off,
because
we
want
to
do
something
really
sophisticated
where
okay,
it
looks
completely
different
for
mobile
or
something
like
doing
that
with
the
older
approach.
That
would
become
a
bit
of
a
headache
because
we
kind
of
have
to
double,
render
it
and
then
do
it
all
with
CSS.
So
think.
A
It's
basically
the
the
the
reason
why
you
see
this.
This
sidebar
only
reappearing
after
a
second,
because
it
only
gets
now
rendered
or
like
drawn
to
to
the
page
when
our
JavaScript
on
the
page
is
ready
and
then
picks
up
this.
This
data
and
says:
okay,
now
I'm
the
view
component
I'm
I'm,
showing
now
and
before
that
it
was
part
of
the
initial
HTML
we
serve
with
each
request,
even
before
the
JavaScript
hits.
B
A
B
A
Yeah
I
think
we
do
similar
things
in
other
places
where,
instead
of
the
like
the
real
icon
and
the
real
text,
you
have
like
sort
of
a
placeholder
and
you
just
kind
of
guessing
that
each
menu
has
about
eight
entries
or
whatever.
And
then
you
show
these
skeleton
loaders
or
what
they're
called.
So
we
could
like
from
the
perceived
performance.
A
We
could
kind
of
masquerade
that
a
little
bit
for
sure
but
yeah
in
an
ideal
world
gitlab
would
have
server
side
rendered
view,
which
is
a
thing,
but
that's
a
thing
of
the
future
for
us
currently,
because
it's
we,
we
don't
have
that
in
our
Tech
stack.
Yet
there
are
initiatives
to
do
this,
but
they're
not
yet
available
to
us.
So.
E
D
Yeah
I
think
that's
TBD.
Since
we
spoke
with
David
and
he
mentioned
you
know,
alternate
users
May
frequently
be
using
some
higher
tier
features,
and
so
those
May
be
available
for
those
users,
but
not
for
users
who
are
not
at
that
tier.
So
that
would
be
part
of
the
research
that
we
have
upcoming
to
determine
if
that
is
about.
If
that
is
viable
or
not.
A
So
I
think
to
look
at
the
the
design,
I
think
well
also
the
POC
it's
similar
like
certain
things.
We
could
kind
of
have
statically,
we
mean
it,
but
it
would
be
duplication
of
course
of
effort.
So
we
we
could
have
these
things
sort
of
in
place,
so
it
looks
like
half
of
it
is
already
there,
and
maybe
even
these
top
pin
things.
But
I
tried
to
avoid
that
because-
and
we
have
like
one
and
a
half
implementations
of
this
but
yeah,
the
perceived
performance
could
be
improved
a
little
bit.
B
F
F
To
you
mentioned,
Thomas
there'd
be
a
duplication
of
effort
if
we
did
sort
of
some
back-end
rendering,
in
addition
to
front-end
rendering
that
may
be
true
unless
the
sort
of
interactivity
is
just
completely
different,
UI
right.
So
what
I'm,
not
too
sure
about,
is
how
some
of
these
things
interact
so
like
if
you
click
on
your
work,
what
does
that
do?
Does
that
replace
all
of
right?
Okay,
so
technically
nothing!
There
would
need
to
be
aligned.
G
D
D
A
A
D
B
D
G
Oh
I
I
have
a
question.
Would
it
be
like
very
bad
experience
if
you
render
something
like
skeleton
loader
in
camel
on
server
side
and
then
like
so
it
won't
be
like
empty
box
for
the
user,
it
would
appear
like
something
is:
is
loading
and
I
guess
we
will
have
like
the
smaller
startup
CSS,
because
I
assume
it
will
be
less
less
styles
to
style
the
skeleton
loader
than
the
than
the
whole
menu?
A
That
would
for
sure,
be
possible
and
I
think
also
not
not
too
much
of
a
stretch,
because
it
would
probably
already
help
a
lot
if
we
had
this
kind
of
colored
upper
thing
already
here
and
these
three
panels
and
these
things
and
this
thing
and
for
the
rest,
just
a
couple
of
lines
of
the
skeleton
so
I
think
for
that.
We
we
wouldn't
need
to
duplicate
too
much,
but
a
couple
of
CSS
classes
and
the
base
structure.
A
B
G
G
What
we
have
now
is
like
we
will
have
the
skeleton
loader
like
they
probably
will
have
the
purple
box
on
the
top,
maybe
not
purple
another
color,
and
it's
a
couple
of
lines
that
look
like
skeleton
loader
and
this
will
be
rendered
in
Hemel.
And
then
the
client-side
application,
which
will
be
done
in
view,
will
render
like
the
the
full
menu
with
text
with
text
and
also
JavaScript
interactions.
If
you
know
like
make
it
collapsible.
D
C
I'm
not
sure
I
have
an
answer.
That's
the
ID
behind
this
boc
for
sure,
and
so
that
that
UI
jump
is
kind
of
the
biggest
limitation.
If
we
consider
it
a
blocker,
we're
gonna
have
to
find
a
another
approach.
I
think
that
Mark
is
suggesting
that
we
build
another
POC
where
most
of
the
sidebar
is
built
in
the
back
end,
and
then
interactivity
is
being
added
client
side,
so
that
that
would
be
another
approach
which
wouldn't
require
that
we
build
everything
from
scratch
with
view.
C
So
perhaps
that's
something
that
we
should
look
into
personally
I
feel
like
you're
building.
Everything
with
with
you
makes
sense,
but
yeah
we're
gonna
have
to
be
mindful
of
that
limitation,
and
if
we
consider
it
a
blogger
from
a
ux
perspective
view
might
not
be
the
right
approach,
I
guess
so,
I
guess
it's
a
ux
call
in
a
way.
Okay,.
D
B
E
Yeah,
it's
kind
of
difficult
because,
like
I,
don't
understand
like
how
long
that
weight
could
be
or
or
like
what
that
impact
is
versus
like
what
we
have
today,
like
obviously
I,
think
a
skeleton
load
could
be
a
good
like
resolve
for
that,
but
obviously
we
would
want
it
to
take.
You
know
too
long
if
it's
a
fairly
large
impact
in
terms
of
waiting
for
that
money
to
load.
F
D
F
B
D
B
B
B
A
If
we
then
later
say
okay,
that
you
think
was
not
a
good
idea
like
that,
would
stay
and
sure,
then
we
would
need
to
think
about
how
do
we
make
the
old
sidebar
harmel
partials
into
what
we
want
from
the
North
Star,
but
at
least
the
kind
of
the
the
gist
of
it
or
the
the
the
the
back
end
of
it.
We
would
need
to
throw
away
still
a
lot
so.
A
E
Okay,
this
is
probably
outside
the
scope
of
this,
but
I'm
just
curious.
Is
there
a
scenario
in
the
future
where
we
only
reload
the
sidebar
when
we
need
to
such
as
like
going
to
a
different
project
or
going
to
your
work
section
rather
than
having
to
load
it
every
every
time
someone
clicks
a
link
within
that
section.
C
Yeah
I
wonder
what
what
exactly
are
we
gonna
try
in
the
in
the
next
week,
because
from
from
my
point
of
view
to
the
current
POC,
is
enough
right?
I?
Don't
think
that
we
need
to
invest
more
much
more
effort
in
that
POC,
because
we
have
a
good
idea
of
what
the
the
back
end
structure
is
going
to
look
like
and
then,
if,
if
we
want
to
use
that
in
in
the
client
side,
we
we
should
just
get
started
with
the
view
implementation
right.
G
D
C
D
B
B
G
I
I
have
a
question
for
Thomas
and
Paul.
Did
you
think
about
the
case
that
we
render
the
initial
initial
navigation
like
we
do
now
in
camel
like
on
server
side
and
then
all
new
features
like
like
Works
workspace
menu
and
the
fly
out
menu,
if
you're
in
there,
with
the
View
application
and
then
later?
If
we,
if
we
can
run
the
review
application
on
the
server
side,
we
can
switch
like
this
initial
navigation
to
to
your
application
would
be,
would
it
be
difficult
first,
maybe
in
the
correct
past,.
G
Yeah,
like
the
new
parts
like
the
fly
out
menu
like
Zip,
shows
when
you
hover
over
the
the
menu
item,
so
this
would
be
the
View
application
and
the
workspace
like
drop
down.
It
will
be
also
save
your
application,
but
the
initial
part
that
is
visible,
like
is
the
only
the
menu
like
all
initial
menu
items
would
be
built
in
Hammer
like
they
do
they
do
now
and
later.
C
Yeah
that
makes
sense
yeah,
so
we
haven't
tried
that
yes,
this
POC
was
really
trying
to
move
everything
to
you
so
I
guess.
We
could
give
this
a
try,
because
the
the
only
interaction
that
we
have
in
in
this
main
menu
is
being
able
to
expand
and
collapse.
The
sections
right
surprise.
This
could
be
achieved
with
the
details,
HTML
element
or
some
simpler,
JavaScript
I,
don't
know.
A
I
think
it
would
be
worth
checking
out
and
especially
then
testing
the
idea
by
looking
at
the
more
complex
behaviors
we
may
want
to
have
for
like
when
you
go
to
a
smaller
screen
size
or
something,
and
because
we
know
we're
like
doing
something
with
Futures
is
probably
rather
simple,
because
you
just
do
a
couple
of
view:
VF,
ifs
and,
and
there
you
go,
but
doing
it
like
trying
to
do
only
this.
These
interactive
bits
and
pieces
building
on
what
we
have
today.
I
think
that
would
be
a
great
Poco.
D
F
G
A
A
Think
if
you
just
all
four
check
it
out
and
it's
it's
beneficial,
no
matter
what
we,
what
we
do
in
the
end
already
like
with
context
which,
for
example,
probably
also
could
do
that
with
Hammer
as
well
right,
it's
not
that
interactive,
but
just
someone
trying
to
either
do
this
way
or
the
other
way.
We
we
benefit.
B
Thank
you,
so
next
week's
holidays
in
the
USA,
as
well
with
Thanksgiving
I'll,
be
out
for
some
of
that
week
as
well.
Maybe
the
whole
week,
but
it's
probably
a
good
time
to
do
one
more
POC,
and
then
we
could
pick
up
our
normal
schedule
when
we
get
back,
but
let's
also
just
check
in
with
Sam
and
if
Lena
and
Mark
could
take
the
lead.
That
would
be
awesome.