Skip to content

Commit

Permalink
sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@falezekiel
falezekiel committed Feb 22, 2025
1 parent 0f170e2 commit e3dcd48
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 19 deletions.
6 changes: 3 additions & 3 deletions resources/assets/js/components/Sidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<b-nav-item class="pl-1 w-100 nav-toggle" v-if="can(user, permissions.USERS_LIST)" v-b-toggle.collapse1>
<div class="d-flex align-items-center">
<div class="sidebar__icon mr-1 ml-1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><path d="M357.6,281.4L357.6,281.4C301.5,281.4,256,326.9,256,383v116.8c0,5.6,4.5,10.2,10.2,10.2H449c5.6,0,10.2-4.5,10.2-10.2V383 C459.2,326.9,413.7,281.4,357.6,281.4z"></path><circle cx="357.6" cy="154.4" r="76.2"></circle><path d="M154.4,205.2L154.4,205.2c-56.1,0-101.6,45.5-101.6,101.6v116.8c0,5.6,4.5,10.2,10.2,10.2H195c5.6,0,10.2-4.5,10.2-10.2 V383c0-40,15.5-76.3,40.7-103.5c2.7-2.9,3.7-7,2.2-10.6C233.1,231.6,197,205.2,154.4,205.2z"></path><circle cx="154.4" cy="78.2" r="76.2"></circle></g></svg>
<svg fill="white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><path d="M357.6,281.4L357.6,281.4C301.5,281.4,256,326.9,256,383v116.8c0,5.6,4.5,10.2,10.2,10.2H449c5.6,0,10.2-4.5,10.2-10.2V383 C459.2,326.9,413.7,281.4,357.6,281.4z"></path><circle cx="357.6" cy="154.4" r="76.2"></circle><path d="M154.4,205.2L154.4,205.2c-56.1,0-101.6,45.5-101.6,101.6v116.8c0,5.6,4.5,10.2,10.2,10.2H195c5.6,0,10.2-4.5,10.2-10.2 V383c0-40,15.5-76.3,40.7-103.5c2.7-2.9,3.7-7,2.2-10.6C233.1,231.6,197,205.2,154.4,205.2z"></path><circle cx="154.4" cy="78.2" r="76.2"></circle></g></svg>
</div>
<div>
{{ $t('sidebar.content_users') }}
Expand All @@ -24,7 +24,7 @@
<b-nav-item class="pl-1 w-100 nav-toggle" v-if="can(user, permissions.VIEW_BACKEND)" v-b-toggle.collapse2>
<div class="d-flex align-items-center">
<div class="sidebar__icon mr-1 ml-1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path d="M484.5,2H27.5C13.5,2,2.1,13.4,2.1,27.4v355.5c0,14,11.4,25.4,25.4,25.4h40.6c5.6,0,10.2,4.5,10.2,10.2v81.4 c0,8.1,9,13,15.8,8.5l133.9-98c1.7-1.3,3.8-2,6-2h250.6c14,0,25.4-11.4,25.4-25.4V27.4C509.9,13.4,498.5,2,484.5,2z M433.7,332.1 H78.3c-14,0-25.4-11.4-25.4-25.4s11.4-25.4,25.4-25.4h355.5c14,0,25.4,11.4,25.4,25.4S447.8,332.1,433.7,332.1z M433.7,230.5H78.3 c-14,0-25.4-11.4-25.4-25.4c0-14,11.4-25.4,25.4-25.4h355.5c14,0,25.4,11.4,25.4,25.4C459.1,219.2,447.8,230.5,433.7,230.5z M433.7,129H78.3c-14,0-25.4-11.4-25.4-25.4s11.4-25.4,25.4-25.4h355.5c14,0,25.4,11.4,25.4,25.4S447.8,129,433.7,129z"></path></svg>
<svg fill="white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path d="M484.5,2H27.5C13.5,2,2.1,13.4,2.1,27.4v355.5c0,14,11.4,25.4,25.4,25.4h40.6c5.6,0,10.2,4.5,10.2,10.2v81.4 c0,8.1,9,13,15.8,8.5l133.9-98c1.7-1.3,3.8-2,6-2h250.6c14,0,25.4-11.4,25.4-25.4V27.4C509.9,13.4,498.5,2,484.5,2z M433.7,332.1 H78.3c-14,0-25.4-11.4-25.4-25.4s11.4-25.4,25.4-25.4h355.5c14,0,25.4,11.4,25.4,25.4S447.8,332.1,433.7,332.1z M433.7,230.5H78.3 c-14,0-25.4-11.4-25.4-25.4c0-14,11.4-25.4,25.4-25.4h355.5c14,0,25.4,11.4,25.4,25.4C459.1,219.2,447.8,230.5,433.7,230.5z M433.7,129H78.3c-14,0-25.4-11.4-25.4-25.4s11.4-25.4,25.4-25.4h355.5c14,0,25.4,11.4,25.4,25.4S447.8,129,433.7,129z"></path></svg>
</div>
<div>
{{ $t('sidebar.content') }}
Expand All @@ -42,7 +42,7 @@
<b-nav-item class="pl-1 w-100 nav-toggle" v-if="can(user, permissions.USERS_LIST)" v-b-toggle.collapse3>
<div class="d-flex align-items-center">
<div class="sidebar__icon mr-1 ml-1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><path d="M484.6,2H27.4C13.4,2,2,13.4,2,27.4V383c0,14,11.4,25.4,25.4,25.4h116.8c5.6,0,10.2,4.5,10.2,10.2V449 c0,5.6-4.5,10.2-10.2,10.2h-34.4c-3.8,0-7.4,2.2-9.1,5.6l-15.2,30.5c-3.4,6.8,1.5,14.7,9.1,14.7h322.7c7.6,0,12.5-7.9,9.1-14.7 l-15.2-30.5c-1.7-3.4-5.2-5.6-9.1-5.6h-34.4c-5.6,0-10.2-4.5-10.2-10.2v-30.5c0-5.6,4.5-10.2,10.2-10.2h116.8 c14,0,25.4-11.4,25.4-25.4V27.4C510,13.4,498.6,2,484.6,2z M459.2,322c0,5.6-4.5,10.2-10.2,10.2H63c-5.6,0-10.2-4.5-10.2-10.2V63 c0-5.6,4.5-10.2,10.2-10.2H449c5.6,0,10.2,4.5,10.2,10.2V322z"></path><path d="M169.6,205.2h-30.5c-5.6,0-10.2,4.5-10.2,10.2v55.9c0,5.6,4.5,10.2,10.2,10.2h30.5c5.6,0,10.2-4.5,10.2-10.2v-55.9 C179.8,209.7,175.3,205.2,169.6,205.2z"></path><path d="M271.2,154.4h-30.5c-5.6,0-10.2,4.5-10.2,10.2v106.7c0,5.6,4.5,10.2,10.2,10.2h30.5c5.6,0,10.2-4.5,10.2-10.2V164.6 C281.4,158.9,276.9,154.4,271.2,154.4z"></path><path d="M372.8,103.6h-30.5c-5.6,0-10.2,4.5-10.2,10.2v157.5c0,5.6,4.5,10.2,10.2,10.2h30.5c5.6,0,10.2-4.5,10.2-10.2V113.8 C383,108.1,378.5,103.6,372.8,103.6z"></path></g></svg>
<svg fill="white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><path d="M484.6,2H27.4C13.4,2,2,13.4,2,27.4V383c0,14,11.4,25.4,25.4,25.4h116.8c5.6,0,10.2,4.5,10.2,10.2V449 c0,5.6-4.5,10.2-10.2,10.2h-34.4c-3.8,0-7.4,2.2-9.1,5.6l-15.2,30.5c-3.4,6.8,1.5,14.7,9.1,14.7h322.7c7.6,0,12.5-7.9,9.1-14.7 l-15.2-30.5c-1.7-3.4-5.2-5.6-9.1-5.6h-34.4c-5.6,0-10.2-4.5-10.2-10.2v-30.5c0-5.6,4.5-10.2,10.2-10.2h116.8 c14,0,25.4-11.4,25.4-25.4V27.4C510,13.4,498.6,2,484.6,2z M459.2,322c0,5.6-4.5,10.2-10.2,10.2H63c-5.6,0-10.2-4.5-10.2-10.2V63 c0-5.6,4.5-10.2,10.2-10.2H449c5.6,0,10.2,4.5,10.2,10.2V322z"></path><path d="M169.6,205.2h-30.5c-5.6,0-10.2,4.5-10.2,10.2v55.9c0,5.6,4.5,10.2,10.2,10.2h30.5c5.6,0,10.2-4.5,10.2-10.2v-55.9 C179.8,209.7,175.3,205.2,169.6,205.2z"></path><path d="M271.2,154.4h-30.5c-5.6,0-10.2,4.5-10.2,10.2v106.7c0,5.6,4.5,10.2,10.2,10.2h30.5c5.6,0,10.2-4.5,10.2-10.2V164.6 C281.4,158.9,276.9,154.4,271.2,154.4z"></path><path d="M372.8,103.6h-30.5c-5.6,0-10.2,4.5-10.2,10.2v157.5c0,5.6,4.5,10.2,10.2,10.2h30.5c5.6,0,10.2-4.5,10.2-10.2V113.8 C383,108.1,378.5,103.6,372.8,103.6z"></path></g></svg>
</div>
<div>
{{ $t('sidebar.api') }}
Expand Down
2 changes: 1 addition & 1 deletion resources/assets/js/layouts/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<b-container fluid>
<b-row class="position-relative">
<transition name="page" mode="out-in">
<sidebar v-if="hasSidebar" class="sidebar bg-light pt-4 pb-2" :class="[{ collapsed: collapseSidebar }]"></sidebar>
<sidebar v-if="hasSidebar" class="sidebar pt-4 pb-2" :class="[{ collapsed: collapseSidebar }]"></sidebar>
</transition>
<main :class="`col-sm-12 pl-0 pr-0 ${ hasSidebar ? '' : 'vh-min-100' }`">
<router-view></router-view>
Expand Down
22 changes: 7 additions & 15 deletions resources/assets/sass/components/_sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
z-index: 999; /* Fix for hidden dropdown from the navbar above (z-index: 1000) */
transition: width 0.3s ease-in;
background-image: linear-gradient(193deg, rgba(0, 0, 0, 0.5), #000000), linear-gradient(rgba(115, 115, 115, 0.7), rgba(115, 115, 115, 0.7));
width: 200px;
position: sticky;
top: 0;
Expand All @@ -14,10 +13,10 @@
.nav {
transition: margin 0.3s ease-in;
li {
font-size:em(10);
font-size:0.8rem;
}
> li {
font-size:em(12);
font-size:0.9rem;
}
a {
overflow: hidden;
Expand Down Expand Up @@ -51,18 +50,15 @@

.nav-item:not(.nav-toggle):hover .nav-link {
border-left-color: $secondary-colour;
opacity: 1;
}
.nav-link {
color: $white;
color: $black;
border-left: 2px solid transparent;
transition: border-color 0.3s ease-in-out;
opacity: 0.6;
&.active,
&:hover,
&:focus {
font-weight: bold;
opacity: 1;
border-left-color: $secondary-colour;
}

Expand All @@ -83,13 +79,13 @@
&__icon {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
width: 28px;
height: 28px;
border-radius: 20px;
background-color: #ffffff;
background-color: red;
border: solid 2px rgba(255, 255, 255, 0.2);
opacity: 1;
flex-shrink: 0;
color: $white;

svg {
position: absolute;
Expand All @@ -101,7 +97,3 @@
}
}
}

.sidebar .nav-item.collapsed .sidebar__icon {
opacity: 0.6;
}

0 comments on commit e3dcd48

Please sign in to comment.