Gagandeep/syscom-master-admin-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit - Master Admin UI

Browse Source
This commit is contained in:
Gagan7900
2026-07-07 18:38:36 +05:30
commit 66e2c15e51
26539 changed files with 789907 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
preview/assets/scss/layout/_closed_menu.scss
+33
View File
@@ -0,0 +1,33 @@
[data-vertical-style="closed"] {
&[data-toggled="close-menu-close"] {
.app-sidebar {
@apply hidden;
}
@media (min-width: 992px) {
.content {
@apply ms-0;
}
.app-header {
@apply ps-0! ;
}
}
}
&[data-toggled="close-menu-open"] {
.app-sidebar {
@apply block;
}
@media (min-width: 992px) {
.content {
@apply ms-60;
}
.app-header {
@apply ps-60;
}
}
}
}
preview/assets/scss/layout/_double_menu.scss
+213
View File
@@ -0,0 +1,213 @@
[data-vertical-style="doublemenu"] {
@media (min-width: 992px) {
.app-sidebar {
@apply w-20 border-e-0;
.main-sidebar {
@apply overflow-visible h-full shadow-none mt-0;
}
.main-sidebar-header {
@apply w-20 border-e;
.header-logo {
.toggle-logo {
@apply block!;
}
.desktop-dark,
.desktop-logo,.toggle-white,
.toggle-dark {
@apply hidden!;
}
}
}
.main-menu-container {
@apply mt-[3.75rem];
}
.main-menu >.slide {
@apply py-0 px-[1.2rem];
}
.category-name,
.side-menu__label,
.side-menu__angle {
@apply hidden;
}
.side-menu__icon {
@apply me-0;
}
.slide__category {
@apply hidden;
}
.simplebar-content-wrapper {
position: initial;
}
.simplebar-mask {
position: inherit;
}
.simplebar-placeholder {
@apply h-auto! ;
}
}
.app-header {
@apply ps-[17rem];
}
.content {
@apply ms-[17rem];
}
.slide.has-sub .slide-menu {
@apply bg-white dark:bg-bodybg absolute start-2 shadow-none transition-none h-full end-0 rounded-md border-e border-e-white/10 ;
&.child2,
&.child3 {
@apply start-0! relative! h-auto! top-0!;
.slide {
&:nth-child(2) {
@apply pt-[0rem];
}
}
}
}
.slide-menu {
&.child1,
&.child2,
&.child3 {
.slide {
@apply ps-0;
.side-menu__item {
@apply text-start;
&:before {
@apply top-[0.938rem] start-[0.75rem];
}
}
}
.side-menu__angle {
@apply block end-4 top-[0.65rem];
}
}
&.child2,&.child3 {
@apply min-w-[10rem];
}
&.child1 {
@apply min-w-[12rem];
.slide {
&:nth-child(2) {
@apply pt-3;
}
}
}
}
.side-menu__label1 {
@apply block! text-[0.938rem]! font-medium! text-white! py-5! px-3! w-48! h-[3.75rem]! border-b! border-b-white/10!;
}
.slide-menu {
@apply hidden ;
&.double-menu-active {
@apply visible! block! h-full! absolute! top-0! rounded-none! border-t-0! overflow-y-hidden! overflow-x-scroll!;
}
}
&[class="light"] {
&[data-menu-styles="dark"],&[data-menu-styles="color"],&[data-menu-styles="gradient"] {
.app-sidebar .main-sidebar-header {
.header-logo {
.desktop-logo,.desktop-dark,.toggle-logo,.toggle-dark {
@apply hidden!;
}
.toggle-white {
@apply block!;
}
}
}
}
&[data-menu-styles="transparent"] {
.app-sidebar .main-sidebar-header {
.header-logo {
.desktop-logo,.desktop-dark,.toggle-logo,.toggle-white {
@apply hidden!;
}
.toggle-logo {
@apply block!;
}
}
}
}
}
&.dark {
.app-sidebar .main-sidebar-header {
.header-logo {
.desktop-logo,.desktop-dark,.toggle-logo,.toggle-white {
@apply hidden!;
}
.toggle-dark {
@apply block!;
}
}
}
&[data-menu-styles="light"] {
.app-sidebar .main-sidebar-header {
.header-logo {
.desktop-logo,.desktop-dark,.toggle-dark,.toggle-white {
@apply hidden!;
}
.toggle-logo {
@apply block!;
}
}
}
}
&[data-menu-styles="dark"],&[data-menu-styles="color"],&[data-menu-styles="gradient"],&[data-menu-styles="transparent"] {
.app-sidebar .main-sidebar-header {
.header-logo {
.desktop-logo,.desktop-dark,.toggle-dark,.toggle-logo {
@apply hidden!;
}
.toggle-white {
@apply block!;
}
}
}
}
&[data-page-style="classic"] {
.slide.has-sub .slide-menu {
@apply border-e border-e-white/10;
}
}
}
&[data-toggled="double-menu-close"] {
.app-header{
@apply ps-20;
}
.content {
@apply ms-20;
}
.app-sidebar {
.slide.has-sub .slide-menu {
@apply hidden!;
}
.main-sidebar {
@apply shadow-defaultshadow;
}
}
}
&[data-toggled="double-menu-open"] {
.app-sidebar .main-sidebar {
.slide.side-menu__label1 {
@apply border-e border-e-white/10;
}
}
}
}
}
preview/assets/scss/layout/_horizontal.scss
+256
View File
@@ -0,0 +1,256 @@
[data-nav-layout="horizontal"] {
@media (min-width: 992px) {
.simplebar-track.simplebar-horizontal {
@apply hidden;
}
.app-sidebar {
@apply h-[3rem];
}
.sidemenu-layout-styles {
@apply hidden!;
}
.main-menu {
@apply flex! transition-all ease-linear duration-[0.5s] flex-nowrap;
&-container {
@apply inline-flex;
}
}
.side-menu__label .badge {
@apply hidden!;
}
.mega-menu {
@apply columns-3;
}
.app-header {
@apply ps-0! z-[50]! shadow-none! ;
}
.content {
@apply mx-auto! mt-28! start-0! min-h-[calc(100vh-10.5rem)]! w-full! ;
> .container-fluid {
@apply w-[94%] ms-auto me-auto;
}
.main-content {
@apply w-[94%] mx-auto;
}
}
.app-sidebar {
.main-sidebar,
.simplebar-mask {
@apply overflow-visible;
}
.main-menu > .slide {
@apply my-0 mx-[0.1875rem];
}
.main-sidebar {
@apply shadow-none;
}
}
.main-sidebar .simplebar-vertical {
@apply invisible! overflow-hidden! ;
}
.main-sidebar,
.main-header-container {
@apply w-[94%] my-0 mx-auto;
}
.horizontal-logo {
@apply py-[0.85rem] px-0 block;
.header-logo {
img {
@apply h-8 leading-8;
}
.desktop-logo {
@apply block;
}
.desktop-dark,
.toggle-logo,
.toggle-dark,
.desktop-white,.toggle-white {
@apply hidden;
}
}
}
[data-header-styles="dark"] {
.horizontal-logo {
@apply py-[0.85rem] px-0 block;
.header-logo {
img {
@apply h-8 leading-8;
}
.desktop-dark {
@apply block!;
}
.desktop-logo,
.toggle-logo,
.toggle-dark,
.desktop-white,.toggle-white {
@apply hidden!;
}
}
}
}
.main-header-container .sidemenu-toggle {
@apply hidden;
}
.app-sidebar {
@apply w-full! h-12! top-[3.75rem]! ;
.slide-menu.child1,
.slide-menu.child2,
.slide-menu.child3 {
li {
@apply ps-2;
}
.side-menu__item:before {
@apply top-[0.938rem]! start-3! ;
}
}
.app-sidebar .slide-menu.child1 .side-menu__item,
.app-sidebar .slide-menu.child2 .side-menu__item {
@apply py-[0.45rem]! px-[1.6rem]! ;
}
.simplebar-content {
@apply p-0! overflow-hidden! ;
}
.simplebar-content-wrapper {
@apply overflow-hidden! h-auto! ;
}
.main-sidebar {
@apply h-12! p-0! ;
}
.slide.has-sub .slide-menu {
&.child1 {
@apply start-6 p-0 rounded-b-sm shadow-[.063rem_.188rem_.5rem_rgba(0,0,0,0.1)] dark:shadow-[.063rem_.188rem_.5rem_rgba(255,255,255,0.1)] ;
}
&.child2,
&.child3 {
@apply end-[100%]! px-0! rounded-sm! ;
}
&.active {
@apply start-auto! end-auto!;
}
}
.slide-menu.child1 {
@apply absolute!;
}
.side-menu__item {
@apply w-full flex rounded-none p-[0.92rem];
}
.side-menu__angle {
@apply end-[0.45rem] block;
}
.side-menu__icon {
@apply me-1 mb-0;
}
.slide.has-sub .slide-menu.child1 {
@apply bg-white dark:bg-bodybg top-[100%] min-w-[12rem];
}
.slide {
@apply p-0;
}
.slide-menu {
&.child1 {
.slide.has-sub,
.slide {
@apply w-full flex py-0 px-[0.1875rem];
}
}
&.child2,
&.child3 {
@apply rounded-sm;
}
}
.slide,
.slide.has-sub {
@apply static;
}
.main-menu {
@apply mb-0;
}
}
.main-sidebar-header {
@apply hidden!;
}
.main-sidebar {
@apply mt-0 pb-12;
}
.slide__category {
@apply hidden;
}
/* horizontal arrows */
.main-menu-container .slide-left {
@apply start-[1.438rem];
}
.main-menu-container .slide-left,
.main-menu-container .slide-right {
@apply absolute top-[0.563rem] p-[0.375rem] flex items-center justify-center z-[1] cursor-pointer border border-solid border-defaultborder rounded-[3.125rem] text-white dark:text-bodybg;
}
.main-menu-container .slide-left,
.main-menu-container .slide-right {
@apply absolute top-[0.313rem] p-[0.375rem] flex items-center justify-center z-[1] cursor-pointer border border-solid border-defaultborder rounded-[3.125rem] text-white dark:text-bodybg bg-white dark:bg-bodybg;
svg {
@apply fill-black;
}
}
.main-menu-container {
.slide-right {
@apply end-[-3%];
}
.slide-left {
@apply start-[-3%];
}
}
&[page-style="classic"] {
.app-sidebar {
@apply border-b border-b-defaultborder;
}
}
&[dir="rtl"] {
.main-menu-container {
.slide-right,
.slide-left {
@apply rotate-180;
}
}
}
&.dark {
.header-logo {
.desktop-dark {
@apply block;
}
.toggle-logo,
.desktop-logo,
.toggle-logo,
.desktop-white,.toggle-white {
@apply hidden;
}
}
.app-sidebar {
@apply border-white/10!;
.slide.has-sub .slide-menu {
&.child1,
&.child2,
&.child3 {
@apply bg-bodybg! border-white/10!;
}
}
.slide.side-menu__label1 {
@apply border-white/10! text-white! ;
}
.main-menu-container {
.slide-left,
.slide-right {
@apply bg-black/20 text-white border-white/10;
svg {
@apply fill-white;
}
}
}
}
}
}
}
preview/assets/scss/layout/_icon_click.scss
+215
View File
@@ -0,0 +1,215 @@
[data-nav-style="icon-click"][data-nav-layout="horizontal"],
[data-nav-style="icon-click"][data-toggled="icon-click-closed"] {
@extend .icon-click;
}
.icon-click {
@media (min-width: 992px) {
.content {
@apply ms-[5rem];
}
.app-sidebar {
@apply w-20;
.main-sidebar {
@apply overflow-visible ;
}
.main-sidebar-header {
@apply w-20;
.header-logo {
.toggle-logo {
@apply block;
}
.desktop-dark,
.desktop-logo,
.toggle-dark,
.desktop-white,
.toggle-white {
@apply hidden;
}
}
}
.category-name,
.side-menu__label,
.side-menu__angle {
@apply hidden;
}
.side-menu__icon {
@apply me-0;
}
.slide__category {
@apply py-[1.2rem] px-[1.65rem] relative;
&:before {
@apply content-[""] absolute start-9 end-0 top-5 bottom-0 w-[0.35rem] rounded-[3.125rem] h-[0.35rem] border border-[#536485] opacity-[1];
}
}
.simplebar-content-wrapper {
position: initial;
}
.simplebar-mask {
position: inherit;
}
.simplebar-placeholder {
@apply h-auto! ;
}
}
.app-header {
@apply ps-20;
}
.content {
@apply ms-20;
}
.slide {
&.side-menu__label1 {
@apply block! py-2! px-4! border-b! border-b-defaultborder! ;
}
}
.slide.has-sub .slide-menu {
@apply absolute! start-20! rounded-e-md! top-auto! transition-none! shadow-[0.125rem_0.063rem_0.5rem_rgba(0,0,0,0.1)]! dark:!shadow-[0.125rem_0.063rem_0.5rem_rgba(255,255,255,0.1)];
&.child2,
&.child3 {
@apply start-48!;
}
}
.slide-menu {
&.child1,
&.child2,
&.child3 {
@apply min-w-[12rem];
.slide {
.side-menu__item {
@apply text-start;
&:before {
@apply top-[0.938rem] start-3;
}
}
}
.side-menu__angle {
@apply block end-4 top-[0.65rem];
}
}
}
}
}
[data-nav-style="icon-click"][data-nav-layout="horizontal"] {
@media(min-width:992px){
.slide.has-sub .slide-menu {
@apply absolute! start-20! transition-none! shadow-[0.125rem_0.063rem_0.5rem_rgba(0,0,0,0.1)]! dark:!shadow-[0.125rem_0.063rem_0.5rem_rgba(255,255,255,0.1)];
}
.slide.has-sub .slide-menu {
&.child1 {
@apply top-full!;
}
&.child2,
&.child3 {
@apply start-48!;
}
}
.mega-menu {
@apply columns-1;
}
}
}
[data-nav-layout="vertical"][data-nav-style="icon-click"] {
@media (min-width: 992px) {
&[data-toggled="icon-click-closed"] {
.app-sidebar .main-menu {
> .slide {
@apply py-0 px-[1.2rem];
}
}
.app-sidebar {
.slide .slide-menu {
&.child1,
&.child2,
&.child3 {
@apply rounded-e-md rounded-s-none;
}
}
}
&.dark {
.app-sidebar {
.main-sidebar-header {
.header-logo {
.toggle-white {
@apply block;
}
.desktop-dark,
.desktop-logo,
.toggle-logo,
.desktop-white,
.toggle-dark {
@apply hidden;
}
}
}
}
&[data-menu-styles="light"]{
.app-sidebar {
.main-sidebar-header {
.header-logo {
.toggle-white {
@apply hidden;
}
}
}
}
}
&[data-menu-styles="transparent"] {
.app-sidebar {
.main-sidebar-header {
.header-logo {
.toggle-white {
@apply block! ;
}
}
}
}
}
}
.app-sidebar {
@apply absolute! ;
.slide-menu {
&.child1,
&.child2,
&.child3 {
li.slide {
@apply ps-0;
a {
@apply rounded-none;
}
}
}
}
}
}
}
}
@media (min-width: 992px) {
[data-nav-style="icon-click"][data-toggled="icon-click-closed"]:not([data-nav-layout="horizontal"]) {
.content {
@apply min-h-[85rem];
}
}
}
preview/assets/scss/layout/_icon_hover.scss
+236
View File
@@ -0,0 +1,236 @@
[data-nav-layout="horizontal"][data-nav-style="icon-hover"],
[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
@extend .icon-hover;
}
.icon-hover {
@media (min-width: 992px) {
.content{
@apply ms-[5rem];
}
.app-sidebar {
@apply w-20;
.main-sidebar {
@apply overflow-visible ;
}
.main-sidebar-header {
@apply w-20;
.header-logo {
.toggle-logo {
@apply block;
}
.desktop-dark,
.desktop-logo,
.toggle-dark,.toggle-white,.desktop-white {
@apply hidden;
}
}
}
.category-name,
.side-menu__label,
.side-menu__angle {
@apply hidden;
}
.side-menu__icon {
@apply me-0;
}
.slide__category {
@apply py-[1.2rem] px-[1.65rem] relative;
&:before {
@apply content-[""] absolute start-[2.4rem] end-0 top-5 bottom-0 w-[0.35rem] rounded-[3.125rem] h-[0.35rem] border border-[#536485] opacity-[1];
}
}
.simplebar-content-wrapper {
position: initial;
}
.simplebar-mask {
position: inherit;
}
.simplebar-placeholder {
@apply h-auto!;
}
}
.app-header {
@apply ps-20;
}
.content {
@apply ms-20;
}
.slide.side-menu__label1 {
@apply block! py-2! px-4! border-b! border-b-defaultborder!;
}
.slide.has-sub .slide-menu {
@apply absolute start-20 rounded-e-md dark:bg-bodybg top-auto transition-none shadow-[0.125rem_0.063rem_0.5rem_rgba(0,0,0,0.1)] dark:shadow-[0.125rem_0.063rem_0.5rem_rgba(255,255,255,0.1)] ;
&.child2,
&.child3 {
@apply start-[11.8rem]!;
}
}
.slide-menu {
&.child1,
&.child2,
&.child3 {
@apply min-w-[12rem]! hidden!;
.slide {
.side-menu__item {
@apply text-start! pe-0!;
&:before {
@apply top-[0.938rem] start-3;
}
}
}
.side-menu__angle {
@apply block end-4 top-[0.65rem];
}
}
}
.slide.has-sub:hover {
.slide-menu.child1 {
@apply block!;
.slide.has-sub:hover {
.slide-menu.child2 {
@apply block!;
.slide.has-sub:hover {
.slide-menu.child3 {
@apply block!;
}
}
}
}
}
}
}
}
[data-nav-style="icon-hover"][data-nav-layout="horizontal"] {
@media(min-width:992px){
.slide.has-sub .slide-menu {
@apply absolute start-20 transition-none shadow-[0.125rem_0.063rem_0.5rem_rgba(0,0,0,0.1)] dark:shadow-[0.125rem_0.063rem_0.5rem_rgba(255,255,255,0.1)] ;
}
.slide.has-sub .slide-menu {
&.child1 {
@apply top-full!;
}
&.child2,
&.child3 {
@apply start-48!;
}
}
}
.mega-menu {
@apply columns-1;
}
}
[data-nav-layout="vertical"][data-nav-style="icon-hover"] {
@media (min-width: 992px) {
&[data-toggled="icon-hover-closed"] {
.app-sidebar .main-menu{
>.slide {
@apply py-0 px-[1.2rem];
}
}
.app-sidebar {
.slide .slide-menu {
&.child1,&.child2,&.child3 {
@apply rounded-e-md rounded-s-none;
}
}
}
&.dark {
.app-sidebar {
.main-sidebar-header {
.header-logo {
.toggle-white {
@apply block;
}
.desktop-dark,
.desktop-logo,
.toggle-logo,
.desktop-white,
.toggle-dark {
@apply hidden;
}
}
}
}
&[data-menu-styles="light"]{
.app-sidebar {
.main-sidebar-header {
.header-logo {
.toggle-white {
@apply hidden;
}
}
}
}
}
&[data-menu-styles="transparent"] {
.app-sidebar {
.main-sidebar-header {
.header-logo {
.toggle-white {
@apply block!;
}
}
}
}
}
}
.app-sidebar {
@apply absolute!;
.slide-menu {
&.child1,
&.child2,
&.child3 {
@apply p-[0.1875rem];
li.slide {
@apply ps-0;
a {
@apply rounded-none;
}
}
}
}
}
}
}
}
@media (min-width: 992px) {
[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"]:not([data-nav-layout="horizontal"]) {
.content {
@apply min-h-[85rem];
}
}
}
preview/assets/scss/layout/_menu_click.scss
+148
View File
@@ -0,0 +1,148 @@
[data-nav-style="menu-click"][data-nav-layout="horizontal"] {
@extend .menu-click;
@media (min-width: 992px) {
.app-sidebar {
.side-menu__item {
@apply flex! items-center! px-[1.6rem]!;
}
.side-menu__icon {
@apply mb-0! me-[0.35rem]! ;
}
.side-menu__angle {
@apply block!;
}
.slide.has-sub .slide-menu {
@apply start-auto!;
&.active {
@apply start-auto! end-auto!;
}
&.child1 {
@apply top-[100%]!;
}
}
}
.app-header {
@apply ps-[9.5rem];
}
}
}
[data-nav-style="menu-click"][data-toggled="menu-click-closed"] {
@extend .menu-click;
.app-header {
@apply ps-[9.5rem];
}
}
[data-nav-style="menu-click"][data-nav-layout="vertical"][data-toggled="menu-click-closed"] {
@media (min-width: 992px) {
.app-sidebar {
@apply absolute! ;
.side-menu__item {
@apply rounded-md! mt-1! mx-1! mb-0! ;
&:last-child {
@apply m-1! ;
}
}
}
.app-sidebar {
.slide .slide-menu {
&.child1,
&.child2,
&.child3 {
@apply rounded-e-md! ;
}
}
}
}
}
.menu-click {
@media (min-width: 992px) {
.content {
@apply ms-[9.5rem];
}
.app-sidebar {
@apply w-[9.5rem];
.main-sidebar {
@apply overflow-visible ;
}
.main-sidebar-header {
@apply w-[9.5rem];
}
.side-menu__icon {
@apply me-0 mb-2;
}
.slide {
@apply p-0;
}
.slide-menu {
&.child1,
&.child2,
&.child3 {
@apply min-w-[12rem];
.slide {
.side-menu__item {
@apply text-start;
&:before {
@apply top-[0.938rem] start-3;
}
}
}
.side-menu__angle {
@apply block end-4 top-[0.65rem];
}
.slide.has-sub,
.slide {
&.side-menu__label1 {
@apply hidden;
}
}
}
}
.slide__category,
.side-menu__angle {
@apply hidden;
}
.side-menu__item,
.side-menu__label {
@apply block text-center;
}
.slide.has-sub .slide-menu {
@apply absolute start-[9.5rem] top-auto transition-none shadow-[0.125rem_0.063rem_0.5rem_rgba(0,0,0,0.1)] dark:shadow-[0.125rem_0.063rem_0.5rem_rgba(255,255,255,0.1)];
&.child2,
&.child3 {
@apply start-48!;
}
}
.simplebar-content-wrapper {
position: initial;
}
.simplebar-mask {
position: inherit;
}
.simplebar-placeholder {
@apply h-auto!;
}
}
.content {
@apply ms-[9.5rem];
}
}
@media (max-width: 991.98px) {
.app-sidebar {
@apply w-60;
}
}
}
@media (min-width: 992px) {
[data-nav-style="menu-click"][data-toggled="menu-click-closed"]:not([data-nav-layout="horizontal"]) {
.content {
@apply min-h-[100rem];
}
}
}
preview/assets/scss/layout/_menu_hover.scss
+176
View File
@@ -0,0 +1,176 @@
[data-nav-style="menu-hover"][data-nav-layout="horizontal"] {
@extend .menu-hover;
@media (min-width: 992px) {
.app-sidebar {
.side-menu__item {
@apply flex! items-center! px-[1.6rem]!;
}
.side-menu__icon {
@apply mb-0! me-[0.35rem]!;
}
.side-menu__angle {
@apply block! ;
}
.slide.has-sub .slide-menu {
&.active {
@apply start-auto! end-auto! rounded-none! ;
}
&.child1 {
@apply top-[100%]! ;
}
}
}
}
}
[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"] {
@extend .menu-hover;
}
[data-nav-style="menu-hover"][data-nav-layout="vertical"][data-toggled="menu-hover-closed"] {
@media (min-width: 992px) {
.app-sidebar {
@apply absolute! ;
.side-menu__item {
@apply rounded-md! mt-1! mb-0! mx-1! ;
&:last-child {
@apply m-1! ;
}
}
}
.app-sidebar {
.slide .slide-menu {
&.child1,&.child2,&.child3 {
@apply rounded-e-md rounded-s-none;
}
}
}
}
}
.menu-hover {
@media (min-width: 992px) {
.content{
@apply ms-[9.5rem];
}
.app-sidebar {
@apply w-[9.5rem];
.main-sidebar {
@apply overflow-visible ;
}
.main-sidebar-header {
@apply w-[9.5rem];
}
.side-menu__icon {
@apply me-0 mb-2;
}
.slide {
@apply p-0;
}
.slide-menu {
&.child1,
&.child2,
&.child3 {
@apply min-w-[12rem]! hidden!;
.slide {
.side-menu__item {
@apply text-start;
&:before {
@apply top-[0.938rem] start-3;
}
}
}
.slide.has-sub,.slide {
&.side-menu__label1 {
@apply hidden;
}
}
}
}
.slide.has-sub:hover {
.slide-menu.child1 {
@apply block!;
.slide.has-sub:hover {
.slide-menu.child2 {
@apply block!;
.slide.has-sub:hover {
.slide-menu.child3 {
@apply block!;
}
}
}
}
}
}
.slide__category,
.side-menu__angle {
@apply hidden;
}
.slide-menu {
&.child1,
&.child2,
&.child3 {
.side-menu__angle {
@apply block end-4 top-[0.65rem];
}
}
}
.side-menu__item,
.side-menu__label {
@apply block text-center;
}
.slide.has-sub .slide-menu {
@apply absolute start-[9.5rem] top-auto transition-none rounded-e-md shadow-[0.125rem_0.063rem_0.5rem_rgba(0,0,0,0.1)] dark:shadow-[0.125rem_0.063rem_0.5rem_rgba(255,255,255,0.1)] ;
&.child2,
&.child3 {
@apply start-48!;
}
}
.simplebar-content-wrapper {
position: initial;
}
.simplebar-mask {
position: inherit;
}
.simplebar-placeholder {
@apply h-auto!;
}
}
.app-header {
@apply ps-[9.5rem];
}
.content {
@apply ms-[9.5rem];
}
}
}
@media (min-width: 992px) {
[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"]:not([data-nav-layout="horizontal"]) {
.content {
@apply min-h-[100rem];
}
}
}
preview/assets/scss/layout/_vertical.scss
+364
View File
@@ -0,0 +1,364 @@
.main-sidebar {
@apply mt-[3.72rem] pt-2 pb-20 h-screen relative overflow-auto focus-visible:outline-none;
.main-menu-container,
.simplebar-content-wrapper,
.simplebar-content{
@apply focus-visible:outline-none;
}
}
.app-sidebar {
.side-menu__angle {
@apply rtl:rotate-180;
}
}
.sidemenu-toggle .header-link {
.header-link-icon {
@apply rtl:rotate-180;
}
}
.app-sidebar {
@apply w-[15rem] h-full bg-[#111c43] dark:bg-bodybg border-e border-e-white/10 fixed top-0 start-0 font-montserrat z-[103] transition-all ease-linear duration-[0.05s];
.main-sidebar-header {
@apply h-[3.75rem] w-[15rem] fixed flex dark:bg-bodybg z-[9] items-center justify-center py-[0.813rem] px-5 border-b border-b-white/10 border-e border-e-white/10 transition-all ease-linear duration-[0.05s];
.header-logo {
img {
@apply h-8 leading-8;
}
.desktop-dark{
@apply block;
}
.desktop-logo,
.toggle-logo,
.toggle-dark,.toggle-white {
@apply hidden;
}
}
}
.slide__category {
@apply text-[0.6rem] font-semibold tracking-[0.065rem] uppercase py-3 px-[1.65rem] whitespace-nowrap opacity-50 relative text-[#a3aed1] dark:text-[#8f9bb3];
}
.slide {
@apply m-0 py-[0rem] px-3;
}
.side-menu__item {
@apply p-3 relative flex items-center no-underline text-[0.78rem] text-[#a3aed1] dark:text-[#8f9bb3] font-medium rounded-md cursor-pointer my-[0.25rem];
&.active,
&:hover {
@apply text-white bg-white/[0.05] before:border-white;
.side-menu__label,
.side-menu__angle {
@apply text-white;
}
.side-menu__icon {
@apply fill-white text-white;
}
}
&.active {
@apply font-semibold;
}
}
.slide-menu {
&.child1,
&.child2,
&.child3 {
.side-menu__item.active {
@apply bg-transparent;
}
}
}
.slide-menu {
@apply p-[0rem];
}
.slide-menu {
&.child1,
&.child2 {
.side-menu__item {
@apply py-[0.45rem] px-[1.6rem];
}
}
}
.slide-menu {
&.child1,
&.child2,
&.child3 {
.side-menu__item {
&:before {
@apply absolute content-[""] w-[0.3rem] h-[0.3rem] border border-[#536485] dark:border-[#8f9bb3] rounded-full bg-transparent start-2 opacity-50;
}
&:hover {
@apply text-white;
&:before {
@apply content-[""]! border! border-white! rounded-full! bg-transparent! opacity-100! ;
}
}
&.active {
&:before {
@apply absolute content-[""] w-[0.3rem] h-[0.3rem] border border-white rounded-full bg-transparent opacity-100;
}
}
}
li {
@apply p-0 ps-6 relative;
}
}
}
.side-menu__label {
@apply whitespace-nowrap text-[#a3aed1] dark:text-[#8f9bb3] relative text-[0.85rem] leading-none align-middle;
.badge {
@apply p-2 rounded-sm;
}
}
.side-menu__icon {
@apply me-2.5 w-[1.15rem] h-[1.15rem] text-[1.15rem] text-center text-[#a3aed1] fill-[#a3aed1] dark:text-[#8f9bb3] rounded-md;
}
.side-menu__angle {
@apply origin-center absolute end-3 text-[0.85rem] text-[#a3aed1] dark:text-[#8f9bb3] transition-all ease-linear duration-[0.05s];
}
.slide.side-menu__label1 {
@apply hidden;
}
}
.horizontal-logo {
@apply py-[0.85rem] px-[0rem];
}
.slide.has-sub .slide-menu {
@apply visible! translate-x-0! translate-y-0!;
}
.nav ul li {
@apply list-none;
}
.nav>ul {
@apply ps-0;
}
.slide-menu {
@apply hidden;
}
.slide.has-sub {
@apply grid;
&.open {
>.side-menu__item .side-menu__angle {
@apply rotate-90;
}
}
}
/* Start Responsive Styles */
[data-toggled="open"] {
.app-sidebar {
@apply translate-x-0 transition-all duration-300;
.main-sidebar-header {
@apply hidden;
}
#sidebar-scroll {
@apply mt-0;
}
@apply lg:!translate-x-0 ;
}
}
[data-toggled="close"] {
.app-sidebar {
@apply transition-all duration-300 -translate-x-full;
.main-sidebar-header {
@apply hidden;
}
#sidebar-scroll {
@apply mt-0;
}
@apply lg:!translate-x-0 ;
}
&[dir="ltr"] {
.app-sidebar {
@apply -translate-x-full;
}
}
&[dir="rtl"] {
.app-sidebar {
@apply translate-x-full;
}
}
}
@media screen and (max-width: 991px) {
.main-sidebar-header {
@apply hidden;
}
#sidebar-scroll {
@apply mt-0!;
}
}
/* End Responsive Styles */
/* Responsive Styles Start */
@media (max-width: 991.98px) {
.horizontal-logo {
.header-logo {
.desktop-logo,
.desktop-dark,
.toggle-dark,
.desktop-white,.toggle-white {
@apply hidden;
}
.toggle-logo {
@apply block;
}
}
}
.main-sidebar-header {
@apply hidden! ;
}
.main-sidebar {
@apply mt-0;
}
.app-sidebar {
@apply top-0;
}
}
.slide-left,
.slide-right {
@apply hidden;
}
[data-nav-layout="vertical"] {
.slide.has-sub {
&.active {
>.side-menu__item {
@apply mb-[0.25rem];
}
}
}
}
@media (min-width:992px) {
.horizontal-logo {
@apply hidden;
}
}
/* Responsive Styles End */
/* Responsive Overlay Start */
#responsive-overlay {
@apply invisible fixed inset-0 z-[101] transition-all ease-in-out duration-100 bg-[#878b94];
&.active {
@apply visible;
}
}
/* Responsive Overlay End */
@media (max-width: 991.98px) {
.main-menu {
@apply m-0! ;
}
.app-sidebar {
@apply z-[105]!;
}
}