style.css

body {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-weight: bold;
    font-size: 14pt;
    font-family: sans-serif;
    background-image: linear-gradient(45deg, rgb(145 0 255 / 50%), rgb(0 164 255 / 50%));
}

.bar-details::before, .bar-details::after {
    --size: 12rem;
    content: '';
    width: var(--size);
    height: var(--size);
    background: linear-gradient(45deg, rgb(129 77 197 / 65%), rgb(140 207 255 / 65%));
    border-radius: 50%;
    position: absolute;
    z-index: 0;
}
.bar-details::before {
    top: 1rem;
    left: 2rem;
}
.bar-details::after {
    bottom: 1rem;
    right: 2rem;
}

/* grid areas */
.bar-wrapper {
    --color-primary: rgb(0 12 255 / 40%);
    --color-secondary: rgb(0 165 255 / 20%);
    --dir-menu-size: 2.25rem;
    height: 80%;
    width: 80%;
    position: relative;
    display: grid;
    grid-template-columns: var(--dir-menu-size) auto var(--dir-menu-size);
    grid-template-rows: var(--dir-menu-size) auto var(--dir-menu-size);
    grid-template-areas: 'l t t' 'l c r' 'b b r';
    background-color: rgb(255 255 255 / 25%);
    border-radius: 1rem;
    overflow: hidden;            
    border: 4px solid var(--color-primary);
    backdrop-filter: blur(3px);
}
@media (max-width: 575px) {
    .bar-wrapper {
        height: 90%;
        width: 90%;
    }
}

[data-dir=top], [data-dir=right], [data-dir=bottom], [data-dir=left] {
    position: absolute;
}
[data-dir=top] {
    grid-area: t;
    top: 0;
    left: calc(-1 * var(--dir-menu-size));
    width: calc(100% + var(--dir-menu-size));
    height: var(--dir-menu-size);
}
[data-dir=right] {
    grid-area: r;
    right: 0;
    top: calc(-1 * var(--dir-menu-size));
    height: calc(100% + var(--dir-menu-size));
    width: var(--dir-menu-size);
}
[data-dir=bottom] {
    grid-area: b;
    bottom: 0;
    width: calc(100% + var(--dir-menu-size));
    height: var(--dir-menu-size);
}
[data-dir=left] {
    grid-area: l;
    left: 0;
    height: calc(100% + var(--dir-menu-size));
    width: var(--dir-menu-size);
}

/* scroll bar style */
nav.menu-bar::-webkit-scrollbar { /* width */
    width: 4px;
    height: 4px;
}
nav.menu-bar::-webkit-scrollbar-track { /* Track */
    background: var(--color-primary);
}
nav.menu-bar::-webkit-scrollbar-thumb { /* Handle */
    border-radius: 5rem;
    background: var(--color-secondary);
    border: 1.5px solid var(--color-primary);
}
nav.menu-bar::-webkit-scrollbar-thumb:hover {/* Handle on hover */
    background: #555;
}

/* scroll bar direction */
nav.menu-bar[data-dir=top] {            
    overflow-x: scroll;
    overflow-y: hidden;
}
nav.menu-bar[data-dir=right] {           
    overflow-x: hidden;
    overflow-y: scroll;
    direction: rtl;
}
nav.menu-bar[data-dir=right] ul{
    direction: ltr;
}
nav.menu-bar[data-dir=left] {
    margin-left: calc(-1 * var(--dir-menu-size));
    overflow-x: hidden;
    overflow-y: scroll;
}
nav.menu-bar[data-dir=bottom] {
    margin-bottom: calc(-1 * var(--dir-menu-size));
    transform: rotateX(180deg);
    overflow-x: scroll;
    overflow-y: hidden;
}
nav.menu-bar[data-dir=bottom] ul {
    transform: rotateX(180deg);
}

/* menu bar tabs */
nav.menu-bar ul {
    display: flex;
    margin: 0;
    padding-left: 2px;
    gap: 10px;
    list-style: none;
    align-items: center;
    height: var(--dir-menu-size);
    width: var(--dir-menu-size);
}        
nav.menu-bar[data-dir=left] ul, nav.menu-bar[data-dir=right] ul {
    transform: rotate(90deg);
}
nav.menu-bar ul li.tab {
    position: relative;
    background-color: var(--color-secondary);
    height: calc(100% - 3px);
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0 15px;
    color: var(--color-primary);
    cursor: pointer;
}
nav.menu-bar:is([data-dir=top], [data-dir=right]) ul li.tab {
    border-radius: 10px 10px 0 0;
}
nav.menu-bar:is([data-dir=left], [data-dir=bottom]) ul li.tab {
    border-radius: 0 0 10px 10px;
}
nav.menu-bar ul li.tab::before, nav.menu-bar ul li.tab::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
}
nav.menu-bar:is([data-dir=top], [data-dir=right]) ul li.tab::before {
    background: radial-gradient(circle at top left, transparent 70%, var(--color-secondary) 75%);
    left: -10px;
    bottom: 2px;
}
nav.menu-bar:is([data-dir=top], [data-dir=right]) ul li.tab::after {
    background: radial-gradient(circle at top right, transparent 70%, var(--color-secondary) 75%);
    right: -10px;
    bottom: 2px;
}        
nav.menu-bar:is([data-dir=left], [data-dir=bottom]) ul li.tab::before {
    background: radial-gradient(circle at bottom right, transparent 70%, var(--color-secondary) 75%);
    right: -10px;
    top: 2px;
}
nav.menu-bar:is([data-dir=left], [data-dir=bottom]) ul li.tab::after {
    background: radial-gradient(circle at bottom left, transparent 70%, var(--color-secondary) 75%);
    left: -10px;       
    top: 2px;     
}
nav.menu-bar ul li.tab span.close {
    background-color: rgb(255 0 0 / 25%);
    height: 13px;
    width: 13px;
    border-radius: 50%;
}
nav.menu-bar ul li.tab span.name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 15ch;
}

/* active tab */
nav.menu-bar ul li.tab.active {
    background-color: var(--color-primary);
    color: white;
}
nav.menu-bar:is([data-dir=top], [data-dir=right]) ul li.tab.active::before {
    background: radial-gradient(circle at top left, transparent 70%, var(--color-primary) 75%);
}
nav.menu-bar:is([data-dir=top], [data-dir=right]) ul li.tab.active::after {
    background: radial-gradient(circle at top right, transparent 70%, var(--color-primary) 75%);
}
nav.menu-bar:is([data-dir=left], [data-dir=bottom]) ul li.tab.active::before {
    background: radial-gradient(circle at bottom right, transparent 70%, var(--color-primary) 75%);
}
nav.menu-bar:is([data-dir=left], [data-dir=bottom]) ul li.tab.active::after {
    background: radial-gradient(circle at bottom left, transparent 70%, var(--color-primary) 75%);
}

/* anim menu bar in */        
nav.menu-bar[data-dir=top]:not(.anim-out) {
    animation: animTopIn 1s forwards;
}
@keyframes animTopIn {
    from { 
        opacity: 0;
        margin-top: calc(-1 * var(--dir-menu-size)); }
    to { 
        opacity: 1;
        margin-top: 0; 
    }
}
nav.menu-bar[data-dir=right]:not(.anim-out) {
    animation: animRightIn 1s forwards;
}
@keyframes animRightIn {
    from { 
        opacity: 0;
        margin-right: calc(-1 * var(--dir-menu-size)); }
    to { 
        opacity: 1;
        margin-right: 0; 
    }
}
nav.menu-bar[data-dir=left]:not(.anim-out) {
    animation: animLeftIn 1s forwards;
}
@keyframes animLeftIn {
    from { 
        opacity: 0;
        margin-left: calc(-1 * var(--dir-menu-size)); }
    to { 
        opacity: 1;
        margin-left: 0; 
    }
}
nav.menu-bar[data-dir=bottom]:not(.anim-out) {
    animation: animBottomIn 1s forwards;
}
@keyframes animBottomIn {
    from { 
        opacity: 0;
        margin-bottom: calc(-1 * var(--dir-menu-size)); }
    to { 
        opacity: 1;
        margin-bottom: 0; 
    }
}

/* anim menu bar out */   
nav.menu-bar[data-dir=top].anim-out {
    animation: animTopOut 1s forwards;
}
@keyframes animTopOut {
    from { 
        opacity: 1;
        margin-top: 0; 
    }
    to { 
        opacity: 0;
        margin-top: calc(-1 * var(--dir-menu-size)); 
    }
}
nav.menu-bar[data-dir=right].anim-out {
    animation: animRightOut 1s forwards;
}
@keyframes animRightOut {
    from { 
        opacity: 1;
        margin-right: 0; }
    to { 
        opacity: 0;
        margin-right: calc(-1 * var(--dir-menu-size));
    }
}
nav.menu-bar[data-dir=left].anim-out {
    animation: animLeftOut 1s forwards;
}
@keyframes animLeftOut {
    from { 
        opacity: 1;
        margin-left: 0; 
    } 
    to { 
        opacity: 0;
        margin-left: calc(-1 * var(--dir-menu-size));
    }
}
nav.menu-bar[data-dir=bottom].anim-out {
    animation: animBottomOut 1s forwards;
}
@keyframes animBottomOut {
    from { 
        opacity: 1;
        margin-bottom: 0; 
    }
    to { 
        opacity: 0;
        margin-bottom: calc(-1 * var(--dir-menu-size)); 
    }
}

/* tab body */
section.tab-body {
    grid-area: c;
}
section.tab-body .title {
    margin: 0;
    text-align: center;
    color: var(--color-primary);
    font-size: 16pt;
    outline: none;
    border-bottom: 2px solid var(--color-primary);
    transition: 1s;
}
nav.menu-bar[data-dir=top] + section h3.title {
    margin-top: 1.5rem;
}
section.tab-body .text {
    background-color: rgb(255 255 255 / 25%);
    border-radius: 10px;
    outline: none;
    padding: 5px 10px;
    font-weight: normal;
    color: var(--color-primary);
}